Question

我尝试让webpack，Vuejs和tailwindcss的Electron应用运行，从electron-webpack模板包开始，然后添加Vuejs和tailwindcss，但是tailwindcss没有不行。

SO上有equivalent thread，但其中提到的解决方案使用electron-vue，它有200多个未解决的问题，而且似乎不再维护。

有人知道这里出了什么问题吗？我进行如下操作：

初始化Electron Webback样板（根据here）：

git clone https://github.com/electron-userland/electron-webpack-quick-start.git project
cd project
rm -rf .git

安装Vuejs：

yarn add --dev vue css-loader vue-loader vue-template-compiler

为Vuejs设置Webpack：

const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: 'vue-loader'
            }
        ],
        plugins: [
            new VueLoaderPlugin()
        ]
    }
}

通过将src/renderer/index.js修改为以下内容来测试Vuejs：

'use strict';
import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: '#app',
    render(h) {
        return h(App)
    }
})

并添加src/renderer/App.vue：

<template>
    <div>Welcome</div>
</template>

→到目前为止有效。

安装tailwindcss：

yarn add —-dev tailwindcss postcss-loader autoprefixer

向项目中添加tailwindcss：

src/renderer/index.js：
```
...
import './assets/styles.css';
...
```

src/assets/styles.css：

@tailwind base;
@tailwind components;
@tailwind utilities;

将postcss-loader包含到Webpack中：

添加postcss.config.js：

const autoprefixer = require('autoprefixer');
const tailwindcss = require('tailwindcss');

module.exports = {
  plugins: [
    tailwindcss,
    autoprefixer,
  ],
};

修改webpack.config.js：

...
module.exports = {
    module: {
        rules: [
            ...,
            {
                test: /\.css$/,
                use: [
                'vue-style-loader',
                { loader: 'css-loader', options: { importLoaders: 1 } },
                'postcss-loader'
                ]
            }
    ...

通过修改App.vue测试tailwindcss：
```
<template>
    <div class="bg-blue-100">Welcome</div>
</template>
```
→失败：“欢迎”文本的背景应为蓝色，但不是，文本仍为衬线。

Answer 1

过时的软件包/插件/仓库主要是开发人员的难题。可能还有其他选择会定期维护，但是如果我们找不到满足我们需求的东西该怎么办……__（ツ）_ /¯

无论如何，我建议改用 Vue-CLI ，并沿途使用vue插件，例如电子和顺风。

Vue-CLI通过添加/配置vue.config.js使用webpack under the hood。您可以继续安装：yarn global add @vue/cli。
使用vue-cli创建项目：vue create myproject。然后

cd myproject
yarn install

添加Vue CLI Plugin Electron Builder插件，该插件会将您的VueJS应用构建为桌面应用。使用vue add electron-builder安装。选择电子版本。并使用yarn electron:serve进行测试。
此后，您可以通过vue add tailwind添加tailwindcss plugin。在安装过程中，系统会提示您顺风配置生成，选择full，以便可以在以后进行所有测试，然后稍后进行自定义。

按照其所有安装过程进行操作，并保留所有默认设置，请尝试测试tailwindcss是否正常工作：

/* in App.vue */

<template>
  <div id="app" class="flex p-5">Test</div>
</template>

<script>
export default {
  name: 'app',
}
</script>

<style>
body, html {
  @apply bg-white;
}
</style>

最后带有：yarn electron:serve

使用Vuejs，Webpack和tailwindcss创建Electron应用程序

1 个答案: