Vue学习笔记（一）------脚手架vue cli

时间 2019-11-30

标签 vue 学习笔记脚手架 cli 繁體版

原文原文链接

脚手架vue-cli(3.x)

vue-cli是一个基于vue.js进行快速开发的完整系统，提供下面几个功能：

经过 @vue/cli 搭建交互式的项目脚手架。
经过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service），该依赖：
- 可升级；
- 基于 webpack 构建，并带有合理的默认配置；
- 能够经过项目内的配置文件进行配置；
- 能够经过插件进行扩展。
一个丰富的官方插件集合，集成了前端生态中最好的工具。
一套彻底图形化的建立和管理 Vue.js 项目的用户界面。

vue-cli是由如下几个部分组成：

cli（@vue/cli）
cli服务（@vue/cli-service）
cli插件

CLI (@vue/cli) 是一个全局安装的 npm 包，提供了终端里的 vue 命令，这些命令都是在全局安装以后才可使用的，例如：使用 vue serve 启动项目须要在npm install -g @vue/cli-service-global以后才能够。css

vue create 建立一个vue项目

vue serve 启动vue项目

vue ui 进入vue可视化管理界面

当咱们没有全局安装vue时，能够借助npm 进行vue项目的启动和打包等操做，例如： npm run serve 启动vue项目; npm run build打包vue项目; 同时在启动react项目的时候使用的是npm start; 在打包react项目的时候也是使用的npm run build; 可是建立react项目的是使用的react本身的脚手架create-react-app; vue使用的命令是vue create。html

CLI 服务 (@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包，局部安装在每一个 @vue/cli建立的项目中。前端

加载其它 CLI 插件的核心服务；
一个针对绝大部分应用优化过的内部的 webpack 配置；
项目内部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

若是你熟悉 create-react-app 的话，@vue/cli-service 实际上大体于 react-scripts，尽管功能集合不同。vue

对应的vue项目的package.json中内容以下：node

{
  ......
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
  ......
}
复制代码

CLI 插件是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin-(社区插件) 开头，很是容易使用。react

对应的vue项目的package.json中内容以下：webpack

{
  ......
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.5.0",
    "@vue/cli-plugin-eslint": "^3.5.0",
    "@vue/cli-service": "^3.5.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.21"
  }
  ......
}
复制代码

脚手架的安装

关于旧版本，若是你已经全局安装了旧版本vue-cli（1.x或者2.x）的话，须要先卸载，npm uninstall vue-cli -g,如今是3.x的脚手架@vue/cli。git

安装@vue/clies6

npm  intsall @vue/cli  -g 
复制代码

安装完成以后可使用vue --version 查看版本的信息以及是否安装成功;github

脚手架的基础使用

可使用vue serve和vue build对单个*.vue文件进行快速原型开发，可是须要安装一个额外的全局扩展：

npm install -g @vue/cli-service-global
复制代码

vue serve 的缺点就是它须要安装全局依赖，这使得它在不一样机器上的一致性不能获得保证。所以这只适用于快速原型开发。

vue serve经常使用的几个参数：

Usage: serve [options] [entry]
在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
-o, --open  打开浏览器
-c, --copy  将本地 URL 复制到剪切板
-h, --help  输出用法信息
其中 [entry]是入口文件，入口能够是 main.js、index.js、App.vue 或 app.vue 中的一个。你也能够显式地指定入口文件。
复制代码

vue build经常使用的几个参数

Usage: build [options] [entry]
在生产环境模式下零配置构建一个 .js 或 .vue 文件
-t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值：app)
-n, --name <name>      库的名字或 Web Components 组件的名字 (默认值：入口文件名)
-d, --dest <dir>       输出目录 (默认值：dist)
-h, --help             输出用法信息
复制代码

vue create建立一个新的项目

好比说建立一个新项目： vue create hello-world，当你使用vue create 建立一个项目时会提示你选择一个preset(预设)，你能够选默认的包含了基本的 Babel + ESLint 设置的 preset，或者vue-router, vuex, less, babel, eslint的preset，也能够选“手动选择特性”来选取须要的特性。

默认设置很是合适快速的常见一个新项目，当你选择手动建立时，你须要本身选择须要的依赖：

若是你决定手动选择特性，在操做提示的最后你能够选择将已选项保存为一个未来可复用的 preset。

当咱们在使用npm install安装依赖的时候，下载依赖每每会很是的慢，此时咱们须要修改一下，npm的下载源，能够改成淘宝的下载源：

首先查看当前的npm源是什么：

npm  config  get registry
复制代码

上面的源已经设置为淘宝的源，设置淘宝镜像：

npm config set registry https://registry.npm.taobao.org
复制代码

也能够进行临时修改，只生效一次：

npm install 包的名字 --registry https://registry.npm.taobao.org
复制代码

vue create 经常使用的参数查看：

选项：
  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理建立项目
  -b, --bare                      建立项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息
复制代码

vue ui 图形化界面管理项目

使用vue ui 进入图形化管理界面

vue  ui
复制代码

插件和preset（预设）

Vue CLI 使用了一套基于插件的架构。若是你查阅一个新建立项目的 package.json，就会发现依赖都是以 @vue/cli-plugin- 开头的。插件能够修改 webpack 的内部配置，也能够向 vue-cli-service 注入命令。在项目建立的过程当中，绝大部分列出的特性都是经过插件来实现的。

现有的项目中安装插件，安装一个新的插件可使用：

vue add @vue/eslint
复制代码

注意：

vue add 的设计意图是为了安装和调用 Vue CLI 插件。这不意味着替换掉普通的 npm 包。对于这些普通的 npm 包，你仍然须要选用包管理器。

其实在项目开发中咱们通常会使用npm进行的依赖包的管理：

npm  install  包名  --save  在生产环境中使用（package.json中的scripts下）
npm  install  包名  --save-dev 在开发环境中安装（package.json中的devDependencies下）
npm  install  安装package.json中的全部的依赖
npm  uninstall [<name><version>][-g]/[--save][-dev]  卸载安装的某个包
npm  update    [<name><version>][-g]/[--save][-dev]  更新安装的某个包
npm  init  初始化package.json文件
复制代码

在使用vue add时：

vue add @vue/eslint
# 这个命令将 @vue/eslint 解析为完整的包名 @vue/cli-plugin-eslint，而后从 npm 安装它，调用它的生成器。这个和以前的用法等价
vue add @vue/cli-plugin-eslint
复制代码

若是想安装第三方的，例如： @foo/vue-cli-plugin-bar

vue add @foo/bar
复制代码

vue-router 和 vuex 的状况比较特殊——它们并无本身的插件，可是你仍然能够这样添加它们：

vue add router
vue add vuex
复制代码

若是出于一些缘由你的插件列在了该项目以外的其它 package.json 文件里，你能够在本身项目的 package.json 里设置 vuePlugins.resolveFrom 选项指向包含其它 package.json 的文件夹。例如，若是你有一个 .config/package.json 文件，那么package.json里面要进行这样大的修改：

{
  "vuePlugins": {
    "resolveFrom": ".config"
  }
}
复制代码

若是你须要在项目里直接访问插件 API 而不须要建立一个完整的插件，你能够在 package.json 文件中使用 vuePlugins.service 选项：

{
  "vuePlugins": {
    "service": ["my-commands.js"]
  }
}
复制代码

preset（预设）

一个 Vue CLI preset 是一个包含建立新项目所需预约义选项和插件的 JSON 对象，让用户无需在命令提示中选择它们。

在 vue create 过程当中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (~/.vuerc)。你能够经过直接编辑这个文件来调整、添加、删除保存好的 preset。

进入./vuerc查看里面的内容：

下面就是preset的一个列子：

{
  "useTaobaoRegistry": false,
  "presets": {
    "y": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "standard",
          "lintOn": [
            "save"
          ]
        }
      },
      "router": true,
      "routerHistoryMode": true,
      "vuex": true,
      "cssPreprocessor": "less"
    }
  },
  "latestVersion": "3.6.3",
  "lastChecked": 1555467470124
}
复制代码

CLI 服务

在运行项目的时候执行npm run serve其实至关于执行了 vue-cli-service serve命名;

vue-cli-service serve命令

用法：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 serve 命令会启动一个开发服务器 (基于 webpack-dev-server) 并附带开箱即用的模块热重载 (Hot-Module-Replacement)。

命令行参数 [entry] 将被指定为惟一入口，而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引起错误。

vue-cli-service build命令

用法：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 build 会在 dist/ 目录产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好的缓存而作的自动的 vendor chunk splitting。它的 chunk manifest 会内联在 HTML 里。

这里还有一些有用的命令参数：

--modern 使用现代模式构建应用，为现代浏览器交付原生支持的 ES2015 代码，并生成一个兼容老浏览器的包用来自动回退。
--target 容许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。更多细节请查阅构建目标。
--report 和 --report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。

vue-cli-service inspect命令

用法：vue-cli-service inspect [options] [...paths]

选项：
  --mode    指定环境模式 (默认值：development)
复制代码

你可使用 vue-cli-service inspect 来审查一个 Vue CLI 项目的 webpack config。

缓存和并行处理

cache-loader 会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在 node_modules/.cache中——若是你遇到了编译方面的问题，记得先删掉缓存目录以后再试试看。
thread-loader 会在多核 CPU 的机器上为 Babel/TypeScript 转译开启。

浏览器兼容性

browserslist

你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。

Polyfill

一个默认的 Vue CLI 项目会使用 @vue/babel-preset-app，它经过 @babel/preset-env 和 browserslist 配置来决定项目须要的 polyfill。

默认状况下，它会把 useBuiltIns: 'usage' 传递给 @babel/preset-env，这样它会根据源代码中出现的语言特性自动检测须要的 polyfill。这确保了最终包里 polyfill 数量的最小化。然而，这也意味着若是其中一个依赖须要特殊的 polyfill，默认状况下 Babel 没法将其检测出来。

若是有依赖须要 polyfill，你有几种选择：

若是该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法语法转换和根据使用状况检测 polyfill。
若是该依赖交付了 ES5 代码并显式地列出了须要的 polyfill: 你可使用 @vue/babel-preset-app 的 polyfills 选项预包含所须要的 polyfill。注意 es6.promise 将被默认包含，由于如今的库依赖 Promise 是很是广泛的。

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}
复制代码

如今模式

Vue CLI 提供了一个“现代模式”帮你解决这个问题。以以下命令为生产环境构建：

vue-cli-service build --modern
复制代码

Vue CLI 会产生两个应用的版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另外一个旧版的包，面向不支持的旧浏览器。

现代版的包会经过 <script type="module"> 在被支持的浏览器中加载；它们还会使用 <link rel="modulepreload"> 进行预加载。
旧版的包会经过 <script nomodule> 加载，并会被支持 ES modules 的浏览器忽略。
一个针对 Safari 10 中 <script nomodule> 的修复会被自动注入。

对于一个 Hello World 应用来讲，现代版的包已经小了 16%。在生产环境下，现代版的包一般都会表现出显著的解析速度和运算速度，从而改善应用的加载性能。

HTML 和静态资源

index文件

public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。在构建过程当中，资源连接会被自动注入。另外，Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标连接 (当用到 PWA 插件时) 以及构建过程当中处理的 JavaScript 和 CSS 文件的资源连接。

插值

由于 index 文件被用做模板，因此你可使用 lodash template 语法插入内容：

<%= VALUE %> 用来作不转义插值；
<%- VALUE %> 用来作 HTML 转义插值；
<% expression %> 用来描述 JavaScript 流程控制。

除了被 html-webpack-plugin 暴露的默认值以外，全部客户端环境变量也能够直接使用。例如，BASE_URL 的用法：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">
复制代码

preload

是一种 resource hint，用来指定页面加载后很快会被用到的资源，因此在页面加载的过程当中，咱们但愿在浏览器开始主体渲染以前尽早 preload。默认状况下，一个 Vue CLI 应用会为全部初始化渲染须要的文件自动生成 preload 提示。

prefetch

是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提早获取用户将来可能会访问的内容。

不生成 index

当基于已有的后端使用 Vue CLI 时，你可能不须要生成 index.html，这样生成的资源能够用于一个服务端渲染的页面。这时能够向 vue.config.js 加入下列代码：

// vue.config.js
module.exports = {
  // 去掉文件名中的 hash
  filenameHashing: false,
  // 删除 HTML 相关的 webpack 插件
  chainWebpack: config => {
    config.plugins.delete('html')
    config.plugins.delete('preload')
    config.plugins.delete('prefetch')
  }
}
复制代码

css相关

引用静态资源

全部编译后的 CSS 都会经过 css-loader 来解析其中的 url() 引用，并将这些引用做为模块请求来处理。这意味着你能够根据本地的文件结构用相对路径来引用静态资源。另外要注意的是若是你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则须要在路径前加上 ~ 的前缀来避免歧义。更多细节请参考处理静态资源。

预处理器

你能够在建立项目的时候选择预处理器 (Sass/Less/Stylus)。若是当时没有选好，内置的 webpack 仍然会被预配置为能够完成全部的处理。你也能够手动安装相应的 webpack loader：

# Sass
npm install -D sass-loader node-sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus
复制代码

而后你就能够导入相应的文件类型，或在 *.vue 文件中这样来使用：

<style lang="scss">
$color: red;
</style>
复制代码

自动化导入

若是你想自动化导入文件 (用于颜色、变量、mixin……)，你可使用 style-resources-loader。这里有一个关于 Stylus 的在每一个单文件组件和 Stylus 文件中导入 ./src/styles/imports.styl 的例子：

// vue.config.js
const path = require('path')

module.exports = {
  chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
    types.forEach(type => addStyleResource(config.module.rule('stylus').oneOf(type)))
  },
}

function addStyleResource (rule) {
  rule.use('style-resource')
    .loader('style-resources-loader')
    .options({
      patterns: [
        path.resolve(__dirname, './src/styles/imports.styl'),
      ],
    })
}
复制代码

CSS Modules

你能够经过 <style module> 以开箱即用的方式在 *.vue 文件中使用 CSS Modules。

若是想在 JavaScript 中做为 CSS Modules 导入 CSS 或其它预处理文件，该文件应该以 .module.(css|less|sass|scss|styl) 结尾：

import styles from './foo.module.css'
// 全部支持的预处理器都同样工做
import sassStyles from './foo.module.scss'
复制代码

若是你想去掉文件名中的 .module，能够设置 vue.config.js 中的 css.modules 为 true：

// vue.config.js
module.exports = {
  css: {
    modules: true
  }
}
复制代码

若是你但愿自定义生成的 CSS Modules 模块的类名，能够经过 vue.config.js 中的 css.loaderOptions.css 选项来实现。全部的 css-loader 选项在这里都是支持的，例如 localIdentName 和 camelCase：

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      css: {
        localIdentName: '[name]-[hash]',
        camelCase: 'only'
      }
    }
  }
}
复制代码

webpack 相关

简单的配置方式

调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}
复制代码

该对象将会被 webpack-merge 合并入最终的 webpack 配置。

若是你须要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置以后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你能够直接修改配置，或者返回一个将会被合并的对象：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}
复制代码