使用@vue/cli4创建项目
全局安装vue cli 脚手架
npm install -g @vue/cli
vue -V
创建vue项目
vue create <projectName>
选择自定义配置
> Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>
(*) Babel
(*) TypeScript
(*) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
自定义配置说明
| 序号 | 选项 | 描述 |
|---|---|---|
| 1 | Choose Vue version | 选择Vue版本 |
| 2 | Babel | vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5 |
| 3 | TypeScript | TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源 |
| 4 | Progressive Web App (PWA) Support | 渐进式Web应用程序（PWA）支持 |
| 5 | Router | 路由 |
| 6 | Vuex | Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化 |
| 7 | CSS Pre-processors | CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。 |
| 8 | Linter / Formatter | 格式化程序 |
| 9 | Unit Testing | 单元测试 |
| 10 | E2E Testing | 端到端测试（end-to-end） |
选择自定义配置的选项
配置选项说明
| 序号 | 配置 | 选项 | 描述 |
|---|---|---|---|
| 1 | Choose a version of Vue.js that you want to start the project with 3.x | 选择vue版本 | |
| 2 | Use class-style component syntax? Yes | 是否使用class风格的组件语？ | |
| 3 | Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes | 要不要使用 babel 工具自动为转换后的 TypeScript 代码注入 polyfiills | |
| 4 | Use history mode for router? (Requires proper server setup for index fallback in production) Yes | 是不是用history模式来创建路由 | |
| 5 | Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less | 询问项目的CSS预处理器 | |
| 6 | Pick a linter / formatter config: Prettier | 项目的格式校验方式 | |
| 7 | Pick additional lint features: Lint on save | 1、保存时 2、提交时 | 项目的什么时候校验格式 |
| 8 | Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files | 1、独立文件 2、package | 项目的配置文件放在哪儿？ |
| 9 | Save this as a preset for future projects? No | 是否作为一个模板配置 |
