vue 快速入门 系列 —— vue-cli 上
其他章节请看:
Vue CLI 4.x 上
在 vue loader 一文中我们已经学会从零搭建一个简单的,用于单文件组件开发的脚手架;本篇,我们将全面学习 vue-cli 这个官方的、成熟的脚手架。
分上下两篇进行,上篇主要是
”基础“,下篇主要是
“开发”
Tip:介绍顺序尽可能保持与官方文档一致
介绍
vue-cli 是一个基于 vue.js 进行快速开发的完整系统。
让我们专注在撰写应用上,而不必花好几天去纠结配置的问题。
Vue CLI 有几个独立的部分:
cli、
cli 服务和
cli 插件。
CLI
CLI (@vue/cli) 是一个全局安装的 npm 包,提供了终端里的
vue命令。
可以通过
vue create(下文将会详细介绍) 快速搭建一个新项目。
CLI 服务
CLI 服务 (
@vue/cli-service) 是一个开发环境依赖。它是一个 npm 包,局部安装在每个
@vue/cli创建的项目中。
CLI 服务是构建于
webpack和
webpack-dev-server之上的。它包含了:
- 加载其它 CLI 插件的核心服务;
- 一个针对绝大部分应用优化过的内部的 webpack 配置;
- 项目内部的 vue-cli-service 命令,提供
serve
、build
和inspect
命令。
CLI 插件
CLI 插件是向你的 Vue 项目提供可选功能的 npm 包,例如 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等。Vue CLI 插件的名字以
@vue/cli-plugin-(内建插件) 或
vue-cli-plugin-(社区插件) 开头,非常容易使用。
当你在项目内部运行 vue-cli-service 命令时,它会自动解析并加载 package.json 中列出的所有 CLI 插件。
插件可以作为项目创建过程的一部分,或在后期加入到项目中,也可以被归成一组可复用的预设(
preset)。
安装
全局安装 @vue/cli 这个包:
> npm install -g @vue/cli
你可以通过简单运行
vue,看看是否展示出了一份所有可用命令的帮助信息,来验证它是否安装成功。你还可以用这个命令来检查其版本是否正确。请看示例:
// 验证是否安装成功 > vue Usage: vue <command> [options] Options: -h, --help output usage information ...
// 查看版本 > vue --version @vue/cli 4.5.13
升级
如需升级全局的 Vue CLI 包,请运行:
npm update -g @vue/cli
若需升级项目中的 Vue CLI 相关模块(以
@vue/cli-plugin-或
vue-cli-plugin-开头),请在项目目录下运行
vue upgrade:
用法: upgrade [options] [plugin-name] (试用)升级 Vue CLI 服务及插件 选项: -t, --to <version> 升级 <plugin-name> 到指定的版本 -f, --from <version> 跳过本地版本检测,默认插件是从此处指定的版本升级上来 -r, --registry <url> 使用指定的 registry 地址安装依赖 --all 升级所有的插件 --next 检查插件新版本时,包括 alpha/beta/rc 版本在内 -h, --help 输出帮助内容
基础
快速原型开发
你可以使用
vue serve和
vue build命令对单个
*.vue文件进行快速原型开发,不过这需要先额外安装一个全局的扩展:
> npm install -g @vue/cli-service-global
vue serve的缺点就是它需要安装全局依赖,这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。
vue serve
你所需要的仅仅是一个 App.vue 文件。
请看示例:
创建目录 demo,新建 App.vue 文件:
// demo/App.vue <template> <h1>Hello!</h1> </template>
然后在这个 App.vue 文件所在的目录下运行:
demo> vue serve App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.103:8080/
访问
http://localhost:8080/,页面显示 Hello,并有热模块替换功能。
vue serve使用了和
vue create创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。
注:在此项目中写 less 提示需要
css-loader,编写的
postcss也未生效
color: lch(53 105 40);—— lch 是明天的 css 语法。
vue build
你也可以使用
vue build将目标文件构建成一个生产环境的包并用来部署:
demo> vue build / Building for production... File Size Gzipped dist\js\chunk-vendors.86166fc4.js 65.95 KiB 23.71 KiB dist\js\app.6d4e2596.js 1.79 KiB 0.89 KiB
dist目录中会生成
index.html,笔者在 dist 目录下运行静态文件服务器,在打开的页面中能看到
Hello!:
demo> cd dist dist> anywhere Running at http://192.168.85.1:8000/ Also running at https://192.168.85.1:8001/
vue build也提供了将组件构建成为一个库或一个 Web Components 组件的能力
创建一个项目
运行以下命令来创建一个新项目:
> vue create vue-hello-world
提示选取一个预设(preset)。
Vue CLI v4.5.13 ? Please pick a preset: Default ([Vue 2] babel, eslint) // 默认选项 vue2 Default (Vue 3) ([Vue 3] babel, eslint) // 默认选项 vue3 > Manually select features // 手动选择
Tip:笔者使用 powershell 终端,可以通过上下键来切换选项
默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。
如果选择 default 则会直接创建项目,创建项目包括 babel,eslin 这些工具,而 vue-router,vuex等其他依赖需要自己手动安装。
由于我们的项目需要 vue-router、vuex,所以就选择“手动选择”。
Vue CLI v4.5.13 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Choose Vue version // vue 的版本 (*) Babel // 代码编译 (*) TypeScript // ts (*) Progressive Web App (PWA) Support // 渐进式网页应用程序 (*) Router // 路由 - vue router (*) Vuex // 状态管理 - vuex (*) CSS Pre-processors // css预处理 (*) Linter / Formatter // 代码风格、格式校验 (*) Unit Testing // 单元测试 >(*) E2E Testing // 端对端测试
Tip:这里为了演示,所以选择全部(笔者使用空格键来选中或取消)
全部选中后,回车,会依次询问我们对应特性的一些具体需求,比如 vue 的版本、是否使用class风格的组件语法、路由是否使用 history 模式等等:
Vue CLI v4.5.13 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Choose a version of Vue.js that you want to start the project with (Use arrow keys) > 2.x 3.x
选择 vue 2,回车:
Vue CLI v4.5.13 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E ? Choose a version of Vue.js that you want to start the project with 2.x ? Use class-style component syntax? (Y/n)
这里询问的是是否使用class风格的组件语法,如果在项目中想要保持使用TypeScript的class风格的话,建议大家选择 y:
... ? Choose a version of Vue.js that you want to start the project with 2.x ? Use class-style component syntax? Yes ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
将 Babel 与 TypeScript 一起使用,选择 y:
... ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
路由是否使用 history 模式。因为 history 需要额外配置,所以这里选用 hash,输入n:
// CSS Pre-processors ... ? Use history mode for router? (Requires proper server setup for index fallback in production) No ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) > Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus
选择一种CSS预处理类型,笔者选用 less:
// Linter / Formatter ... ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less ? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only // 只进行报错提醒 ESLint + Airbnb config // airbnb 模式 ESLint + Standard config // 标准模式 ESLint + Prettier // prettier 模式 TSLint (deprecated) // 已弃用
选择 eslint 模式,笔者选标准模式:
... ? Pick a linter / formatter config: Standard ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit
选择校验时机,一般都会选择保存时校验,好及时做出调整,笔者选第一项:
// Unit Testing ... ? Pick additional lint features: Lint on save ? Pick a unit testing solution: (Use arrow keys) > Mocha + Chai Jes
选择单元测试解决方案,普遍用到最多的时
Mocha + chai,我们也选第一项。
// E2E Testing E2E(End To End) ... ? Pick a unit testing solution: Mocha ? Pick an E2E testing solution: (Use arrow keys) > Cypress (Chrome only) Nightwatch (WebDriver-based) WebdriverIO (WebDriver/DevTools based)
选择端对端测试的类型,默认回车:
// 额外选项 ... ? Pick an E2E testing solution: Cypress ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys) > In dedicated config files // 在专用配置文件中 In package.json
选择 Babel, ESLint 等配置存放位置,建议使用第一个(专用配置文件)
Tip: 如果选用第一项,例如 eslint 的配置就会单独存放在一个文件(.eslintrc.js)中;如果选第二项,该配置就会存放在 package.josn 中,而 package.json 是不能写注释,而且太多配置都写入 package.json 也不好维护
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (y/N)
是否保存成一个预设给以后项目使用。这里选 y,然后输入存储当前配置项的名称,例如 presetNameA
? Save this as a preset for future projects? Yes ? Save preset as:
随后就会创建完毕,并提示通过
npm run serve启动服务:
... � Generating README.md... � Successfully created project vue-hello-world. � Get started with the following commands: $ cd vue-hello-world $ npm run serve
> npm run serve... Time: 3055ms App running at: - Local: http://localhost:8080/ - Network: http://192.168.0.103:8080/
通过浏览器访问
http://localhost:8080/即可访问项目。
Tip:下次创建项目的时候就会看到刚保存的预设(presetNameA):
> vue create demo Vue CLI v4.5.13 ? Please pick a preset: (Use arrow keys) > presetNameA ([Vue 2] less, babel, typescript, pwa, router, vuex, eslint, unit-mocha, e2e-cypress) Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) Manually select features
插件
Vue CLI 使用了一套基于插件的架构。如果你查阅一个新创建项目的
package.json,就会发现依赖都是以
@vue/cli-plugin-开头的:
// vue-hello-world/package.json { "name": "vue-hello-world", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "test:unit": "vue-cli-service test:unit", "test:e2e": "vue-cli-service test:e2e", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "register-service-worker": "^1.7.1", "vue": "^2.6.11", "vue-class-component": "^7.2.3", "vue-property-decorator": "^9.1.2", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, "devDependencies": { "@types/chai": "^4.2.11", "@types/mocha": "^5.2.4", "@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/parser": "^4.18.0", "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-e2e-cypress": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-pwa": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-unit-mocha": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "@vue/eslint-config-standard": "^5.1.2", "@vue/eslint-config-typescript": "^7.0.0", "@vue/test-utils": "^1.0.3", "chai": "^4.1.2", "eslint": "^6.7.2", "eslint-plugin-import": "^2.20.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^4.2.1", "eslint-plugin-standard": "^4.0.0", "eslint-plugin-vue": "^6.2.2", "less": "^3.0.4", "less-loader": "^5.0.0", "typescript": "~4.1.5", "vue-template-compiler": "^2.6.11" } }
插件可以修改 webpack 的内部配置,也可以向
vue-cli-service注入命令。在项目创建的过程中,绝大部分列出的特性都是通过插件来实现的。
基于插件的架构使得 Vue CLI 灵活且可扩展。
下面我们将通过一个示例来讲解插件,首先新建项目 demo2(选择
Default):
// 选则`Default ([Vue 2] babel, eslint)`默认创建 > vue create demo2
Tip: 前面创建的项目(
vue-hello-world)是基于 typescript,演示起来不是很方便
vue add
每个 CLI 插件都会包含一个 (用来创建文件的) 生成器和一个 (用来调整 webpack 核心配置和注入命令的) 运行时插件。当你使用
vue create来创建一个新项目的时候,有些插件会根据你选择的特性被预安装好。如果你想在一个已经被创建好的项目中安装一个插件,可以使用 vue add 命令,例如
vue add axios
Tip:
vue add的设计意图是为了安装和调用 Vue CLI 插件。这不意味着替换掉普通的 npm 包。对于这些普通的 npm 包,你仍然需要选用包管理器。
下面我们通过安装 axios 来详细了解一下
vue add 插件和
npm install 包之间的区别:
> npm i axios
安装完成,项目中只有 package.json 会增加相应的依赖:
"dependencies": { + "axios": "^0.21.1", "core-js": "^3.6.5", "vue": "^2.6.11" },
将 axios 这个包删除,再次用
vue add安装 axios 插件:
// 删除 > npm r axios
> vue add axios WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first. ? Still proceed?
Tip: 由于会更改文件,所以会让你先提交代码
> vue add axios � Installing vue-cli-plugin-axios... ... Run `npm audit` for details. ✔ Successfully installed plugin: vue-cli-plugin-axios
告诉我们正在安装的包是:
vue-cli-plugin-axios
安装完成,通过
git status就能知道此命令修改的文件和内容:
demo2> git status On branch master Changes not staged for commit: (use "git add <file>..." to update what will be committed) (use "git restore <file>..." to discard changes in working directory) modified: package-lock.json modified: package.json modified: src/main.js Untracked files: (use "git add <file>..." to include in what will be committed) src/plugins/
// package.json "devDependencies": { "axios": "^0.18.0", "vue-cli-plugin-axios": "~0.0.4", },
// main.js import './plugins/axios'
// src/plugins/axios.js "use strict"; import Vue from 'vue'; import axios from "axios"; // Full config: https://github.com/axios/axios#request-config // axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || ''; // axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; let config = { // baseURL: process.env.baseURL || process.env.apiUrl || "" // timeout: 60 * 1000, // Timeout // withCredentials: true, // Check cross-site Access-Control }; const _axios = axios.create(config); _axios.interceptors.request.use( function(config) { // Do something before request is sent return config; }, function(error) { // Do something with request error return Promise.reject(error); } ); // Add a response interceptor _axios.interceptors.response.use( function(response) { // Do something with response data return response; }, function(error) { // Do something with response error return Promise.reject(error); } ); Plugin.install = function(Vue, options) { Vue.axios = _axios; window.axios = _axios; Object.defineProperties(Vue.prototype, { axios: { get() { return _axios; } }, $axios: { get() { return _axios; } }, }); }; Vue.use(Plugin) export default Plugin;
接着启动服务,eslint 报错,于是修改 eslint 配置绕过代码校验,再次重启服务。
// package.json "extends": [ "plugin:vue/essential", - "eslint:recommended" ],
在任意组件中即可使用 axios,例如在 App.vue 中使用:
<script> export default {} console.log(window.axios); </script>
浏览器控制台会输出:
ƒ wrap() { var args = new Array(arguments.length); for (var i = 0; i < args.length; i++) { args[i] = arguments[i]; } return fn.apply(thisArg, args); }
至此,axios 已经成功引入我们的项目,而且范文也已经就绪。
通过这个示例我们也就明白,vue 提供的这个插件比 npm 这种方式更友好,比如有范文。
vue add vuex
> vue add vuex � Installing @vue/cli-plugin-vuex... ...
安装 axios 对应的包是
vue-cli-plugin-axios,以
vue-cli-plugin-开头,属于第三方插件
而 vuex 对应的包是
@vue/cli-plugin-vuex,以
@vue/cli-plugin-开头。
使用 GUI 安装和管理插件
我们通过
vue ui命令使用 GUI 安装和管理插件。由于前面我们已经全局安装,所以在任意目录下运行即可:
> vue ui � Starting GUI... � Ready on http://localhost:8001
浏览器自动打开页面,并来到
Vue 项目管理器系统,导入项目(例如
vue-hello-world),你会可以看见如下几个菜单:
- 插件,会显示已安装的插件,以及通过
添加插件
就可以查找插件,在查找插件的页面,我们知道: 没有jquery
对应的插件 - 有
axios
对应的插件,将鼠标移到添加插件的图标上会显示:这个插件带有一个生成器,可以在项目中修改或增加文件
vue),开发依赖有哪些(例如
eslint)
配置 Vue 项目、
代码质量和纠错等
serve、
build、
lint等)。还有
inspect,能检查 webpack 配置,比如查看项目对应开发环境和生成环境的
webpack配置。
Preset
一个 Vue CLI preset 是一个包含创建新项目所需预定义选项和插件的 JSON 对象,让用户无需在命令提示中选择它们。
在
vue create过程中保存的 preset 会被放在你的 home 目录下的一个配置文件中 (
~/.vuerc)。你可以通过直接编辑这个文件来调整、添加、删除保存好的 preset。
笔者预设如下:
> cat ~/.vuerc { "useTaobaoRegistry": false, "latestVersion": "4.5.13", "lastChecked": 1622962273301, "presets": { "presetNameA": { "useConfigFiles": true, "plugins": { "@vue/cli-plugin-babel": {}, "@vue/cli-plugin-typescript": { "classComponent": true, "useTsWithBabel": true }, "@vue/cli-plugin-pwa": {}, "@vue/cli-plugin-router": { "historyMode": false }, "@vue/cli-plugin-vuex": {}, "@vue/cli-plugin-eslint": { "config": "standard", "lintOn": [ "save" ] }, "@vue/cli-plugin-unit-mocha": {}, "@vue/cli-plugin-e2e-cypress": {} }, "vueVersion": "2", "cssPreprocessor": "less" } } }
Preset 的数据会被插件生成器用来生成相应的项目文件。除了上述这些字段,你也可以为集成工具添加配置:
{ "useConfigFiles": true, "plugins": {...}, "configs": { "vue": {...}, "postcss": {...}, "eslintConfig": {...}, "jest": {...} } }
这些额外的配置将会根据
useConfigFiles的值被合并到
package.json或相应的配置文件中。例如,当
"useConfigFiles": true
的时候,configs的值将会被合并到
vue.config.js中。
你可以显式地指定用到的插件的版本:
{ "plugins": { "@vue/cli-plugin-eslint": { "version": "^3.0.0", // ... 该插件的其它选项 } } }
注意对于官方插件来说这不是必须的——当被忽略时,CLI 会自动使用 registry 中最新的版本。不过推荐为 preset 列出的所有第三方插件提供显式的版本范围。
CLI 服务
使用命令
在一个 Vue CLI 项目中,
@vue/cli-service安装了一个名为 vue-cli-service 的命令。你可以在
npm scripts中以
vue-cli-service、或者从终端中以
./node_modules/.bin/vue-cli-service访问这个命令。
上文我们创建的项目 demo2 的
package.json中的命令有:
{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" } }
可以通过
npm或
npx(最新版的 npm 应该已经自带) 执行命令:
> npm run serve
> npx vue-cli-service serve
Tip: 可以通过
vue ui命令使用 GUI 运行更多的特性脚本
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)。
除了通过命令行参数,你也可以使用 vue.config.js 里的 devServer 字段配置开发服务器
命令行参数 [entry] 将被指定为唯一入口,而非额外的追加入口。尝试使用 [entry] 覆盖 config.pages 中的 entry 将可能引发错误。
// 在服务器启动时打开浏览器 demo2> npx vue-cli-service serve --open // 或者指定 entry demo2> npx vue-cli-service serve --open ./src/main.js
Tip:终端可能因为 eslint 报错而终止编译,可以更改 eslint 配置。在项目根目录下新建
vue.config.js,重启服务即可。
// vue.config.js module.exports = { lintOnSave: true }
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 代码,并生成一个兼容老浏览器的包用来自动回退。
// 打包生成了两份:现代包和遗留包 demo2> npx vue-cli-service build --modern // 为生产构建遗留包... / Building legacy bundle for production... File Size Gzipped dist\js\chunk-vendors-legacy.7b12297e.js 117.56 KiB 40.92 KiB dist\js\app-legacy.853ea99d.js 5.15 KiB 1.84 KiB dist\css\app.fb0c6e1c.css 0.33 KiB 0.23 KiB // 省略了图像和其他类型的资产 Images and other types of assets omitted. // 为生产构建现代捆绑... - Building modern bundle for production... File Size Gzipped dist\js\chunk-vendors.1e2bb21b.js 92.78 KiB 32.14 KiB dist\js\app.d739a095.js 5.07 KiB 1.81 KiB dist\css\app.fb0c6e1c.css 0.33 KiB 0.23 KiB // 省略了图像和其他类型的资产 Images and other types of assets omitted.
--target
允许你将项目中的任何组件以一个库或 Web Components 组件的方式进行构建。--report
和--report-json
会根据构建统计生成报告,它会帮助你分析包中包含的模块们的大小。
demo2> npx vue-cli-service build --report | Building for production... File Size Gzipped dist\js\chunk-vendors.7b12297e.js 117.55 KiB 40.92 KiB dist\js\app.853ea99d.js 5.14 KiB 1.83 KiB dist\css\app.fb0c6e1c.css 0.33 KiB 0.23 KiB Images and other types of assets omitted.
会在 dist 目录中生成
report.html。
Tip: 如果你使用的是 vscode,只需要安装 Live Server 插件,即可右键通过 live server 查看
report.html,非常方便。
如果是
--report,则不会生成
report.html,而会生成
report.json。
vue-cli-service inspect
用法:vue-cli-service inspect [options] [...paths] 选项: --mode 指定环境模式 (默认值:development)
审查一个 Vue CLI 项目的
webpack config。请看示例:
// 提取出webpack开发配置,导出到 webpack.config.development.js 中 demo2> npx vue-cli-service inspect --mode development >> webpack.config.development.js // 提取出webpack生成配置 demo2> npx vue-cli-service inspect --mode production >> webpack.config.production.js
注:接下来我们学习过程中会参考这两个配置文件
查看所有的可用命令
有些 CLI 插件会向 vue-cli-service 注入额外的命令。例如 @vue/cli-plugin-eslint 会注入
vue-cli-service lint命令。你可以运行以下命令查看所有注入的命令:
demo2> npx vue-cli-service help 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.
也可以这样学习每个命令可用的选项:
npx vue-cli-service help [command]
缓存和并行处理
cache-loader
会默认为 Vue/Babel/TypeScript 编译开启。文件会缓存在node_modules/.cache
中——如果你遇到了编译方面的问题,记得先删掉缓存目录之后再试试看。
// demo2 中的缓存文件: demo2> dir .\node_modules\.cache\ Mode LastWriteTime Length Name ---- ------------- ------ ---- d----- 2021/8/11 11:30 babel-loader d----- 2021/8/11 11:30 eslint-loader d----- 2021/7/19 19:31 terser-webpack-plugin d----- 2021/8/11 11:30 vue-loader
- thread-loader 会在多核 CPU 的机器上为 Babel/TypeScript 转译开启。
Tip:虽然 package.json 中没有
cache-loader和
thread-loader,但 demo2/node_modules 中有。
Git Hook
在安装之后,@vue/cli-service 也会安装 yorkie,它会让你在 package.json 的 gitHooks 字段中方便地指定 Git hook:
{ "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{js,vue}": [ "vue-cli-service lint", "git add" ] } }
Tip:yorkie,fork 项目 husky,并做了一些改变,比如更改了从 package.json 中读取钩子的位置:
// before { "scripts": { "precommit": "foo" } }
// after { "gitHooks": { "pre-commit": "foo" } }
具体用法,请看示例(在demo2基础上进行):
// package.json { ... "gitHooks": { "pre-commit": "lint-staged" }, "lint-staged": { "*.{js,vue}": [ "vue-cli-service lint", "git add" ] } }
执行
git commit命令报错:
demo2> git commit -m 'xx' On branch master (use "git add <file>..." to include in what will be committed) src/a.js 'lint-staged' 不是内部或外部命令,也不是可运行的程序 或批处理文件。 pre-commit hook failed (add --no-verify to bypass)
安装依赖包:
// lint-staged - 对暂存的 git 文件运行 linter,不要让不好的代码溜进你的代码库! demo2> npm i -D lint-staged
接下来给 eslint 增加一个规则,然后在 a.js 中故意不遵守该规则:
// package.json { "eslintConfig": { "rules": { "no-console": "error" } }, }
// src/a.js let i = 1 console.log(i);
执行
git commit命令,验证不通过,终止提交:
// 需要先 git add demo2> git add src/a.js demo2> git commit -m 'xx' > running pre-commit hook: lint-staged ⚠ Some of your tasks use `git add` command. Please remove it from the config since all modifications made by tasks will be automatically added to the git commit index. [STARTED] Preparing... [SUCCESS] Preparing... [STARTED] Running tasks... [STARTED] Running tasks for *.{js,vue} [STARTED] vue-cli-service lint [FAILED] vue-cli-service lint [FAILED] [FAILED] vue-cli-service lint [FAILED] [SUCCESS] Running tasks... [STARTED] Applying modifications... [SKIPPED] Skipped because of errors from tasks. [STARTED] Reverting to original state because of errors... [SUCCESS] Reverting to original state because of errors... [STARTED] Cleaning up... [SUCCESS] Cleaning up... ✖ vue-cli-service lint: error: Unexpected console statement (no-console) at src\a.js:2:1: 1 | let i = 1 > 2 | console.log(i); | ^ 3 | 1 error found. pre-commit hook failed (add --no-verify to bypass)
Tip:Git 钩子,和其它版本控制系统一样,Git 能在特定的重要动作发生时触发自定义脚本。有两组这样的钩子:客户端的和服务器端的。客户端钩子由诸如提交和合并这样的操作所调用,而服务器端钩子作用于诸如接收被推送的提交这样的联网操作。你可以随心所欲地运用这些钩子。
// 项目 demo2 的 git hooks demo2> dir .\.git\hooks\ 目录: demo2\.git\hooks Mode LastWriteTime Length Name ---- ------------- ------ ---- -a---- 2021/7/19 9:11 870 applypatch-msg -a---- 2021/7/19 9:07 478 applypatch-msg.sample -a---- 2021/7/19 9:11 854 commit-msg -a---- 2021/7/19 9:07 896 commit-msg.sample -a---- 2021/7/19 9:07 4655 fsmonitor-watchman.sample -a---- 2021/7/19 9:11 874 post-applypatch -a---- 2021/7/19 9:11 866 post-checkout -a---- 2021/7/19 9:11 858 post-commit -a---- 2021/7/19 9:11 854 post-merge -a---- 2021/7/19 9:11 862 post-receive -a---- 2021/7/19 9:11 862 post-rewrite -a---- 2021/7/19 9:11 858 post-update -a---- 2021/7/19 9:07 189 post-update.sample -a---- 2021/7/19 9:11 870 pre-applypatch -a---- 2021/7/19 9:07 424 pre-applypatch.sample -a---- 2021/7/19 9:11 858 pre-auto-gc -a---- 2021/7/19 9:11 854 pre-commit -a---- 2021/7/19 9:07 1643 pre-commit.sample -a---- 2021/7/19 9:07 416 pre-merge-commit.sample -a---- 2021/7/19 9:11 846 pre-push -a---- 2021/7/19 9:07 1348 pre-push.sample -a---- 2021/7/19 9:11 854 pre-rebase -a---- 2021/7/19 9:07 4898 pre-rebase.sample -a---- 2021/7/19 9:11 858 pre-receive -a---- 2021/7/19 9:07 544 pre-receive.sample -a---- 2021/7/19 9:11 913 prepare-commit-msg -a---- 2021/7/19 9:07 1492 prepare-commit-msg.sample -a---- 2021/7/19 9:11 878 push-to-checkout -a---- 2021/7/19 9:11 886 sendemail-validate -a---- 2021/7/19 9:11 838 update -a---- 2021/7/19 9:07 3635 update.sample
配置时无需 Eject
通过 vue create 创建的项目无需额外的配置就已经可以跑起来了。插件的设计也是可以相互共存的,所以绝大多数情况下,你只需要在交互式命令提示中选取需要的功能即可。
不过我们也知道满足每一个需求是不太可能的,而且一个项目的需求也会不断改变。通过 Vue CLI 创建的项目让你无需 eject 就能够配置工具的几乎每个角落。
其他章节请看:
- 快速入门vue-cli配置
- vue 快速入门 系列 —— vue 的基础应用(下)
- Vue学习系列 -- vue-router 快速入门
- 快速入门vue-cli配置
- vue 快速入门 系列 —— vue loader 下
- 快速入门vue-cli配置
- vue 快速入门 系列 —— 侦测数据的变化 - [基本实现]
- vue 快速入门 系列 —— vue loader 扩展
- vue 快速入门与最佳实践(vue-cli, webpack, vue 最佳实践)
- 快速入门vue-cli配置
- vue 快速入门 系列 —— 虚拟 DOM
- vue 快速入门 系列 —— 初步认识 vue
- vue 快速入门 系列 —— vue 的基础应用(上)
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
- 快速入门vue-cli配置
- 快速入门vue-cli配置
- 快速入门vue-cli配置
- 快速入门vue-cli配置
- vue快速入门(二):vue-cli + element配置 , 快速构建vue项目
- 快速入门vue-cli配置