# Vue CLI

# 介绍

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统

该系统包含了几个独立的部分

  1. CLI 命令行工具

    vue create 搭建一个项目
    vue serve 构建新想法的原型
    vue ui 图像化界面管理项目

  2. CLI 服务

    @vue/cli-service 是一个开发环境依赖,局部安装在每一个项目中

  3. CLI 插件

    提供可选功能的 npm 包,例如 babel/Typescript 转译、ESlint 集成、单元测试和 e2e 测试

# 安装

# npm 全局设置

node -v
npm -v
npm config set registry https://registry.npm.taobao.org #切换下载源为淘宝npm
npm list -g --depth=0 #检查当前全局安装的包

# 安装 vue-cli

npm install -g @vue/cli
vue --version #检查vue-cli的版本

# 升级

npm update -g @vue/cli

# 快速原型开发

你可以使用 vue serve 和 vue build 命令对单个*.vue 文件进行快速原型开发,不过需要先按照一个全局的扩展

npm install -g @vue/cli-service-global
vue serve
vue build
vue serve [options] [entry]
#  在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
Options:
  -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息
vue build [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 creata

vue init webpack hello-vue # 老版本用法
vue create hello-vue # 新版本用法

使用图像化管理界面

vue ui

拉取旧版本

npm install -g @vue/cli-init
vue init webpack my-project

# 插件和 Preset

在现有项目中安装插件 vue add

vue add eslint // vue add cli-plugin-eslint # 这个和之前的用法等价

Preset

在 vue create 过程中保存的 preset 会放在 home 目录下的一个配置文件中(~/vuerc)

加载文件系统中的 Preset

# ./my-preset 应当是一个包含 preset.json 的文件夹
vue create --preset ./my-preset my-project

# 或者,直接使用当前工作目录下的 json 文件:
vue create --preset my-preset.json my-project

# CLI 服务

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  }
}
npm run dev #老版本
npm run serve

# 浏览器兼容性

# browserslist

package.json 文件里的 browerslist 字段,指定项目的目标浏览器的范围

"browserslist": [
	"> 1%",
	"last 2 versions",
	"not dead"
]

# Polyfill

Polyfill 是一块代码,用来为浏览器提供它没有原生支持的较新的功能

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es.promise',
        'es.symbol'
      ]
    }]
  ]
}

# HTML 和静态资源

# HTML

  1. index 文件 public 文件下的 index.html 是一个会被html-webpack-plugin处理的模板

  2. 插值 index 文件被用作模板,因此可以使用 lodash template 写法,插入内容

  3. Preload

  4. Prefetch

  5. 不生成 index

  6. 构建一个多页应用

# 处理静态资源

在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。

放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝,而不会经过 webpack 的处理

  1. 从相对路径导入

  2. URL 转换规则

  3. 何时使用 public 文件夹