搭建 VUE 项目 - 初始化项目

• 在创建项目之前需要进行安装 node.js【node下载地址】
• 安装完成上面的步骤之后可以使用 node -V 来进行查看安装的 node 版本【npm -V：查看npm版本】
• 一般 node 是自带 npm，但是发现版本不是最新版，那么可以使用 npm install -g npm，就可以下载成最新版本的npm
• 之后进行全局现在路由

cnpm install vue-cli -g      //全局安装 vue-cli

• 上面步骤只需要安装一次就可以，如果已经安装过，则可以直接进行下面的步骤

进行下载项目【vue create project 项目名称】

1. 选择预设

? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select feature　　# 手动选择功能

2. 选择 Manually select features创建
   复制代码

Vue CLI v4.5.12
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter // 选择这个之后最好下载 npm i prettier -g，之后进行.prettierrc 文件配置
 ( ) Unit Testing
 ( ) E2E Testing 
 // babel，可将ES6语法转成ES5语法。
 // TypeScript，TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源。
 // Progressive Web App (PWA) Support，渐进式Web应用程序（PWA）支持。
 // Vuex，一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
 // CSS Pre-processors，CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。
 // Linter / Formatter，格式化程序。
 // Unit Testing，单元测试。
 // E2E Testing，端到端（end-to-end）。
 2.1 Use history mode for router
 2.2 Choose Vue version
 2.3 Pick a linter / formatter config

? Pick additional lint features:
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
ESLint with error prevention only，只配置使用 ESLint 官网的推荐规则。
ESLint + Airbnb config，使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置 Airbnb的规则。
ESLint + Standard config，使用 ESLint 官网推荐的规则 + Standard第三方的配置 Standard 的规则。
ESLint + Prettier，使用 ESLint 官网推荐的规则 +Prettier 第三方的配置 Prettier 主要是做风格统一。

? Pick additional lint features: 
(*) Lint on save　　# 保存就检测
( ) Lint and fix on commit　　# 提交时检测

2.4 如何选择配置
? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files # 存放到独立文件中
In package.json # 存放到 package.json 中

2.5 选择是否保存本次配置
Save this as a preset for future projects?

2.6 等待项目创建

• 在上面说到了使用.prettierrc 文件的配置一般含有下面配置

{
    // 超过最大值换行
    "printWidth": 200,
    // 让prettier使用eslint的代码格式进行校验
    "eslintIntegration": true,
    // 让prettier使用stylelint的代码格式进行校验
    "stylelintIntegration": true,
    // tab键宽度，默认为2
    "tabWidth": 4,
    // 行末加分号
    "semi": true,
    // 用单引号代替双引号
    "singleQuote": true,
    // 对象&数组是否追加空格
    // e.g. false: {foo:bar}
    // true: { foo: bar }
    "bracketSpacing": true,
    // 箭头函数参数括号 默认avoid 可选 avoid | always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    "arrowParens": "avoid"
}