Skip to content

VueJS构建工具:Vue CLI与Vite

前言

VueJS 构建工具有 Vue CLI 和 Vite ，其中Vue CLI比较全面，使用更加广泛，而Vite比较新，它不使用webpack，专注于提高构建速度，并且它也支持构建React项目。

这里只做最基本的介绍，方便快速查看，详细直接看官方文档。

Vue CLI

安装

$ npm install -g @vue/cli

# OR

$ yarn global add @vue/cli

安装成功后，可以执行:

$ vue --version
@vue/cli 5.0.8

升级

$ npm update -g @vue/cli

# OR

$ yarn global upgrade --latest @vue/cli

升级插件

$ vue upgrade -h
Usage: vue upgrade [options] [plugin-name]

(experimental) upgrade vue cli service / plugins

Options:
  -t, --to <version>    Upgrade <package-name> to a version that is not latest
  -f, --from <version>  Skip probing installed plugin, assuming it is upgraded from the designated version
  -r, --registry <url>  Use specified npm registry when installing dependencies
  --all                 Upgrade all plugins
  --next                Also check for alpha / beta / rc versions when upgrading
  -h, --help            display help for command

创建项目

$ vue create my-project

# OR

$ vue ui

更多参数:

$ vue create --help

Usage: vue 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 <proxyUrl>          Use specified proxy when creating project
  -b, --bare                      Scaffold project without beginner instructions
  --skipGetStarted                Skip displaying "Get started" instructions
  -h, --help                      display help for command

目录结构

README.md
babel.config.js
jsconfig.json
node_modules/
package-lock.json
package.json                       # npm管理文件
public/                            # 公用静态资源
public/favicon.ico                 # logo文件
public/index.html                  # SPA入口
src/                               # 源码目录
src/App.vue                        # 主组件
src/main.js                        # 主程序
src/assets/logo.png                # 非公用静态资源
src/components/HelloWorld.vue      # 单文件组件
vue.config.js                      # webpack配置文件
dist/                              # 默认打包输出目录
  • public/: 公用静态文件构建时会直接复制过去使用，适合后期托管给后端服务器
  • src/assets/: 非公用静态资源构建时会有对应的hash码，每次升级前端部分都需要更换

构建: serve与build

  • 安装:
$ npm install @vue/cli-service
  • 验证:
$ ./node_modules/.bin/vue-cli-service -h

  Usage: vue-cli-service <command> [options]

  Commands:

    serve     start development server
    build     build for production
    inspect   inspect internal webpack config
    lint      lint and fix source files

  run vue-cli-service help [command] for usage of a specific command.
  • 默认配置(package.json):
{
  //...
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "dev-test-build": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint"
  },
  //...
}
  • 使用:
$ npm run serve
$ npm run build

# OR

$ yarn serve
$ yarn build

Vite

创建项目

$ npm create vite@latest testvite

# OR

$ yarn create vite testvite

创建过程中可以选择Vue或React等框架，也可以选择TypeScript或JavaScript等语言。

安装依赖

$ cd testvite/

$ npm install

目录结构

README.md
index.html
node_modules/
package-lock.json
package.json
public/                         # 公用静态资源
public/vite.svg                 # 站点图标文件
src/                            # 代码目录
src/App.vue                     # 主组件
src/main.ts                     # 主程序
src/style.css                   # 样式文件
src/vite-env.d.ts               # 环境配置文件
src/assets/vue.svg              # 私用静态文件
src/components/HelloWorld.vue   # 单文件组件
tsconfig.json
tsconfig.node.json
vite.config.ts                  # 构建配置文件
dist/                           # 构建默认输出目录

运行dev

$ npm run dev

构建build

$ npm run build

官方Vite + Vue: create-vue

创建项目

$ npm create vue@latest

# OR

$ yarn create vue@latest

在这过程中会先自动安装create-vue。

基本操作

$ npm install
$ npm run format
$ npm run dev
$ npm run build