【VUE】vue-cli3.0 初体验

本地安装vue/cli

可以使用这个命令来检查当前vue版本

vue -V

使用 npm 全局安装 vue-cli

npm install -g @vue/cli

创建项目

命令行

vue create my-vue-cli3.0
// my-vue-cli3.0 是项目名字  随意

选择模板

• 此处有两个选择：
  • default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。
  • Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这一项。

可以使用上下方向键来切换选项。如果只需要 babel 和 eslint 支持，那么选择第一项，就完事了，静静等待 vue 初始化项目。

本次我们使用第二项手动配置

• 根据你的项目需要来选择配置,空格键是选中与取消，a键是全选
  • Babel JavaScript 编译器
  • TypeScript 支持使用 TypeScript 书写源码
  • Progressive Web App (PWA) Support PWA 支持
  • Router 支持 vue-router
  • Vuex 支持 vuex
  • CSS Pre-processors 支持 CSS 预处理器
  • Linter / Formatter 支持代码风格检查和格式化
  • Unit Testing 支持单元测试
  • E2E Testing 支持 E2E 测试

按下 enter 键确认选择，进入下一步

这里是让选择在开发 Vue 组件时，要不要使用 class 风格的写法。为了更方便地使用 TypeScript ，这里选择 Y ，进入下一步
是否将Babel与TypeScript一起使用(现代模式需要，自动检测填充，更改JSX)，直接选择 Y ，进入下一步

路由使用history模式?(在生产环境中需要适当的服务器设置以备索引)
个人建议选N，这样打包出来丢到服务器上可以直接使用了
本次选择 Y ，进入下一步

• Css预处理器选项
  • Sass/Scss（with dart-sass） 参考Sass
  • Sass/Scss（with node-sass） 参考Sass
  • Less
  • Stylus

本次选择 Less ，进入下一步

• 选择Eslint代码验证规则
  • ESLint with error prevention only ESLint只提供错误预防
  • ESLint + Airbnb config ESLint + Airbnb配置
  • ESLint + Standard config ESLint +标准配置
  • ESLint + Prettier
  • TSLint（deprecated） TSLint(弃用)

本次选择 ESLint with error prevention only ，进入下一步

• 选择什么时候进行代码规则检测
  • Lint on save 保存就检测
  • Lint and fix on commit fix和commit时候检查

本次选择 Lint on save ，进入下一步

• 选择什么时候进行代码规则检测
  • In dedicated config files 独立文件放置
  • In package.json 放package.json里

本次选择 In dedicated config files ，进入下一步

• 是否保存配置
  • Save this as a preset for future projects? (Y/n) 是否记录一下以便下次继续使用这套配置
    • 选保存之后，会让你写一个配置的名字
    • Save preset as: name（配置的名字） 然后你下次进入配置可以直接使用你这次的配置了
  • In package.json 放package.json里

本次选择 N ，进入下一步

vue-cli 就根据前面选择的内容，开始初始化项目

安装补充

• 单元测试
  • Unit Testing
    • Mocha + Chai 更多细节可查阅
    • Jest 更多细节可查阅

根据个人或者项目需求进行选择

启动项目

初始完之后，进入到项目根目录

cd my-vue-cli3.0

启动项目

npm run serve 
// 不是之前的 npm run dev

打包上线

npm run build

执行完之后，可以看到在项目根目录下多出了一个 dist 目录，该目录下就是打包好的所有静态资源，直接部署到静态资源服务器就好了。

实际上，在部署的时候要注意，假设静态服务器的域名是 https://www.baidu.com ，那么对应到访问 <项目根目录>/dist/index.html 的 URL 一定要是 https://www.baidu.com/index.html ，其他的静态资源以此类推。

单元测试

npm run test