使用 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 中链接样式表和要求它们有啥区别?