vue-cli3 项目搭建

1. 介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

2. 安装

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
命令

npm install -g @vue/cli
# OR
yarn global add @vue/cli

查看是否安装成功

vue --version 
#OR
vue -V

3. 创建项目

• 3.1 使用图形化界面

  • 命令 vue ui
    

    image.png
    

    image.png
    按照页面流程提示创建项目即可，在此不进行过多介绍。

• 3.2 命令行创建

  • 命令 vue create vue-demo
    

    image.png

default (babel, eslint) 默认模式。
Manually select features 手动模式。
ps：使用键盘得上下键来切换目标选项。

• 默认模式
  一路回车即可

• 手动模式：
  

  image.png
  

  image.png

这个自行选择配置，按上下键切换目标选项，按空格键勾选和取消，按a全选，按i反选，选好后回车确定。

• 选项含义：

1. Babel：转译成浏览器可识别的语言，可以让你的项目支持更新的语法，如es6\es7等
2. TypeScript：新增的选项卡
3. PWA：模拟原生app，渐进式网络应用程序
4. Router：路由
5. vuex：管理模式
6. CSS Pre-processors：css预处理语言
7. Linter / Formatter：代码规范
8. Unit Testing：组件单元测试

9. E2E Testing：端对端测试，模拟用户真实场景
   

   我的选择
   

   image.png

• 询问router模式，vue-router 默认 hash 模式，所以我选择默认的，选择了 n ，而不是 history 模式：
  

  image.png

• 询问安装哪一种 CSS 预处理语言，我是选择了用的 less。
  

  image.png

• 询问选择哪个自动化代码格式化检测，配合 vscode 编辑器的，Prettier - Code formatter插件，我选的随后一个。
  

  image.png

• 询问什么时候进行代码检测，第一个是保存就检测，第二个是 fix 和 commit 的时候检查。我选择的是保存就检测。
  

  image.png

• 询问单元测试解决方案，Mocha是流行的JavaScript测试框架之一，通过它添加和运行测试，从而保证代码质量，chai 是断言库，我选择第一个 Mocha + Chai。
  

  image.png

• 询问像babel, postcss, eslint 这些配置文件放哪？第一个是：放独立文件放置，第二个是：放package.json里，我选择放单独配置文件。
  

  image.png

• 询问是否将以上这些将此保存为未来项目的预配置吗 ？选择是的时候，下次创建项目时，可以选择刚刚配置好的配置，不用再每个都配置一遍。最后一个是选择的名字，随意选择，点击确定就开始下载模板了。
  

  image.png

4. 项目代码结构

image.png

未完待续...