如果不了解vue,请先阅读vue中文官方文档。
手脚架创建vue项目
// 安装手脚架
npm install -g @vue/cli
# OR
yarn global add @vue/cli
// 查看手脚架版本
vue --version
// 创建项目
vue create 项目名称
终端直接报错，提示如下：
bogon:~ jing$ vue create myPro_vue
Invalid project name: "myPro_vue"
Warning: name can no longer contain capital letters
报错信息指出项目名称不能出现大写字母，注意项目名命规则。项目名称注意要使用小写字母，'_'或是'-'分割
// 创建项目
vue create mypro_vue
使用脚手架命令行创建vue项目，具体操作步骤如下：
这里提示我们，需要先选择一个预先装置。 第一项是你的项目模板，包含了基本的 stylus, babel, router, vuex, eslint, unit-jest 设置的 preset； 第二项是默认方式创建vue项目模板，包含了基本的 Babel + ESLint 设置的 preset； 第三项是手动选择功能创建vue项目，手动选择特性”来选取需要的特性； 使用键盘↑或↓来选择你需要的模板，按回车键确认，这里我选择第三项手动模式。
这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，可以根据项目需求选择你需要安装的依赖包。
// Babel 是一个 JavaScript 编译器,用于代码编译
◯ Babel
// ts脚本
◯ TypeScript
// 渐进式WEB应用,在网页应用中实现和原生应用相近的用户体验
◯ Progressive Web App (PWA) Support
// vue的路由
◯ Router
// vue的状态管理模式
◯ Vuex
// css样式预处理
◯ CSS Pre-processors
// 代码风格，格式校验
◯ Linter / Formatter
// 单元测试，站在程序员的角度测试
◯ Unit Testing
// 端到端测试，站在用户角度的测试
◯ E2E Testing
这里根据需求选择了Babel, Router, Vuex, Linter，按回车键进入下一步。
// 由于添加了路由，这里需要选择使用历史路由模式`history路由需要依赖运维`, 根据需求选择。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
这里选择了n，放弃历史路由模式，采用哈希路由模式。
下面选择代码风格、格式 选择严格模式
? Pick a linter / formatter config: (Use arrow keys)
// 只进行报错提示
ESLint with error prevention only
// Airbnb配置
ESLint + Airbnb config
// 标准配置
ESLint + Standard config
// 严格模式
ESLint + Prettier
选择校验时，一般都会选择保存时校验，好及时做出调整。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
// 保存时检查
Lint on save
// 提交时检查
Lint and fix on commit
选择Babel,PostCSS, ESLint等自定义配置的存放位置。这里选择第一个放在专用文件，方便管理。
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
// 存放在专用配置文件中
In dedicated config files
// 存放在package.json中
In package.json
是否保存当前选择的配置项，如果当前配置是经常用到的配置，建议选择y存储一下当前配置项。如果只是临时使用的话就不需要存储了，根据自己情况而定。
? Save this as a preset for future projects? (y/N)
以上一系列选择之后，项目就会自动创建并且安装依赖。
cd mypro_vue
npm run serve
