electron-vue的搭建,以防踩坑

研究了一下午终于搭建好了!

首先,我的node.js版本是v10.15.3

其次我的npm版本是v6.4.1

再者我的vue-cli版本是v2.9.6

一、安装

(1)安装node,cnpm,vue-cli

windows下安装node.js和vue-cli的过程我就不细说了,百度搜索Node.js就可以下载msi直接安装node.jsvue-cli可以在安装node.js以后npm i -g vue-cli安装。淘宝镜像最好也安装一下npm i -g cnpm

检测安装成功的三句代码

node -v 
cnpm -v
vue --version
//以上三句均出现版本号则安装成功

二、快速创建electron-vue

(1)官方下载镜像版(不推荐,因为需要等待镜像下载的时间可能过长)

vue init simulatedgreg/electron-vue mypro
//此时如果等待过长请看第二种方法(2)

(2)下载electron-vue搭建模板

在一个好找的目录下(目录名称全为英文),运行git bash下载模板镜像。

git clone https://gitee.com/mirrors/electron-vue.git

然后使用vue-cli的命令创建electron-vue

vue init C:/temp/electron/ev-templete/electron-vue mypro

(1)、(2)方法均会进入如下操作

安装electron-vue

创建好以后逐条执行以下命令

cd mypro
//进入刚刚创建的目录
cnmp i
//初始化node_modules所有依赖
npm run dev
//运行文件

即可看到如下画面证明你成功了!

electron-vue 搭建成功

踩坑总结

1.node版本最好不要太高,否则会出现electron-vue和webpack不兼容的情况

2.如果卡在快速创建electron-vue,则使用方法2来快速创建项目,不用官方的镜像下载

3.在初始化node_modules的时候最好用cnpm i,用npm i,可能会卡和依赖不完整!

发表评论

电子邮件地址不会被公开。 必填项已用*标注