vue-cli3脚手架V4.5的使用

最近在研究vue3.0,相关的脚手架(vue-cli)更新到了V4.5以上,记录一下相关的使用

安装

如果之前安装过vue-cli 3.x的版本,也就是之前vue2.x对应的版本,需要先进行卸载,命令:

npm uni -g vue-cli
1

没有则跳过,接下来安装版本号4.x的vue-cli,命令:

npm i -g @vue/cli
1

查看vue-cli版本

vue -V
1

使用命令行创建项目

输入指令

vue create 项目名
1

会出现这三种情况

1. 安装vue2预设Default ([Vue 2] babel, eslint)

安装下载vue2版本的预设,默认配置只有babel和eslint其他的都要自己另外再配置

2. Default (Vue 3 Preview) ([Vue 3] babel, eslint)

安装下载vue3版本的预设,默认配置只有babel和eslint其他的都要自己另外再配置

3. Manually select features

自定义选择配置项,图片看不清出的看文字,根据需要选择,下面有说明

Check the features needed for your project:
 //检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择）
 ( ) Choose Vue version						// 选择vue版本,不选择,默认安装`2.6.11`版本的vue
 ( ) Babel									// 语法编译器,es6->es5
 ( ) TypeScript								// 支持使用 TypeScript 书写源码
 ( ) Progressive Web App (PWA) Support		// PWA 支持
 ( ) Router									// 支持 vue-router
 ( ) Vuex									// 支持 vuex
 ( ) CSS Pre-processors						// 支持 CSS 预处理器。
 ( ) Linter / Formatter						// 支持代码风格检查和格式化。
 ( ) Unit Testing							// 支持单元测试。
 ( ) E2E Testing							// 支持E2E测试。
1
2
3
4
5
6
7
8
9
10
11
12

选择部分选项后出现的配置选项

---

Choose a version of Vue.js that you want to start the project with?
1

选择你的vue版本,会让你选择2.x或者3.x,根据需要选择就行

---

Use class-style component syntax?
1

是否选择class风格的组件语法?
即原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}

---

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?
1

使用Babel与TypeScript一起用于自动检测的填充?

---

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

路由使用history模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

---

 Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus
1
2
3
4
5

选择预处理的模式

---

Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)
1
2
3
4
5
6

选择语法检测规范

---

Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
1
2
3

选择 保存时检查 / 提交时检查

---

 Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
  Jest
1
2
3

测试方式

---

 Pick an E2E testing solution: (Use arrow keys)
> Cypress (Chrome only)
  Nightwatch (WebDriver-based)
  WebdriverIO (WebDriver/DevTools based)
1
2
3
4

e2e测试方式

---

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
1
2
3

选择配置信息存放位置，单独存放或者并入package.json

---

Save this as a preset for future projects? 
1

是否保存当前预设，下次构建无需再次配置

---

Save preset as
1

给这次的配置起一个名字

使用可视化安装

1. 输入命令

vue ui
1

会吊起一个页面,我的打开是之前的项目,新打开的可能不一样
打开是项目的从左上角

项目管理页

2. 点击项目管理页的创建新项目按钮,整体功能和命令行一样,只是可视化操作了,建议先详细的看看vue-cli3脚手架V4.5的使用

3. 创建完进入项目管理配置,在这里可以安装依赖,更新依赖,配置信息,启动等等

4. 启动