electron-vue创建项目与运行项目

一、electron-vue 条件

1. 需要使用 node@^7 或更高版（除老项目外，对大多数人来说不是问题）
2. 适用于 vue-cli@2.x 创建项目（不兼容 vue-cli@3.x 或以上版本）
3. 推荐用yarn安装依赖，避免后期运行打包错误

二、项目搭建

# 安装 vue-cli@2.x yarn global add vue-cli # 安装：脚手架样板代码 vue init simulatedgreg/electron-vue electron-project # 设置应用名称 - my-project Application Name (my-project) # APP 的 ID 建议为 com.公司名.应用名 - com.example.yourapp Application Id (com.example.yourapp) # APP 版本 - 0.0.1  Application Version (0.0.1) # 项目描述 - An electron-vue project Project description (An electron-vue project) # 是否使用 Sass 或 Scss - Yes Use Sass / Scss? (Y/n) # 选择需要使用的 Vue 插件/依赖 - axios, vue-electron, vue-router, vuex, vuex-electron ? Select which Vue plugins to install (Press <space> to select, <a> to toggle al
l, <i> to invert selection) ❯◉ axios
 ◉ vue-electron
 ◉ vue-router
 ◉ vuex
 ◉ vuex-electron # 使用 ESLint 语法检测 - Yes ? Use linting with ESLint? (Y/n) # 选择 ESLint 语法检测规则 - Standard ? Which ESLint config would you like to use? (Use arrow keys) ❯ Standard (https://github.com/feross/standard) Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) # 是否使用 Karma + Mocha 单元测试 - No ? Set up unit testing with Karma + Mocha? (Y/n) # 是否使用 Spectron + Mocha 端到端测试 - No ? Set up end-to-end testing with Spectron + Mocha? (Y/n) # 选择打包工具（builder 更轻量） - electron-builder ? What build tool would you like to use? (Use arrow keys) ❯ electron-builder (https://github.com/electron-userland/electron-builder) electron-packager (https://github.com/electron-userland/electron-packager) # 项目作者 - 自定义 ? author (Ryan Zhong <[e-mail]>) 

三、项目运行

# 进入项目 cd electron-project # 通过 yarn 安装依赖 yarn install 

# 运行项目 yarn run dev #若报错在文件夹.electron-vuex下找到webpack.renderer.config.js和webpack.web.config.jsx修改plugins修改后 plugins: [ new VueLoaderPlugin(), new MiniCssExtractPlugin({filename: 'styles.css'}), new HtmlWebpackPlugin({ filename: 'index.html', template: path.resolve(__dirname, '../src/index.ejs'), templateParameters(compilation, assets, options) { return { compilation: compilation, webpack: compilation.getStats().toJson(), webpackConfig: compilation.options, htmlWebpackPlugin: { files: assets, options: options }, process, }; }, minify: { collapseWhitespace: true, removeAttributeQuotes: true, removeComments: true }, nodeModules: false }), new webpack.DefinePlugin({ 'process.env.IS_WEB': 'true' }), new webpack.HotModuleReplacementPlugin(), new webpack.NoEmitOnErrorsPlugin() ], 

# 项目编译 yarn run build 

本文地址：https://blog.csdn.net/weixin_42256366/article/details/107782249