- 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
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
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
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
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
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
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
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
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
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
2
3
4
5
6
7
8
9
启动项目 ¶
$ cd admin $ npm run serve复制成功
1
2
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
2
3
4
5
6
7
8
9
你已经迈出了第一步！