使用 vue-lic3.0 快速构建项目
-
安装前需要注意的地方:
- Vue CLI 的包名称由
vue-cli
改成了@vue/cli
。 如果你已经全局安装了旧版本的vue-cli
(1.x 或 2.x),你需要先通过npm uninstall vue-cli -g
或yarn global remove vue-cli
卸载它。 - Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。
-
可以使用下列任一命令安装vue-cli3:
- 使用yarn的话需要先去下载安装:
https://yarn.bootcss.com/docs/install/#windows-stable
npm install -g @vue/cli
# OR
yarn global add @vue/cli
- 安装完成后使用 vue -V 查看安装版本确认是否安装成功
- 注意 V 要大写的
- 接下来开始使用vue-cli3创建项目,先进入创建好的目录,然后输入命令 vue create hello , hello为自定义项目目录名称
这里提示选取一个 preset。第一个默认的包含了基本的 Babel + ESLint 设置的 preset,第二个是手动选择,手动选择会提 供更多的选项
- 我们这里选择第二个
上下键移动,空格键选中,a全选,i反选 ,这里可以选择你需要的
- Babel:提供 babel 支持。
- TypeScript:支持 TypeScript 格式。
- Progressive Web App (PWA) Support:PWA 支持(渐进式Web应用程序)。
- Router:支持 Vue Router ,它是Vue.js 官方的路由管理器。
- Vuex:支持 Vuex ,它是一个专为 Vue.js 应用程序开发的状态管理模式。
- CSS Pre-processors:支持 CSS 预处理器,可以选择自己想要的处理器。
- Linter / Formatter:
Linter检查代码错误的小工具。
Formatter用来格式化文本,主要用在文本输出方面,比如,数字、日期、金额等。
- Unit Testing支持单元测试。
- E2E Testing支持 e2e 测试。
e2e 测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之,它从一个用户的角度出发,认为整个系统都是一个黑箱,只有UI会暴露给用户。
- 路由是否使用历史模式
这里我选择了Y
- 选择css预处理器,自己按照需要选择就好
-
选择linter / formatter配置(我这里选择:ESLint + Prettier)
- 选择什么时候检查代码 (我这里选择保存检查)
- 你更喜欢将Babel、PostCSS、ESLint等配置放在哪里? (单独放,已经放在 package.json中,我这里选择第一个)
- 把这个作为将来项目的预置?(y / N) (选择y后下次就不用重新配置了)
- 好了,配置完成了接下来等待就好了
- 安装完成了,提示你进入到项目文件夹,然后输入 npm run serve 开始项目
- 成功运行显示下面信息