使用 Vuejs、Webpack 和 tailwindcss 创建一个 Electron 应用程序

Question

我设法弄一本电子应用与运行的WebPack，Vuejs和tailwindcss，开始与电子的WebPack模板包并添加Vuejs和tailwindcss之后，但tailwindcss不起作用。

SO 上有一个等效的线程，但是那里提到的解决方案使用了electron-vue，它有 200 多个未解决的问题，并且似乎不再维护。

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

1. 初始化 Electron webback 样板（根据这里）：

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

2. 安装Vuejs：

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

3. 为 Vuejs 设置 webpack：

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

4. 通过修改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>
   

   ? 到目前为止工作。

5. 安装tailwindcss：

   yarn add —-dev tailwindcss postcss-loader autoprefixer
   

6. 将 tailwindcss 添加到项目中：

   • src/renderer/index.js：

     ...
     import './assets/styles.css';
     ...
     

   • src/assets/styles.css：

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

7. 将 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'
                     ]
                 }
         ...
     

8. 通过修改测试tailwindcss App.vue：

   <template>
       <div class="bg-blue-100">Welcome</div>
   </template>
   

   ? 失败：“欢迎”文本的背景应该是蓝色的，但不是，文本仍然是衬线。

Answer 1

过时的包/插件/存储库主要是开发人员的困境。可能还有其他选择正在定期维护，但是如果我们找不到满足我们需求的东西怎么办...¯_(?)_/¯

无论如何，我建议改用Vue-CLI，并在此过程中使用 vue 插件，例如 Electron 和 Tailwind。

1. Vue公司-CLI用途的WebPack引擎盖下，通过添加/配置您的vue.config.js。您可以继续安装它：yarn global add @vue/cli.

2. 使用 vue-cli 创建一个项目：vue create myproject。然后

cd myproject
yarn install

3. 添加Vue CLI 插件 Electron Builder插件，这会将您的 VueJS 应用程序构建为桌面应用程序。安装vue add electron-builder. 选择电子版。并使用yarn electron:serve.

4. 此后，您可以通过添加tailwindcss 插件vue add tailwind。在安装过程中，系统会提示您生成顺风配置，选择full以便您可以在之后测试所有内容，然后进行自定义。

按照他们的所有安装过程，并保留所有默认值，尝试测试 tailwindcss 是否正常工作：

cd myproject
yarn install

最后与： yarn electron:serve