Mac Vue升级3.x以及项目创建

---

---

低版本升级到 vue-cli3.x

---

• Vue-cli 要求Node.js版本8或更高(8.10.0+推荐)。

• 安装 vue-cli3.x

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

• 如果希望还保留 vue-cli2.x 的语法或使用 2.x 的模板，建议安装 cli-init

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

我这边是选择的第一种方式，我没有保留继续使用3.0以下的版本，可以更具自己需求而定，也可以后期需要的时候在支持3.0以下版本的使用都是可以的。

---

---

vue-cli3.x 创建项目

---

• 使用 vue-cli3.x 创建项目

vue create hello-world

• 创建项目会弹出：

Your connection to the default  npm  registry seems to be slow. 
Use https://registry.npm.taobao.org for fster installation? (Y/n)

○ 这两句是引用淘宝镜像 Yes 就可以，接着弹出：

Vue CLI v3.11.0
? Please pick a preset: (Use arrow keys)
  default (babel, eslint)  
❯ Manually select features 

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

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

○ 如果想要更多的支持，就选择第二项：切换到第二项，按下 enter 键选中，弹出如下界面：（注：空格键是选中与取消，A键是全选）

◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
◉ Vuex
◉ CSS Pre-processors
◯ Linter / Formatter
◯ Unit Testing
◯ E2E Testing

• TypeScript 支持使用 TypeScript 书写源码
• Progressive Web App (PWA) Support PWA 支持。
• Router 支持 vue-router 。
• Vuex 支持 vuex 。
• CSS Pre-processors 支持 CSS 预处理器。
• Linter / Formatter 支持代码风格检查和格式化。
• Unit Testing 支持单元测试。
• E2E Testing 支持 E2E 测试。

○ 我这边只需要用到这4个就够了其他的都没啥用，然后按 enter 键继续：

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 

○ 是否使用 history 模式，一般都是 Yes ，然后按 enter 键继续：

Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
  Sass/SCSS (with dart-sass) 
  Sass/SCSS (with node-sass) 
  Less 
❯ Stylus 

○ 如果你有勾选 Linter / Formatter，我这边是没有勾选的：

Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
❯ ESLint + Prettier 

○ 这个就看自己需求了，不懂的就自己百度一波，反正都是css用的，其实哪个都可以，看熟练度或者看公司大家用哪个，这里我选择stylus,选好之后按 enter 键继续：

Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?:
❯ In dedicated config files // 独立文件放置
  In package.json // 放package.json里

○ 这里是问你把babel,postcss,eslint这些配置文件放哪，这里随便选，我选择放在独立文件夹，选第一个就好了，按 enter 键继续：

Save this as a preset for future projects? (y/N) 

○ 这是是问你是否记录下，以便下次继续使用这套配置，输入N不记录，如果键入Y需要输入保存名字，如果保存了，下次创建项目会在 【Please pick a preset （也就是创建项目的第一步就会出来）】这个选项里面存在这份记录以供选择，到此为止，项目就创建完成了，然后就等待创建项目添加好依赖库就可以进入项目了。