Vue脚手架---vue-cli的安装
安装vue-cli
1. 安装node.js
-
下载Node.js
Node.js地址 -
安装Node.js
- 安装地址推荐默认C盘
- 其他的都是默认
-
测试是否安装成功Node.js
- 键盘
win+R
键 打开运行,输入cmd
- 输入:
node -v
查看版本,如果安装成功则可以查看
- 键盘
-
测试npm是否安装成功
npm -v
- 查看版本,如果成功,就有版本号
2. 全局安装nrm(用来切换下载源)
npm install nrm -g
安装成功之后nrm ls
可以查看nrm里面的内容nrm use taobao
更改到淘宝的镜像下载源
3. 全局安装脚手架(vue-cli)
npm install @vue/cli -g
vue -V
可以查看vue-cli的版本
4. 如果有yarn安装时可能会出现一些更改
npm root view -g
查看安装根目录- 在这里可以删除yarn等
5. 创建项目
- 选择再什么地方创建项目,在对应目录的地址栏全选,键入
cmd
,直接打开对应文件地址的窗口 vue create 项目名字
创建项目- 配置选项
- 1、选择预设
Please pick a preset: (Use arrow keys)
使用键盘上下键选择 回车确定default (babel, eslint)
默认只安装babel和eslintManually select features
手动选择 //重要
- 2、手动选择插件(1,4,5,6)
Check the features needed for your project
: 空格选择,a全选,i反选 回车确定Babel
将高级版本ES转换为浏览器识别的JS语法,ES6->ES5TypeScript
JS的超集,提供了JS面向对象支持Progressive Web App (PWA) Support
PWA使应用向原生APPRouter
路由、请求所对应的地址Vuex
数据状态管理器、用于多页面传参CSS Pre-processors
CSS预处理,将高级CSS语法转换为浏览器识别CSS语法Linter / Formatter
代码检查工具,语法检测,严格,项目开发推荐Unit Testing
单元测试E2E Testing
端端测试
- 3、选择路由模式
Use history mode for router?
使用history路由模式吗?History
模式yes
Hash
模式no
路由的后方有#只刷新部分内容
- 4、选择CSS预处理
- Pick a CSS pre-processor
Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
// 选择Stylus
- 5、选择插件的配置存放位置
- Where do you prefer placing config for Babel, ESLint, etc
In dedicated config files
独立的配置文件In package.json
直接放在package.json中
- 6、是否保存预设
Save this as a preset for future projects
N
不保存
- 1、选择预设
- 等待安装完成
进入创建好的项目文件夹
cd/ 项目名
运行项目—不要关闭命令窗口
npm run serve
浏览器运行—命令窗口会给出运行地址
- 如:
http://localhost:8080