Mac Vue 新建项目（及升级 vue-cli3.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键是全选）

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

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

  • Babel：基础库，以及ES6转ES5。
  • TypeScript：支持使用 TypeScript 书写源码。
  • Progressive Web App (PWA) Support：PWA 支持，渐进式Web应用。
  • Router：支持 vue-router，路由管理 。
  • Vuex：支持 vuex，数据存储 。
  • CSS Pre-processors：支持 CSS 预处理器。
  • Linter / Formatter：ESLint 支持代码风格检查和格式化，规范类型，这玩意要人抓狂我用习惯了 JSLint。JSLint、JSHint、ESLint的区别。
  • Unit Testing：支持单元测试。
  • E2E Testing：支持 E2E 测试。

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

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

  ○ 这个就看自己需求了，不懂的就自己百度一波，反正都是css用的，其实哪个都可以，看熟练度或者看公司大家用哪个，这里我选择stylus,选好之后按 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（这玩意要人抓狂，我用习惯了 JSLint），可以选择 ESLint + Prettier ：

  Pick a linter / formatter config: 
    ESLint with error prevention only 
    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   // fix和commit时候检查
  

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

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

  ○ 这是是问你是否记录下，以便下次继续使用这套配置，输入N不记录，如果键入Y需要输入保存名字，如果保存了，下次创建项目会在 【Please pick a preset （也就是创建项目的第一步就会出来）】这个选项就可以选择记录的创建项目方案。

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

  ○ 到此就创建完成了！按照提示 cd hello-world 到项目目录，运行 npm run serve 启动项目即可。

  🎉  Successfully created project hello-world.
  👉  Get started with the following commands:
  
   $ cd hello-world
   $ npm run serve