• vue管理系统从0到1-vue-cli@4
  • Artiely
  • #vue-cli
  • 2020-06-05
  • 709
  • 4 min read
  • loading...

使用 vue-cli@4

安装脚手架工具

$ npm install -g @vue/cli
# OR
$ yarn global add @vue/cli
复制成功
1
2
3

创建一个项目

$ vue create admin
复制成功
1

并配置项目。
若安装缓慢报错,可尝试用 cnpm 或别的镜像源自行安装:rm -rf node_modules && cnpm install。

TIP

推荐小公举(小工具)nrm 可以方便的切换镜像源

# 安装
npm i nrm -g
# 查看支持的镜像
nrm ls
# 测试各镜像的延迟
nrm test
# 切换镜像源
nrm use taobao
复制成功
1
2
3
4
5
6
7
8

WARNING

在切换镜像后无法直接发布npm包,记得在发布包时切换回来 nrm use npm

开始配置

Vue CLI v4.4.1
? Please pick a preset:
  default (babel, eslint) # 默认配置
> Manually select features # 自定义配置


复制成功
1
2
3
4
5
6
Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel  # 开启babel转译
 ( ) TypeScript # 是否启用TS
 ( ) Progressive Web App (PWA) Support #是否启用PWA
 (*) Router # 启用路由
 (*) Vuex  # 启用vuex数据管理
>(*) CSS Pre-processors  # 启用css预处理
 (*) Linter / Formatter  # 启用代码校验
 ( ) Unit Testing  # 测试
 ( ) E2E Testing  # 测试
复制成功
1
2
3
4
5
6
7
8
9
10
11
12
Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
# y 是否使用history模式
复制成功
1
2
3
4
5
Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? 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
复制成功
1
2
3
4
5
6
7
8
9
Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier  # 选择校验和代码风格
复制成功
1
2
3
4
5
6
7
8
9
10
Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features:
 (*) Lint on save # 是否在保存和提交时校验
>(*) Lint and fix on commit
复制成功
1
2
3
4
5
6
7
8
9
Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files # 配置是单文件存放还是合并到package.json
  In package.json
复制成功
1
2
3
4
5
6
7
8
9
10
Vue CLI v4.4.1
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n # 是否保存为模板下次直接使用
复制成功
1
2
3
4
5
6
7
8
9

启动项目

$ cd admin
$ npm run serve
复制成功
1
2

提示如下表示启动成功!

 DONE  Compiled successfully in 3262ms                                                                                  15:31:41


  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.88.89:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.
复制成功
1
2
3
4
5
6
7
8
9

你已经迈出了第一步!