换个角度学习 VUE CLI 3

2018-07-22 本文已影响110人 VioletJack

简介

vue cli 3 是一个类似于 create-react-app 的可以用例命令行快速配置和生成一个 vue 项目。]vue cli 3 与之前版本最大的几个变化变化是：

选择项目插件界面更友好了。如选择 eslint 类型、是否需要 router 和 vuex 等行为。
实现了界面化创建和操作项目，使用 $ vue ui 启动教授架页面。
将常用配置项进行了封装，统一使用 vue-config.js 来进行配置。
给出 vue-cli-plugin 插件来快速改变项目目录结构和Webpack配置。

可以说 vue cli 3 是基于之前脚手架的大幅优化和改进，并提供了各种贴心的功能。真正实现一键生成、一键调试、一键发布这些快捷的行为。方便开发者将注意力更聚焦于业务层面。

了解 vue cli

我们使用问答的方式来有针对性的解决 vue cli 相关问题。

vue cli 可以具体做些什么？

具体细节建议去仔细看文档！下面列举出一些可以做的行为：

便捷的创建项目
添加 vue 插件快速配置项目
启动服务调试开发
浏览器兼容
HTML和静态资源 assets 的处理
配置 CSS
配置 Webpack
配置环境变量和环境模式
针对不同环境进行打包
发布项目

就这么多，我觉得工作中常用的都已经涵盖进去了。

vue cli 的插件是什么？

插件其实是一个 npm 上的小项目。使用 $ vue add 命令去执行下载插件包，并且调用插件包去修改 Webpack 配置并执行一些 command 命令。add 行为可以拆开为两部 —— 安装和调用，以 @vue/cli-plugin-eslint 为例：

npm install @vue/cli-plugin-eslint --save-dev
vue invoke  @vue/eslint

我们也可以自行开发 vue 插件，具体请看文档。
简单说下插件安装
注意安装插件是有简写的，到安装的时候会补全插件名称。简写方式如下：

# 简写
vue add @vue/eslint
# 全名
vue add @vue/cli-plugin-eslint

# 简写
vue add apollo
# 全名
vue add vue-cli-plugin-apollo

而 router 和 vuex 插件比较特殊，它没有相应的插件，所以使用 add 的形式有所不同。

vue add router
vue add vuex

以上两个命令会为项目安装 vue-router 和 vuex，并且改变项目目录结构以便更快的进行路由和状态管理的开发操作。

vue cli 的插件在哪里找？都有哪些官方插件？源码在哪里？

其实这些插件是放在了 npm 中的，和其他模块类似。下面是从尤大的npm中找到的插件包：

@vue/cli-plugin-babel
@vue/cli-plugin-e2e-cypress
@vue/cli-plugin-e2e-nightwatch
@vue/cli-plugin-eslint
@vue/cli-plugin-typescript
@vue/cli-plugin-pwa
@vue/cli-plugin-unit-mocha
@vue/cli-plugin-unit-jest
@vue/cli-service 这个项目存放了 vue add router 和 vue add vuex 命令的模板项目。

这些插件项目源码都包含在 vue-cli 项目中。
所以，插件包这东西得从 npm 找，或者自己写插件！

vue cli 搭建的项目中如何配置 sass、stylus？

在Work with CSS中已有答案，在项目中调用：

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

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

即可实现对 stylus 这类 CSS 语法的支持。

vue cli 的 vue.config.js 具体能做什么？

用新的脚手架搭建的项目少了 webpack.config.js 文件和其他一些配置文件，那么我们如何修改相关的配置呢？答案就是 vue.config.js。vue.config.js 可以配置项如下：

baseUrl —— 域名，可根据环境变量来配置不同域名。
outputDir —— 项目导出文件夹
assetsDir —— 静态资源文件夹
pages —— 多页应用中配置各个页面入口文件
lintOnSave —— eslint 是否在保存行为的时候检查代码。默认为 warning，如果配置为 error 则有错误直接报 eslint 错误。
runtimeCompiler —— 是否使用 runtime 版本的 vue 文件。设为 true 可以使用 template 配置项目。
transpileDependencies —— 用于修改 babel 配置
productionSourceMap —— 如果不需要产品的 source map，设为 false 可以加速构建。
configWebpack —— 用于配置 Webpack，将与默认的 Webpack 配置合并。
chainWebpack —— Webpack链，用于配置 loader rules 和 plugins
css.modules —— css 模块化
css.extract —— 从组件中取出 css
css.sourceMap —— 是否需要 css 的 sourceMap，会影响构建效果。
css.loaderOptions —— 配置 CSS 相关 loader，如 sass-loader、stylus-loader。
devServer —— 开发服务器配置
devServer.proxy —— 开发服务器代理配置
parallel —— 是否对 Babel 或 TypeScript 使用 thread-loader
pwa —— pwa 配置
pluginOptions —— 这是一个不经过任何模式验证的对象，因此它可以用于将任意选项传递给第三方插件。比如写一个 options.pluginOptions.foo 插件配置对象随时调用。

如何配置 Webpack？

正如我们上面提到的，使用 vue.config.js 的 configWebpack 和 chainWebpack 来配置 Webpack。请参考 Working With Webpack。
如果想查看 Webpack 具体配置结果可使用以下命令导出具体配置：

vue inspect > output.js

更多 Webpack 检查方式在这里

vue cli 的 UI 怎么玩？

使用命令行启动 vue ui 项目：

vue ui

启动脚手架图形化项目并自动打开 http://localhost:8000 页面，在这个页面中可以进行插件安装、依赖库查看、命令执行、全局配置、项目导入等操作。很有意思，值得一玩。

界面详情

vue-cli 源码简单介绍

vue cli 项目内容还是很多的，大概包括了：

cli
cli service
vue plugin
utils
ui（就是个 Vue 单页应用）
eslint config

核心代码就在 cli 目录下了~

对于 cmd 行为的定义，源码中使用了 commander.js 来具体实现。并且调用各种 js 来命令行对应的具体功能。

看看 vue add 的具体步骤

async function add (pluginName, options = {}, context = process.cwd()) {
  // 安装 vue-router 和 vuex
  if (/^(@vue\/)?router$/.test(pluginName)) {
    return addRouter(context)
  }
  if (/^(@vue\/)?vuex$/.test(pluginName)) {
    return addVuex(context)
  }
  
  const packageName = resolvePluginId(pluginName)

  log()
  log(`📦  Installing ${chalk.cyan(packageName)}...`)
  log()

  const packageManager = loadOptions().packageManager || (hasProjectYarn(context) ? 'yarn' : 'npm')
  // 安装插件
  await installPackage(context, packageManager, null, packageName)

  stopSpinner()

  log()
  log(`${chalk.green('✔')}  Successfully installed plugin: ${chalk.cyan(packageName)}`)
  log()
  // 获取插件
  const generatorPath = resolveModule(`${packageName}/generator`, context)
  if (generatorPath) {
    // 调用插件
    invoke(pluginName, options, context)
  } else {
    log(`Plugin ${packageName} does not have a generator to invoke`)
  }
}

和我在介绍插件时说的一样，add 执行了安装和调用两个步骤来添加插件~.
另外比较有意思的是这个 chalk 模块，可以让 cmd 打印出不同颜色的 log。我们在 cmd 中看到五颜六色的命令行就靠它了。

总结下脚手架项目

看了下源码，从我的认知出发说下脚手架的具体做法。

使用 commander.js 来定义命令行。
使用命令行执行脚本进行相关操作。
使用 node 的 log 来展示安装情况、进度，甚至是做一些选择操作。
搭建项目其实也是从服务器下载来的模板项目。
vue ... 命令本质上就是执行脚本的行为。
脚手架可以使用 npm 和 yarn 帮我们安装好依赖包。
五颜六色的 log 来自于 chalk 模块

最后

至此，我们了解了 vue-cli 的丰富的各种功能的使用和原理，也简单介绍了类似这种脚手架的创建形式_{下次让我们自己搭个脚手架玩玩}

最后打个内推广告

链家上海研发中心招聘前端、后端、测试，主要负责贝壳找房社区服务相关的开发工作。
机会不多，需要内推机会的请将简历发送至 dingxiaojie001@ke.com。