11. 环境安装及项目构建:
vue项目快速构建需要脚手架(vue-cli)的支持,类似web项目可以通过maven快速构建;vue项目构建需要Node.js环境的支持
11.1. node.js下载安装:
从Node.js官网下载对应电脑位数的Windows 安装包 (.msi),然后打开一直Next即可完成安装
【安装成功检查】:
在cmd中分别输入
node -v
、npm -v
显示对应的版本号
11.2. npm修改全局下载和缓存路径(可选):
正常安装Node.js后,当npm依赖包下载时,会下载到C盘(C:\Users\Mr.zhong\AppData\Roaming\npm),这会占据C盘空间
【修改】:cmd执行以下命令
npm config set prefix “D:\nodeVueFile\npm_global”
npm config set cache “D:\nodeVueFile\npm_cache”
npm config set registry=http://registry.npm.taobao.org
// 设置registry淘宝的npm镜像库下载会快点
// 注意修改的路径尽量不能有空格,不然webstorm新建项目会报错
本处修改到自定义的npm_global、npm_cache目录,修改后可在C:\Users\Mr.zhong.npmrc文件看到设置的变化
11.3. vue-cli相关插件下载:
11.3.1. vue.js安装:
cmd执行:npm install vue -g
11.3.2. vue-cli安装:
cmd执行:npm install vue-cli -g
11.3.3. 设置vue环境变量:
安装vue-cli后在globa目录(此处为上述修改后的目录)会有vue.cmd,将该目录添加到环境变量path即可
设置好环境变量,在cmd输入vue -V 显示版本号即设置正确,注意后面的是大写的V
11.4. 项目构建:
cmd跳转到欲建项目的目录(在该目录地址栏输入cmd即可),然后执行
vue init webpack 项目名称
vue-route按需设置,回车即可,后面的几个选项一般都选no
11.5. 项目启动:
构建完,上图黄色字体提示很清楚如何启动,
cmd进入vue项目目录
执行vue install
命令
执行npm run dev
命令
上述显示则启动成功,访问http://localhost:8080即可浏览demo
11.6. webstorm构建vue项目:
webstorm毕竟针对前端,前端开发还是挺方便的,不像idea那么重量级,也可以与idea进行前后端联调
软件下载安装激活就不说了,你懂的,webstorm构建vue项目可以选择node.js和vue-cli的版本,
默认会采用以下的vue-cli,可见这是个高版本的vue-cli,如果需要使用vue-cli 2.X,大家百度吧,或者用11.4的命令来构建
如果构建报错:Could not install from "Files… …,检查一下全局路径是否有空格,不能有空格的
使用webstorm使用3.0+的vue-cli构建项目,项目结构有如下变化,3.0+的配置文件使用vue.config.js;webstorm构建不会添加。