### 彪哥

爱好前端

- 基础

- 组件

- 过渡&动画

- 可复用性&组合

- 工具

  - Vue CLi v3 创建项目使用记录
    - vue create
    - 图形化界面

- 规模化

- Vuex

- 其他

- 《Vue》笔记
- 工具

heBody
2020-02-20
目录

# Vue CLi v3 创建项目使用记录

# # Vue CLi v3.x 创建项目使用记录

官方文档
(opens new window)

以下使用的CLi版本是 v3.11.0

## # vue create

1. 运行以下命令来创建一个新项目

    vue create hello-world

1

2. 你会被提示选取一个 preset (预设)。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

    Vue CLI v3.11.0
    ? Please pick a preset: (Use arrow keys)
    > default (babel, eslint)
      Manually select features (手动选择特性)

1
2
3
4

默认预设只包含Babel + ESLint，如需要使用到Router、CSS Pre-processors（CSS预处理器）等需要选手动选择特性。

3. 手动选择特性

    Vue CLI v3.11.0
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >(*) Babel # 将现代JS转成旧版本（出于兼容性考虑）
     ( ) TypeScript # 添加对TS的支持
     ( ) Progressive Web App (PWA) Support # 渐进式Web应用程序（PWA）的支持
     ( ) Router # 路由
     ( ) Vuex # 状态管理
     ( ) CSS Pre-processors # css预处理器
     (*) Linter / Formatter # 使用ESLint检查代码质量
     ( ) Unit Testing # 单元测试
     ( ) E2E Testing  # E2E测试

1
2
3
4
5
6
7
8
9
10
11
12

> 图形化界面有对特性的介绍

4. 使用路由器的历史记录模式？（需要适当的服务器设置才能在生产中进行索引回退）通过使用HTML5历史记录API，URL不再需要'＃'字符。

    Vue CLI v3.11.0
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Babel, Router, CSS Pre-processors, Linter
    ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

1
2
3
4

5. 选择css预处理器

    Vue CLI v3.11.0
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Babel, Router, 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

6. 选择ESLint配置

    Vue CLI v3.11.0
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Babel, Router, 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): Stylus
    ? Pick a linter / formatter config: (Use arrow keys)
      ESLint with error prevention only
      ESLint + Airbnb config
    > ESLint + Standard config (标准配置)
      ESLint + Prettier

1
2
3
4
5
6
7
8
9
10

7. 选择附加的lint特性？

    Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
    >(*) Lint on save （保存时检查lint）
     ( ) Lint and fix on commit （提交时 lint 和 fix）

1
2
3

8. 你喜欢把配置放在什么地方？比如Babel、PostCSS、ESLint等配置

    Vue CLI v3.11.0
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Babel, Router, 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): Stylus
    ? Pick a linter / formatter config: Standard
    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
    > In dedicated config files (在专用的配置文件)
      In package.json (在package.json)

1
2
3
4
5
6
7
8
9
10

9. 将这次已选项保存为一个将来可复用的 preset （预设）？

    Vue CLI v3.11.0
    ? Please pick a preset: Manually select features
    ? Check the features needed for your project: Babel, Router, 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): Stylus
    ? Pick a linter / formatter config: Standard
    ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
    ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
    ? Save this as a preset for future projects? (y/N)

1
2
3
4
5
6
7
8
9

> ~/.vuerc

> 被保存的 preset 将会存在用户的 home 目录下一个名为 `.vuerc` 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。

## # 图形化界面

对于Vue CLi使用还不是特别熟悉的同学，可以使用图形化界面。运行以下命令会自动打开界面

    vue ui

1

> 图形化界面有中文系统，直观的功能界面，以及特性的介绍等。

编辑
(opens new window)
#Vue
上次更新: 2022/12/14, 19:36:42
Mixin混入
vuex操作相关

← Mixin混入 vuex操作相关→

最近更新

  01
Git修改分支名
08-11

  02
CSS给table的tbody添加滚动条
06-29

  03
我做了一个手写春联小网页，祝大家虎年暴富 原创
01-28

更多文章>

Copyright © 2016-2022 Hesb | MIT License

- 跟随系统
- 浅色模式
- 深色模式
- 阅读模式