低版本升级到 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
