如何解决使用Vuejs,Webpack和tailwindcss创建Electron应用程序
我尝试让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>
→失败:“欢迎”文本的背景应为蓝色,但不是,文本仍为衬线。
解决方法
过时的软件包/插件/仓库主要是开发人员的难题。可能还有其他选择会定期维护,但是如果我们找不到满足我们需求的东西该怎么办……__(ツ)_ /¯
无论如何,我建议改用 Vue-CLI ,并沿途使用vue插件,例如电子和顺风。
-
Vue-CLI通过添加/配置
vue.config.js
使用webpack under the hood。您可以继续安装: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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。