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创建项目命令
可参考:https://jingyan.baidu.com/article/49711c61b9fccdfa441b7c2e.html
$ vue create "项目名称"
**default: 默认项目配置
**Manually select features: 手动选择功能
**Babel:指转译成浏览器可识别的语言,可以让你的项目支持更新的语法,如es6es7等
**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