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

Posted

技术标签:

【中文标题】使用 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 似乎很简单,太棒了。

以上是关于使用 Vuejs、Webpack 和 tailwindcss 创建一个 Electron 应用程序的主要内容,如果未能解决你的问题,请参考以下文章

VueJS 和 Webpack:构建项目无法访问 ENV var

在没有 webpack 的情况下使用 VueJs 和 Typescript

我无法通过 symfony/webpack-encore 使用 Jest 和 Vuejs 运行测试

在 Webpack + VueJs 中链接样式表和要求它们有啥区别?

如何在 Vuejs+Webpack 中包含外部 sass 目录?

webpack & vuejs 将组件包含到组件中