低版本升级到 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 （也就是创建项目的第一步就会出来）】这个选项里面存在这份记录以供选择，到此为止，项目就创建完成了，然后就等待创建项目添加好依赖库就可以进入项目了。
网友评论