前端analysis | 3w & 1h

《 vue 》 - vue-cli核心概念整理

2020-06-29

vue-cli

介绍

  • vue-cli版本基于4.4.x
  • Vue CLI 致力于将 Vue 生态中的工具基础标准化
  • 让使用者专注在撰写应用上,而不必花好几天去纠结配置的问题
  • 提供了如下功能:
    • @vue/cli 交互式的项目脚手架
    • @vue/cli + @vue/cli-service-global 零配置原型开发
    • 运行时依赖 (@vue/cli-service)

      可升级;
      基于 webpack 构建,并带有合理的默认配置;
      可以通过项目内的配置文件进行配置;
      可以通过插件进行扩展

    • 丰富的官方插件集合, @vue/cli-plugin- (内建插件) ,vue-cli-plugin- (社区插件)
    • 完全图形化的创建和管理 Vue.js 项目的用户界面

安装

node 安装
cli 安装
1
2
3
npm install -g @vue/cli
# OR
yarn global add @vue/cli
验证
1
2
$ vue --version
@vue/cli 4.4.6

快速原型开发

依赖
1
2
@vue/cli 
@vue/cli-service-global
安装
1
npm install -g @vue/cli-service-global
指令
  • vue serve 开发环境启动命令
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $ vue serve --help 
    Usage: serve [options] [entry]

    serve a .js or .vue file in development mode with zero config

    Options:
    -o, --open Open browser
    -c, --copy Copy local url to clipboard
    -p, --port <port> Port used by the server (default: 8080 or next available port)
    -h, --help output usage information
  • vue build 线上版本构建
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    $ vue build --help 
    Usage: build [options] [entry]

    build a .js or .vue file in production mode with zero config

    Options:
    -t, --target <target> Build target (app | lib | wc | wc-async, default: app)
    -n, --name <name> name for lib or web-component mode (default: entry filename)
    -d, --dest <dir> output directory (default: dist)
    -h, --help output usage information
  • 指令默认入口文件(以下列表之一)

    main.js
    index.js
    App.vue 或 app.vue
    也可以指定

    1
    2
    vue serve MyComponent.vue
    vue build MyComponent.vue

vue-cli 指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ vue --help 
create [options] <app-name> create a new project powered by vue-cli-service
add [options] <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project
invoke [options] <plugin> [pluginOptions] invoke the generator of a plugin in an already created project
inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service
serve [options] [entry] serve a .js or .vue file in development mode with zero config
build [options] [entry] build a .js or .vue file in production mode with zero config
ui [options] start and open the vue-cli ui
init [options] <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init)
config [options] [value] inspect and modify the config
outdated [options] (experimental) check for outdated vue cli service / plugins
upgrade [options] [plugin-name] (experimental) upgrade vue cli service / plugins
migrate [options] [plugin-name] (experimental) run migrator for an already-installed cli plugin
info print debugging information about your environment
vue create 创建新项目

指令介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ vue create --help
Usage: create [options] <app-name>

create a new project powered by vue-cli-service

Options:
-p, --preset <presetName> Skip prompts and use saved or remote preset
-d, --default Skip prompts and use default preset
-i, --inlinePreset <json> Skip prompts and use inline JSON string as preset
-m, --packageManager <command> Use specified npm client when installing dependencies
-r, --registry <url> Use specified npm registry when installing dependencies (only for npm)
-g, --git [message] Force git initialization with initial commit message
-n, --no-git Skip git initialization
-f, --force Overwrite target directory if it exists
--merge Merge target directory if it exists
-c, --clone Use git clone when fetching remote preset
-x, --proxy Use specified proxy when creating project
-b, --bare Scaffold project without beginner instructions
--skipGetStarted Skip displaying "Get started" instructions
-h, --help output usage information

指令应用

1
vue create hello-world 
vue add 添加插件
vue invoke 调用插件
vue inspect 查看配置
vue serve 启动
vue build 构建
vue ui 启动ui界面
vue init 初始化项目
vue config 查看修改配置
vue outdated
vue upgrade 升级插件
vue migrate 合并插件
vue info 查看环境信息
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助,欢迎点击上方按钮对我打赏