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

Question

我尝试获取一个 Electron 应用运行 webpack, Vuejs and tailwindcss, starting with the electron-webpack 模板包，然后添加 Vuejs 和 tailwindcss，但 tailwindcss 不起作用。

有一个 on SO, but the solution mentioned there uses electron-vue，它有 200 多个未解决的问题，似乎不再维护了。

有人知道这里出了什么问题吗？我的处理如下：

初始化Electron webpack样板（根据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

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

无论如何，我建议改用Vue-CLI，并沿途使用vue插件，例如electron和tailwind。

Vue-CLI uses webpack under the hood，由 adding/configuring 你的 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。在安装过程中，系统会提示您生成 tailwind 配置，选择 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

Answer 2

Vimesh 风格是 full-featured 微型 javascript 库 (9KB) 替代 Tailwind CSS 2.0。只需将它添加到您的页面，剩下的就交给它了。 https://github.com/vimeshjs/vimesh-style

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

Creating an Electron app with Vuejs, Webpack and tailwindcss

javascript

webpack

vue.js

electron

tailwind-css