刷排名的软件是什么,想找搜索引擎优化,百度一下免费下载,wordpress直接注册教程源码#xff1a;nofacer/vue3-electrongithub.com之前写过一篇文章Vue结合Electron构建跨平台应用#xff08;TDD#xff09;。当时的方法后来发现了一个问题#xff0c;就是打包后的应用拿到其他机子上没法用#xff0c;原因在于index.html的地址是个绝对路径… 教程源码nofacer/vue3-electrongithub.com之前写过一篇文章Vue结合Electron构建跨平台应用TDD。当时的方法后来发现了一个问题就是打包后的应用拿到其他机子上没法用原因在于index.html的地址是个绝对路径在打包的时候就被固定下来了。 在查阅了许多资料后发现之前将二者结合的方法不是很有效(开发和生产环境不一致等)正好Vue3也进入beta阶段了因此想借着这个机会重新梳理一下这个话题。打算不借助各种快捷生成项目的cli从零将二者有机结合起来这样可以加深对各种构建工具的了解。涉及内容 Vue Electron Webpack Scss安装Webpack 新建./index.html 这里通过script src的方式导入了lodash为了后面测试webpack能否正常工作。 新建./index.js 用浏览器打开index.html不出意外应该能看到Hello webpack页面。 运行npm install -D lodash在本地安装lodash。修改./index.js通过包引入lodash。 新建./webpack.config.js来配置webpack的行为。 运行npx webpack正常情况应该在./dist/bundle.js中有我们所有的js内容。 将./index.html的内容修改为 在浏览器中打开看到的应该是和之前一样的界面。说明webpack正常工作了。安装Vue3vue-loader is a loader for webpack that allows you to author Vue components in a format called Single-File Components (SFCs)修改./index.js新建一个vue应用。 新建./App.vue 再新建个src/components/HelloWorld.vue 最后再在./index.html的body中加一个div idapp/div ./node_modules/.bin/webpack --config webpack.config.js后在浏览器中打开index.html应该可以看到“Welcome to Your Vue.js App”几个大字。引入样式Scss到目前为止我们的应用还没有设定什么样式接下来我们看看样式怎么被一起打包。 https://vue-loader.vuejs.org/guide/pre-processors.html在src/components/HelloWorld.vue的末尾加上一点样式 这时候build是会报错的You may need an additional loader to handle the result of these loaders.
| $nav-color: #F90;
| h1{
| color: $nav-color;我们需要安装一点东西npm install -D style-loader sass-loader node-sass css-loader。之后修改./webpack.config.js build后打开网页文字应该变成了橙色。这种方式是通过single-file component的形式添加的样式接下来我们再通过import external scss文件的形式添加样式。新建./src/style/common.scss 在./index.js里加入scss文件 到目前为止最终的网页看起来应该像这样 引入图片资源图片也可以被当成模块利用webpack打包后期管理资源路径比较方便。修改HelloWorld.vue的template 在webpack.config的rules中加上 Babel因为我们用的都是最新的Electron浏览器内核都比较新新的JS特性也都支持就不安装Babel了。安装Electron重头戏终于来了。npm i -D electronlatest安装最新的electron。新建./main.js作为electron的入口文件。 由于增加了main文件作为Electron的入口再加上index文件作为Vue的入口现在一共两个入口需要修改entry配置。同时我们需要在配置中指定打包应用类型将target设置为electron-renderer。修改后如下 修改package.json中的main: ./dist/main.js。scripts中加一个start: electron .。npm run build后npm run start应该可以看到electron app成功启动。Publish配置如果要打包应用还有些东西要调整。安装npm i -D electron-builder。 在package.json中加入 Then you can run yarn dist (to package in a distributable format (e.g. dmg, windows installer, deb package)) or yarn pack (only generates the package directory without really packaging it. This is useful for testing purposes).为了确保所有依赖都匹配electron的版本再在package.json中加入postinstall: electron-builder install-app-deps 增加build的配置将dist文件夹和index.html包含进去打包输出路径为package。最终的package.json应该长这样 运行npm run dist看看能不能打包成功。 微调下样式最终的效果应该是这样 后话目前的配置只适合作为Demo更详细的配置请移步Github。顺便记得点个 哦nofacer/vue3-electrongithub.com
