vue-cli3 知识点

Posted 2022-12-08 书和咖啡

介绍

vue-cli

• 通过 @vue/cli 搭建交互式的项目脚手架
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发
• 一个运行时依赖（@vue/cli-service）
• 一个丰富的官方插件集合，集成了前端生态中最好的工具
• 一套完整图形化的创建和管理 Vue.js 项目的用户界面

CLI

• CLI（@vue/cli）：
  • 一个全局安装的 npm 包（提供vue命令）
    • vue create：快速创建一个新项目的脚手架
    • vue serve：构建新想法的原型
    • vue ui：通过一套图形化界面管理我们的所有项目
• CLI服务（@vue/cli-service）：
  • 一个开发环境依赖（包含）
    • 加载其他 CLI 插件的核心服务
  • 局部安装在每个@vue/cli创建的项目中（包含）
    • 优化过的 n 内部 webpack 配置
  • 构建于 webpack 和 webpack-dev-server 之上（包含）
    • vue-cli-service 命令：提供了 serve 命令、build 命令和 inspect 命令
• CLI插件：向Vue项目提供可选功能的 npm 包
  • 内建插件：@vue/cli-plugin-
  • 社区插件：vue-cli-plugin-
  • 执行 vue-cli-service 命令时，自动解析并加载 package.json 中列出的所有 CLI 插件

安装

首先安装node，版本要求在8.9或更高版本。

安装命令：

// 局部安装
npm i @vue/cli 
yarn add @vue/cli

// 全局安装
npm i -g @vue/cli
yarn add -g @vue/cli

检查安装是否成功：

vue --version

基础

搭建基本项目

• 快速构建命令 vue serve 和 vue build （必须是在全局安装@vue/cli-service-global 依赖的前提下）

  npm install -g @vue/cli-service-global
  

• vue serve 命令选项

  Usage: serve [options] [entry]
  在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
  
  Options:
  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息
  

• vue build 命令选项

  Usage: serve [options] [entry]
  在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
  
  Options: 
  -t, --target <target>  // 构建目标（app | lib | wc | wc-async，默认值：app）
  -n, --name <name>      // 库的名字或 Web Components组件的名字（默认值：入口文件名）
  -d, --dest <dir>       // 输出目录（默认值：dist）
  -h, --help             // 输出用法信息
  

• 快速创建一个项目命令

  vue create
  

插件和preset

• 插件的注册与声明
• Preset
• 一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们

CLI 服务

• vue-cli-service serve 启动一个开发服务器并附带开箱即用的模块热加载（可以通过 devServer 配置开发服务器）

  用法：vue-cli-service serve [options] [entry]
  
  选项：
    --open    在服务器启动时打开浏览器
    --copy    在服务器启动时将 URL 复制到剪切版
    --mode    指定环境模式 (默认值：development)
    --host    指定 host (默认值：0.0.0.0)
    --port    指定 port (默认值：8080)
    --https   使用 https (默认值：false)
  

• vue-cli-service build，在输出目录产生一个环境的包，自动进行代码压缩，vendor chunk splitting，内联chunk manifest 在html里面。

  用法：vue-cli-service build [options] [entry|pattern]
  
  选项：
    --mode        指定环境模式 (默认值：production)
    --dest        指定输出目录 (默认值：dist)
    --modern      面向现代浏览器带自动回退地构建应用
    --target      app | lib | wc | wc-async (默认值：app)
    --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
    --no-clean    在构建项目之前不清除目标目录
    --report      生成 report.html 以帮助分析包内容
    --report-json 生成 report.json 以帮助分析包内容
    --watch       监听文件变化
  

• vue-cli-service inspect，审查 vue-cli 项目的 webpack 配置

  用法：vue-cli-service inspect [options] [...paths]
  
  选项：
  --mode       // 指定环境模式，默认值：development
  

查看所有可用命令

npx vue-cli-service help

缓存和并行处理

cache-loader：默认为 Vue/Babel/TypeScript 编译开启，文件会缓存在 node_modules/.cache 中。

开发

浏览器的兼容性

HTML 和 静态资源

css相关

webpack相关

环境变量和模式

构建目标

部署