【Vue】教程:一、windows下vue cli3安装及搭建项
一、初次使用
1.安装node版本
官方建议，node.js的版本，需要是8.9或者以上（建议是8.11.0+）
1.1.安装node.js
nodejs版本
双击点击如下安装程序包,进行安装,安装过程中一直点击下一步就好
建议不要安装在在系统盘,本文安装位置为
D:\devsoft\nodejs12.2.0
nodejs安装程序包
nodejs安装好之后，通过npm下载的全局模块默认会安装到C:\Users\用户名\AppData\Roaming\npm中,放在系统盘会造成系统卡顿且不便于集中管理,通过下面的步骤修改下默认安装路径
在nodejs安装路径下，新建node_global和node_cache两个文件夹
新建node_global和node_cache文件夹
1.2.设置nodejs prefix全局路径
win+r→cmd→enter打开命令操作行
输入如下指令:
npm config set cache "D:\devsoft\nodejs12.2.0\node_cache"
1.3.设置nodejs cache缓存路径
win+r→cmd→enter打开命令操作行
输入如下指令:
npm config set prefix "D:\devsoft\nodejs12.2.0\node_global"
2.设置系统环境变量
设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径
2.1.打开设置环境变量界面
鼠标右键"此电脑"→弹出“属性”菜单→选择“高级系统设置”→弹出“系统属性”对话框
2.2.新增NODE_PATH用户变量
新增NODE_PATH用户变量
2.3修改系统变量PATH
编辑系统变量PATH
新建一个环境变量,输入node_global的路径
本文为D:\devsoft\nodejs12.2.0\node_global
新建一个环境变量
最后,点击确定即可
保存已设置环境变量
保存系统属性
3.安装vue cli3
win+r→cmd→enter打开命令操作行
设置为淘宝镜像指令(此步可省略)
npm config set registry https://registry.npm.taobao.org
输入如下安装指令,等待安装(尽量选择npm)
npm install -g @vue/cli
或者
yarn global add @vue/cli
安装完成,如下:
安装完成
vue一些指定
二、非初次使用，更新vue版本
1.卸载旧版本
vue cli 升级到3后，package的名字从 vue-cli 改为了 @vue/cli
官方的建议把旧版本的先卸载再安装新版本。
win+r→cmd→enter打开命令操作行
输入如下卸载指令：(尽量选择npm)
npm uninstall vue-cli -g
或
yarn global remove vue-cli
2.安装vue cli3
win+r→cmd→enter打开命令操作行
输入如下安装指令：(尽量选择npm)
npm install -g @vue/cli
或
yarn global add @vue/cli
三、使用vue cli3创建项目
前提：本文使用vscode工具新建项目，vscode安装及使用教程
1. 打开vscode,打开存放项目的文件夹
vscode默认页面
2.在下面新建终端
新建终端
3.执行创建项目命令
,这里的
projectname为项目名称,不能有大写字母
vue create projectname
连接淘宝镜像
4.选择预置
Manuelly select features手动配置
5.选择项目需要用到的功能
按键盘↑ ↓键进行选择,按空格键选择其中某一个
选择项目功能
本文选择如下几项功能:
- Babel
- Router
- Vuex
- Css Pre-processors
- Lint/Formatte
5.是否使用history路由
是否使用history路由
本文暂未使用,如需使用可参考Routing with history.pushState
6.选择css处理器
选择css处理器
7.代码风格和eslint
根据个人习惯选择即可
代码风格和eslint
8.选择在保存时还是在提交时修改
保存时还是在提交时修改
9.选择lint的配置文件如何存放
为了便于管理,这里选择分别存到具体的config文件
lint的配置文件存放位置
10.是否保存本次创建项目的配置项
用于下次快速创建项目
是否保存本次创建项目的配置项
输入预置名称
11.等待创建项目
创建完成
12.创建完成的项目目录结构
项目目录结构
13.vue cli配置文件
文件路径是：C:\Users\【用户名】\.vuerc,文件内容大致如下
{
"packageManager": "npm",
"presets": {
"vue_create_project": {
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-eslint": {
"config": "standard",
"lintOn": [
"save"
]
}
},
"router": true,
"routerHistoryMode": false,
"vuex": true,
"cssPreprocessor": "sass"
}
},
-
packageManager用于指定安装包和运行时，使用的是npm还是yarn -
presets上述安装步骤中，第10步询问是否保存创建配置，用于下次快速创建项目
参考文档网址:
Vue CLI 3搭建项目详解
windows环境搭建Vue开发环境
Vue CLI 3官网
Vue CLI 3指引文档(中)
Vue CLI 3指引文档（英）
觉得好的话不要吝啬你们的👍哦~
