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

Posted 2023-03-06

【中文标题】使用 Vuejs、Webpack 和 tailwindcss 创建一个 Electron 应用程序

【英文标题】：Creating an Electron app with Vuejs, Webpack and tailwindcss

【发布时间】：2020-12-07 16:32:21

【问题描述】：

我尝试让一个使用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>

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

【参考方案1】：

过时的包/插件/repos 大多是开发者的困境。可能还有其他选择定期维护，但是如果我们找不到满足我们需求的东西怎么办……¯_(ツ)_/¯

无论如何，我建议使用 Vue-CLI 来代替，并在此过程中使用 vue 插件，例如电子和尾风。

Vue-CLI 使用 webpack under the hood，通过添加/配置你的vue.config.js。你可以继续安装它：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

【讨论】：

哇，立即生效。使用 vue-cli 似乎很简单，太棒了。