Vue-Cli3.0创建项目,以及与Vue-Cli2.0的区别

1. 安装

安装Vue-Cli3.0命令发生一些变化
npm安装Vue-Cli3.0

$ cnpm install -g @vue/cli

而之前Vue-Cli2.0安装命令是这样

$ cnpm install -g vue-cli

安装完成后查看版本信息

$ vue -V

2.项目创建

Vue-Cli2.0创建项目命令

$ vue init webpack “项目名称”

创建步骤

Vue-Cli3.0创建项目命令
可参考:参考文章

$ vue create “项目名称”

**default: 默认项目配置
**Manually select features: 手动选择功能

**Babel：指转译成浏览器可识别的语言，可以让你的项目支持更新的语法，如es6\es7等
**TypeScript：新增的选项卡
**Progressive Web App (PWA) Support：指模拟原生app
**Router：路由管理
**Vuex：vuex管理模式
**CSS Pre-processors：css预处理语言
**Linter / Formatter：代码规范
**Unit Testing：组件单元测试
**E2E Testing：端对端测试，模拟用户真实场景

提示是否使用历史路由: 这种模式充分利用history pushState API 来完成URL跳转而无须重新加载页面;然后是选择css预处理语言

选择ESLint代码规范
ESLint with error prevention only: 只进行报错提醒;
ESLint + Airbnb conf: 不严谨模式;
ESLint + Standard config: 正常模式;
ESLint + Prettier: 严格模式

代码检查方式,何时对代码进行检测
Lint on save: 报错时检测
Lint and fix on commit(requires Git): 整理并固定提交时

单元测试解决方案:

选择Babel PostCss ESlint等配置文件存放位置
In dedicated config files: 保存在配置文件中
In package.json: 保存在package.json中

是否在以后的项目中使用以上配置

完成配置后创建项目并开始下载依赖,我们只要耐心等待进度条完成,这样我们就把Vue 项目创建好并完成了初始化

3.项目运行

vue-cli2.0的运行命令

npm run dev

vue-cli3.0的运行命令

$ npm run serve