├── LICENSE ├── README.md ├── vue-babel-preset-app └── README.md ├── vue-class-component └── README.md ├── vue-cli-init └── README.md ├── vue-cli-plugin-babel └── README.md ├── vue-cli-plugin-e2e-cypress └── README.md ├── vue-cli-plugin-e2e-nightwatch └── README.md ├── vue-cli-plugin-eslint └── README.md ├── vue-cli-plugin-pwa └── README.md ├── vue-cli-plugin-typescript └── README.md ├── vue-cli-plugin-unit-jest └── README.md ├── vue-cli-plugin-unit-mocha └── README.md ├── vue-cli-service-global └── README.md ├── vue-component-compiler-utils └── README.md ├── vue-style-loader └── README.md ├── vue-template-compiler └── README.md ├── vue-web-component-wrapper └── README.md └── vuex-router-sync └── README.md /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 勾三股四 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue Docs 中文文档翻译合集 2 | 3 | 这里会放置所有 Vue 官方维护的库的中文文档的链接，以及官方未提供多语言支持的库文档的中文翻译 (通常这样的库都比较小或不够稳定，故集中放这里)。 4 | 5 | ## 目录 6 | 7 | ### 官方维护的中文文档 8 | 9 | * [Vue 中文官网](https://cn.vuejs.org/) 10 | * [Vue Loader](https://vue-loader.vuejs.org/zh/) 11 | * [Vuex](https://vuex.vuejs.org/zh/) 12 | * [Vue Router](https://router.vuejs.org/zh/) 13 | * [Vue Test Utils](https://vue-test-utils.vuejs.org/zh/) 14 | * [Vue SSR](https://ssr.vuejs.org/zh/) 15 | * [Vue CLI](https://cli.vuejs.org/zh/) 16 | * [vue-rx](https://github.com/vuejs/vue-rx/blob/master/README-CN.md) 17 | * [VuePress](https://vuepress.vuejs.org/zh/) 18 | 19 | ### 集中放置在该仓库的文档 20 | 21 | * [@vue/cli-init](./vue-cli-init/README.md) - [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-init/README.md) 22 | * [@vue/cli-service-global](./vue-cli-service-global/README.md) - [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-service-global/README.md) 23 | * [@vue/cli-plugin-babel](./vue-cli-plugin-babel/README.md) - [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-babel/README.md) 24 | * [@vue/babel-preset-app](./vue-babel-preset-app/README.md) - [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/babel-preset-app/README.md) 25 | * [@vue/cli-plugin-eslint](./vue-cli-plugin-eslint/README.md) - [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-eslint/README.md) 26 | * [@vue/cli-plugin-typescript](./vue-cli-plugin-typescript/README.md) - [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-typescript/README.md) 27 | * [@vue/cli-plugin-pwa](./vue-cli-plugin-pwa/README.md) - [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-pwa/README.md) 28 | * [@vue/cli-plugin-unit-jest](./vue-cli-plugin-unit-jest/README.md) - [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-unit-jest/README.md) 29 | * [@vue/cli-plugin-unit-mocha](./vue-cli-plugin-unit-mocha/README.md) - [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-unit-mocha/README.md) 30 | * [@vue/cli-plugin-e2e-cypress](./vue-cli-plugin-e2e-cypress/README.md) - [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-e2e-cypress/README.md) 31 | * [@vue/cli-plugin-e2e-nightwatch](./vue-cli-plugin-e2e-nightwatch/README.md) - [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-e2e-nightwatch/README.md) 32 | * [@vue/web-component-wrapper](./vue-web-component-wrapper/README.md) - [英文原版](https://github.com/vuejs/vue-web-component-wrapper/) 33 | * [@vue/component-compiler-utils](./vue-component-compiler-utils/README.md) - [英文原版](https://github.com/vuejs/component-compiler-utils/) 34 | * [Vue Template Compiler](./vue-template-compiler/README.md) - [英文原版](https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler/README.md) 35 | * [Vue Class Component](./vue-class-component/README.md) - [英文原版](https://github.com/vuejs/vue-class-component/) 36 | * [Vuex Router Sync](./vuex-router-sync/README.md) - [英文原版](https://github.com/vuejs/vuex-router-sync/) 37 | * [Vue Style Loader](./vue-style-loader/README.md) - [英文原版](https://github.com/vuejs/vue-style-loader) 38 | 39 | ## 欢迎参与贡献 40 | 41 | 遵循 Vue 中文官网的翻译注意事项，请移步[这里](https://github.com/vuejs/cn.vuejs.org/wiki)参阅。 42 | -------------------------------------------------------------------------------- /vue-babel-preset-app/README.md: -------------------------------------------------------------------------------- 1 | # @vue/babel-preset-app 2 | 3 | [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/babel-preset-app/README.md) 4 | 5 | 这是所有 Vue CLI 项目默认的 Babel 预设选项。**注意：这个预设选项是仅用于通过 Vue CLI 创建的项目，并没有考虑外部的用例。** 6 | 7 | ## 包含的特性 8 | 9 | ### [@babel/preset-env](https://new.babeljs.io/docs/en/next/babel-preset-env.html) 10 | 11 | `preset-env` 会基于你的浏览器目标自动决定要运用的语法转换和 polyfill。查阅[浏览器兼容性](https://cli.vuejs.org/zh/guide/browser-compatibility.html)章节了解更多。 12 | 13 | - `modules: false` 14 | - 在 Jest 测试中会自动设置为 `'commonjs'` 15 | - [`useBuiltIns: 'usage'`](#usebuiltins) 16 | - `targets` 的判断规则： 17 | - 为浏览器构建时使用 `package.json` 中的 `browserslist` 字段 18 | - 在 Node.js 中运行测试时设置为 `{ node: 'current' }` 19 | - 默认包含 `Promsie` polyfill，这样它们也可以用于非转译依赖 (只用于必要的环境) 20 | 21 | ### Stage 3 及以下 22 | 23 | 只支持下列 stage 3 及以下的特性 (object rest spread 作为 `preset-env` 的一部分已经被支持)： 24 | 25 | - [Dynamic Import Syntax](https://github.com/tc39/proposal-dynamic-import) 26 | - [Proposal Class Properties](https://babeljs.io/docs/en/next/babel-plugin-proposal-class-properties.html) 27 | - [Proposal Decorators (legacy)](https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html) 28 | 29 | 如果你需要更多的 stage 3 或以下的特性，可自行安装配置。 30 | 31 | ### Vue JSX 语法支持 32 | 33 | - [@babel/plugin-syntax-jsx](https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-jsx) 34 | - [babel-plugin-transform-vue-jsx](https://github.com/vuejs/babel-plugin-transform-vue-jsx) 35 | - ~~[babel-plugin-jsx-event-modifiers](https://github.com/nickmessing/babel-plugin-jsx-event-modifiers)~~ (在 Babel 7 修复之前暂时不可用) 36 | - ~~[babel-plugin-jsx-v-model](https://github.com/nickmessing/babel-plugin-jsx-v-model)~~ (在 Babel 7 修复之前暂时不可用) 37 | 38 | ### [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-runtime) 39 | 40 | `transform-runtime` 会避免在每个文件里内联帮助代码 (helper)。因为 polyfill 会被 `babel-preset-env` 处理，所以该选型只对帮助代码有效。 41 | 42 | ## 选项 43 | 44 | - 支持所有来自 [@babel/preset-env](https://babeljs.io/docs/en/next/babel-preset-env.html) 的选型，还为部分选型提供了更智能的默认值。 45 | 46 | ### modules 47 | 48 | - 默认值： 49 | - `false` 当用 webpack 构建时 50 | - `'commonjs'` 当在 Jest 中运行测试时 51 | 52 | 为 `babel-preset-env` 显性设置 `modules` 选项。请查阅 [babel-preset-env 文档](https://github.com/babel/babel/tree/master/packages/babel-preset-env#modules) 了解更多详情。 53 | 54 | ### targets 55 | 56 | - 默认值： 57 | - 当为浏览器构建时，由 `package.json` 中的 `browserslist` 字段决定 58 | - 在 Node.js 中运行测试时设置为 `{ node: 'current' }` 59 | 60 | 为 `babel-preset-env` 显性设置 `targets` 选项。请查阅 [babel-preset-env 文档](https://github.com/babel/babel/tree/master/packages/babel-preset-env#targets) 了解更多详情。 61 | 62 | ### useBuiltIns 63 | 64 | - 默认值：`'usage'` 65 | 66 | 为 `babel-preset-env` 显性设置 `useBuiltIns` 选项。 67 | 68 | 默认值是 `'usage'`，它会基于被转译代码的使用情况导入相应的 polyfill。例如，你在代码里使用了 `Object.assign`，那么如果你的目标环境不支持它，对应的 polyfill 就会被自动导入。 69 | 70 | 如果你在构建一个库或 web component 而不是一个应用，可能需要将其设置为 `false`，让使用它的应用来决定这些 polyfill。 71 | 72 | 注意用法侦测并不适用于你的依赖 (它们默认被 `cli-plugin-babel` 排除在外)。如果你的一个依赖需要 polyfill，可以选择： 73 | 74 | 1. **如果这个依赖是用一个你的目标环境不支持的 ES 版本撰写的：**请把那个依赖添加到 `vue.config.js` 的 `transpileDependencies` 选项中。它会为这个依赖开启语法转换和基于用法的 polyfill 侦测。 75 | 76 | 2. **如果这个依赖交付 ES5 代码并显式地列出了需要的 polyfill：**你可以使用 [polyfills](#polyfills) 选项为这个预设选项预包含所需要的 polyfill。 77 | 78 | 3. **如果这个依赖交付 ES5 代码，但是使用了没有显性列出的 ES6+ 特性的 polyfill 需求 (例如 Vuetify)：**请使用 `useBuiltIns: 'entry'` 并将 `import '@babel/polyfill'` 添加到你的入口文件中。它会基于你的 `browserlist` 目标导入**所有的** polyfill，所以你无需再担心任何依赖中的 polyfill，不过因为它加入了一些未被使用的 polyfill，最终的包体积会增加。 79 | 80 | 查阅 [@babel/preset-env 文档](https://new.babeljs.io/docs/en/next/babel-preset-env.html#usebuiltins-usage)了解更多细节。 81 | 82 | ### polyfills 83 | 84 | - 默认值：`['es6.array.iterator', 'es6.promise', 'es6.object.assign', 'es7.promise.finally']` 85 | 86 | 当使用 `useBuiltIns: 'usage'` 的时候预包含的一份 [core-js](https://github.com/zloirock/core-js) polyfill 的列表。**如果你的目标环境不需要，这些 polyfill 会自动被排除。** 87 | 88 | 当你拥有未被 Babel 处理但是需要特定的 polyfill 的第三方依赖时 (例如 Axios 和 Vuex 需要 Promise 的支持) 请使用这个选项。 89 | 90 | ### jsx 91 | 92 | - 默认值：`true`。设为 `false` 可以禁用 JSX 支持。 93 | 94 | ### loose 95 | 96 | - 默认值：`false`。设置为 `true` 时会生成更高效但少一些规范性的代码。 97 | 98 | ### entryFiles 99 | 100 | - 默认值：`[]` 101 | 102 | 为多页面仓库使用 `entryFiles` 来确保每个入口文件都注入了 polyfill。 103 | -------------------------------------------------------------------------------- /vue-class-component/README.md: -------------------------------------------------------------------------------- 1 | # Vue Class Component 2 | 3 | [英文原版](https://github.com/vuejs/vue-class-component/) 4 | 5 | > 为撰写 class 形式的 Vue 组件而实现的 ECMAScript / TypeScript 装饰器 (decorator)。 6 | 7 | [![npm](https://img.shields.io/npm/v/vue-class-component.svg)](https://www.npmjs.com/package/vue-class-component) 8 | 9 | ### 使用 10 | 11 | **要求的环境**：[ECMAScript stage 1 的装饰器](https://github.com/wycats/javascript-decorators/blob/master/README.md). 12 | 如果你使用 Babel，则需要 [babel-plugin-transform-decorators-legacy](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy)。 13 | 如果你使用 TypeScript，请开启 `--experimentalDecorators` 开关。 14 | 15 | > 目前还不支持 stage 2 的装饰器，因为主流的语法转换器还是会将内容转换为老版本的装饰器。 16 | 17 | 注意事项： 18 | 19 | 1. `methods` 可以直接声明为 class 成员。 20 | 21 | 2. 计算属性可以声明为 class 属性访问器。 22 | 23 | 3. 初始的 `data` 可以声明为 class 属性 (如果你使用 Babel，则需要 [babel-plugin-transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/))。 24 | 25 | 4. `data`、`render` 以及所有 Vue 的生命周期钩子也可以直接声明为 class 成员方法，但是你无法在其所在实例中直接调用它们。在你声明自定义方法的时候也应该回避这些保留的名字。 26 | 27 | 5. 其它选项可以传入修饰器函数。 28 | 29 | ### 示例 30 | 31 | 接下来的例子是在 Babel 中写的。TypeScript 的版本[在项目的 `example` 目录中](https://github.com/vuejs/vue-class-component/blob/master/example/src/App.vue)。 32 | 33 | ``` vue 34 | 44 | 45 | 77 | ``` 78 | 79 | 另外 [vue-property-decorators](https://github.com/kaorun343/vue-property-decorator) 提供了 `@prop` 和 `@watch` 装饰器，也许你也会感兴趣。 80 | 81 | ### 使用混入 (Mixin) 82 | 83 | vue-class-component 提供了 `mixins` 辅助函数，能够以 class 的形式使用[混入](https://cn.vuejs.org/v2/guide/mixins.html)。通过 `mixins` 辅助行数，TypeScript 可以推导出混入的类型并继承到组件类型上。 84 | 85 | 声明一个混入的例子： 86 | 87 | ``` js 88 | // mixin.js 89 | import Vue from 'vue' 90 | import Component from 'vue-class-component' 91 | 92 | // 你可以像声明一个组件一样声明混入。 93 | @Component 94 | export default class MyMixin extends Vue { 95 | mixinValue = 'Hello' 96 | } 97 | ``` 98 | 99 | 使用一个混入的例子： 100 | 101 | ``` js 102 | import Component, { mixins } from 'vue-class-component' 103 | import MyMixin from './mixin.js' 104 | 105 | // 使用 `mixins` 辅助函数代替 `Vue`。 106 | // `mixins` 可以接收任何数量的参数。 107 | @Component 108 | export class MyComp extends mixins(MyMixin) { 109 | created () { 110 | console.log(this.mixinValue) // -> Hello 111 | } 112 | } 113 | ``` 114 | 115 | ### 创建自定义装饰器 116 | 117 | 你可以通过创建你自己的装饰器扩展这个库的功能。vue-class-component 提供了用来创建自定义修饰器的 `createDecorator` 辅助函数。`createDecorator` 接收一个回调函数作为其第一个参数，而该回调函数将会接收以下参数： 118 | 119 | - `options`：Vue 组件选项对象。对这个对象的改动讲影响到提供的组件。 120 | - `key`：该修饰符应用的属性或方法的键名。 121 | - `parameterIndex`：被装饰的参数的索引值，如果该自定义装饰器作为一个参数被使用时。 122 | 123 | 创建 `NoCache` 装饰器的示例： 124 | 125 | ``` js 126 | // decorators.js 127 | import { createDecorator } from 'vue-class-component' 128 | 129 | export const NoCache = createDecorator((options, key) => { 130 | // 组件选项应该传递给回调函数 131 | // 且对选项对象的更新而影响到该组建 132 | options.computed[key].cache = false 133 | }) 134 | ``` 135 | 136 | ``` js 137 | import { NoCache } from './decorators' 138 | 139 | @Component 140 | class MyComp extends Vue { 141 | // 这个计算属性不会被缓存 142 | @NoCache 143 | get random () { 144 | return Math.random() 145 | } 146 | } 147 | ``` 148 | 149 | ### 添加自定义钩子 150 | 151 | 如果你使用了相同的 Vue 组件，比如 Vue Router，你可能希望 class 形式的组件能够解析它们提供的钩子。在这种情况下，`Component.registerHooks` 允许你注册每个钩子： 152 | 153 | ```js 154 | // class-component-hooks.js 155 | import Component from 'vue-class-component' 156 | 157 | // 以他们的名字注册路由器钩子 158 | Component.registerHooks([ 159 | 'beforeRouteEnter', 160 | 'beforeRouteLeave', 161 | 'beforeRouteUpdate' // for vue-router 2.2+ 162 | ]) 163 | ``` 164 | 165 | ```js 166 | // MyComp.js 167 | import Vue from 'vue' 168 | import Component from 'vue-class-component' 169 | 170 | @Component 171 | class MyComp extends Vue { 172 | // 这个 class 组件现在处理了 beforeRouteEnter 173 | // 和 beforeRouteLeave 作为 Vue Router 的钩子 174 | beforeRouteEnter (to, from, next) { 175 | console.log('beforeRouteEnter') 176 | next() // 需要被调用以确认完成该导航 177 | } 178 | 179 | beforeRouteLeave (to, from, next) { 180 | console.log('beforeRouteLeave') 181 | next() // 需要被调用以确认完成该导航 182 | } 183 | } 184 | ``` 185 | 186 | 注意你需要在组件定义完成之前注册钩子。 187 | 188 | ```js 189 | // main.js 190 | 191 | // 确认在导入任何组件之前进行注册 192 | import './class-component-hooks' 193 | 194 | import Vue from 'vue' 195 | import MyComp from './MyComp' 196 | 197 | new Vue({ 198 | el: '#app', 199 | components: { 200 | MyComp 201 | } 202 | }) 203 | ``` 204 | 205 | ### Class 属性的注意事项 206 | 207 | vue-class-component 会通过在底层将原本构造函数实例化来收集 class 的属性作为 Vue 实例数据。当我们可以像原生 class 一样定义实例数据时，我们有时需要知道它是如何工作的。 208 | 209 | #### 属性里的 `this` 的值 210 | 211 | 如果你定义了一个箭头函数作为一个 class 的属性并在其中访问 `this`，它将不会正常工作。这是因为当初始化 class 属性的时候，`this` 只是一个 Vue 实例的代理对象： 212 | 213 | ```js 214 | @Component 215 | class MyComp extends Vue { 216 | foo = 123 217 | 218 | bar = () => { 219 | // 不会如预期更新属性。 220 | // `this` 的值不是真正的 Vue 实例。 221 | this.foo = 456 222 | } 223 | } 224 | ``` 225 | 226 | 在那种情况下，你可以简单的定义一个方法，而不是一个 class 属性，因为 Vue 会自动绑定该实例： 227 | 228 | ```js 229 | @Component 230 | class MyComp extends Vue { 231 | foo = 123 232 | 233 | bar () { 234 | // Correctly update the expected property. 235 | this.foo = 456 236 | } 237 | } 238 | ``` 239 | 240 | #### `undefined` 将不会被响应 241 | 242 | 为了让 Babel 和 TypeScript 的装饰器行为保持一致，如果一个属性的初始值是 `undefined`，那么 vue-class-component 不会使其产生响应性。你应该用 `null` 作为初始值替而代之，或使用 `data` 钩子来初始化 `undefined` 的属性。 243 | 244 | ```js 245 | @Component 246 | class MyComp extends Vue { 247 | // 不会有响应性 248 | foo = undefined 249 | 250 | // 会有响应性 251 | bar = null 252 | 253 | data () { 254 | return { 255 | // 会有响应性 256 | baz: undefined 257 | } 258 | } 259 | } 260 | ``` 261 | 262 | ### 构建该示例 263 | 264 | ``` bash 265 | $ npm install && npm run example 266 | ``` 267 | 268 | ### 答疑 269 | 270 | 如有相关问题请移步[官方论坛](http://forum.vuejs.org)或[社区聊天室](https://chat.vuejs.org/)。仓库本身的 issue 列表**仅仅**会受理 bug 报告和新特性请求。 271 | 272 | ### 证书 273 | 274 | [MIT](http://opensource.org/licenses/MIT) 275 | -------------------------------------------------------------------------------- /vue-cli-init/README.md: -------------------------------------------------------------------------------- 1 | # @vue/cli-init 2 | 3 | [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-init/README.md) 4 | 5 | > 为 `@vue/cli` 添加 `vue init` 命令 6 | 7 | 这只是老版 `vue-cli@2.x` 的一个简单的别名。 8 | -------------------------------------------------------------------------------- /vue-cli-plugin-babel/README.md: -------------------------------------------------------------------------------- 1 | # @vue/cli-plugin-babel 2 | 3 | [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-babel/README.md) 4 | 5 | > vue-cli 的 babel 插件 6 | 7 | ## 配置 8 | 9 | 默认使用 Babel 7 + `babel-loader` + [@vue/babel-preset-app](../vue-babel-preset-app/README.md)，但是可以通过 `babel.config.js` 配置使用任何其它 Babel 预设选项或插件。 10 | 11 | 默认情况下，`babel-loader` 会排除 `node_modules` 依赖内部的文件。如果希望显性编译一个依赖的模块，你需要将其添加入 `vue.config.js` 中的 `transpileDependencies` 选项： 12 | 13 | ``` js 14 | module.exports = { 15 | transpileDependencies: [ 16 | // 可以是字符串或正则表达式 17 | 'my-dep', 18 | /other-dep/ 19 | ] 20 | } 21 | ``` 22 | 23 | ## 缓存 24 | 25 | [cache-loader](https://github.com/webpack-contrib/cache-loader) 默认开启，被缓存的东西存储在 `/node_modules/.cache/babel-loader`。 26 | 27 | ## 并行执行 28 | 29 | [thread-loader](https://github.com/webpack-contrib/thread-loader) 会在多核机器上默认开启。你可以在 `vue.config.js` 中设置 `parallel: false` 将其关闭。 30 | 31 | ## 在已创建的项目中安装 32 | 33 | ``` sh 34 | vue add @vue/babel 35 | ``` 36 | 37 | ## 注入的 webpack-chain 规则 38 | 39 | - `config.rule('js')` 40 | - `config.rule('js').use('babel-loader')` 41 | - `config.rule('js').use('cache-loader')` 42 | -------------------------------------------------------------------------------- /vue-cli-plugin-e2e-cypress/README.md: -------------------------------------------------------------------------------- 1 | # @vue/cli-plugin-e2e-cypress 2 | 3 | [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-e2e-cypress/README.md) 4 | 5 | > vue-cli 的 e2e-cypress 插件 6 | 7 | 这个插件使用 [Cypress](https://www.cypress.io/) 添加 e2e 测试支持。 8 | 9 | Cypress 为运行 e2e 测试提供一套富交互界面，但是目前只支持在 Chromium 上运行测试。如果你有对多浏览器进行 e2e 测试的强烈需求，可以考虑选用基于 Selenium 的 [@vue/cli-plugin-e2e-nightwatch](../vue-cli-plugin-e2e-nightwatch/README.md)。 10 | 11 | ## 注入的命令 12 | 13 | - **`vue-cli-service test:e2e`** 14 | 15 | 使用 `cypress run` 运行 e2e 测试。 16 | 17 | 默认它通过一个可视化界面启动 Cypress 的交互模式。如果你想要以无头模式 (例如在 CI 的场景下) 运行测试，你可以加入 `--headless` 选项。 18 | 19 | 这个命令会自动以生产环境模式开启一个服务器来运行 e2e 测试。如果你连续运行多次测试而不会每次都重启服务器，你可以在一个终端运行 `vue-cli-service serve --mode production` 启动服务器，然后使用 `--url` 选项指定服务器运行 e2e 测试。 20 | 21 | 选项： 22 | 23 | ``` 24 | --headless 不带可视化界面在无头模式下运行 25 | --mode 指定开发服务器应该运行的环境。(默认：生产环境) 26 | --url 通过给定的 URL 运行 e2e 测试，而不是自动开启开发服务器 27 | -s, --spec (只适用于无头模式) 运行一个明确的 spec 文件。默认是 "all" 28 | ``` 29 | 30 | 额外的： 31 | 32 | - 在 GUI 模式下，[支持所有 Cypress CLI `cypress open` 的选项](https://docs.cypress.io/guides/guides/command-line.html#cypress-open) 33 | - 在 `--headless` 模式下，[支持所有 Cypress CLI `cypress run` 的选项](https://docs.cypress.io/guides/guides/command-line.html#cypress-run) 34 | 35 | 示例： 36 | 37 | - 为一个指定文件在 headless 下运行 Cypress：`vue-cli-service test:e2e --headless --spec tests/e2e/specs/actions.spec.js` 38 | 39 | ## 配置 40 | 41 | 我们已经预配置了 Cypress 在 `/test/e2e` 放置大多数的 e2e 测试的相关文件。你可以查阅[如何通过 `cypress.json` 配置 Cypress](https://docs.cypress.io/guides/references/configuration.html#Options)。 42 | 43 | ## 环境变量 44 | 45 | Cypress 不会和 `vue-cli` 为你的[应用代码](https://cli.vuejs.org/zh/guide/mode-and-env.html#在客户端侧代码中使用环境变量)一样为你的测试文件加载 `.env` 文件。Cypress 支持一些[定义环境变量](https://docs.cypress.io/guides/guides/environment-variables.html#)的方式，但是最简单的一种就是使用 `.json` 文件 (`cypress.json` 或 `cypress.env.json`) 定义环境变量。注意这些变量是可以通过 `Cypress.env` 函数访问到的，而不是惯用的 `process.env` 对象。 46 | 47 | ## 在已创建的项目中安装 48 | 49 | ``` sh 50 | vue add @vue/e2e-cypress 51 | ``` 52 | -------------------------------------------------------------------------------- /vue-cli-plugin-e2e-nightwatch/README.md: -------------------------------------------------------------------------------- 1 | # @vue/cli-plugin-e2e-nightwatch 2 | 3 | [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-e2e-nightwatch/README.md) 4 | 5 | > vue-cli 的 e2e-nightwatch 插件 6 | 7 | ## 注入的命令 8 | 9 | - **`vue-cli-service test:e2e`** 10 | 11 | 通过 [NightwatchJS](https://nightwatchjs.org) 运行 e2e 测试 12 | 13 | 选项： 14 | 15 | ``` 16 | --url 通过给定的 URL 运行 e2e 测试，而不是自动开启开发服务器 17 | --config 使用自定义 nightwatch 配置文件 (覆写内部的) 18 | -e, --env 指定测试所运行的浏览器环境，多个浏览器用逗号隔开 (默认值：chrome) 19 | -t, --test 运行指定名字的测试 20 | -f, --filter 通过文件名 glob 过滤测试 21 | ``` 22 | 23 | > 注意：这个插件当前使用了 Nightwatch v0.9.x。我们会在升级之前等待 Nightwatch 升级到稳定版本。 24 | 25 | 额外的，[支持所有的 Nightwatch CLI 选项](https://github.com/nightwatchjs/nightwatch/blob/master/lib/runner/cli/cli.js)。 26 | 27 | ## 配置 28 | 29 | 我们已经为 Nightwatch 预置了默认通过 Chrome 运行。如果你希望在额外的浏览器上运行 e2e 测试，你需要在你的项目根目录下添加 `nightwatch.config.js` 或 `nightwatch.json` 来配置额外的浏览器。这个配置会合并到[内部 Nightwatch 配置](https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-e2e-nightwatch/nightwatch.config.js). 30 | 31 | 作为替代方案，你可以通过 `--config` 选项指定一个自定义的配置文件来完全替代内部的配置。 32 | 33 | 请咨询 Nightwatch 文档了解[配置选项](http://nightwatchjs.org/gettingstarted#settings-file)以及如何[设置浏览器驱动](http://nightwatchjs.org/gettingstarted#browser-drivers-setup). 34 | 35 | ## 在已创建的项目中安装 36 | 37 | ``` sh 38 | vue add @vue/e2e-nightwatch 39 | ``` 40 | -------------------------------------------------------------------------------- /vue-cli-plugin-eslint/README.md: -------------------------------------------------------------------------------- 1 | # @vue/cli-plugin-eslint 2 | 3 | [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-eslint/README.md) 4 | 5 | > vue-cli 的 eslint 插件 6 | 7 | ## 注入的命令 8 | 9 | - **`vue-cli-service lint`** 10 | 11 | ``` 12 | 使用：vue-cli-service lint [options] [...files] 13 | 14 | 选项： 15 | 16 | --format [formatter] 指定格式器 (默认值：codeframe) 17 | --no-fix 不修复错误 18 | --max-errors 指定使构建失败的错误数量 (默认值：0) 19 | --max-warnings 指定使构建失败的警告数量 (默认值：Infinity) 20 | ``` 21 | 22 | 校验并修复文件中的错误。如果没有指定文件，则会校验 `src` 和 `test` 中的所有文件。 23 | 24 | 也支持其它 [ESLint CLI 的选项](https://eslint.org/docs/user-guide/command-line-interface#options)。 25 | 26 | ## 配置 27 | 28 | ESLint 可以通过 `.eslintrc` 或 `package.json` 中的 `eslintConfig` 字段进行配置。 29 | 30 | 通过 `eslint-loader` 在每次保存时执行校验的选项是默认开启的，你也可以通过 `vue.config.js` 中的 `lintOnSave` 选项将其关闭。 31 | 32 | ``` js 33 | module.exports = { 34 | lintOnSave: false 35 | } 36 | ``` 37 | 38 | 当设置为 `true` 时，`eslint-loader` 将会抛出校验错误作为警告。默认情况下警告只会记录在终端，并不会导致编译失败。 39 | 40 | 你可以使用 `lintOnSave: 'error'` 将校验错误显示在浏览器里的浮层中。这会强制 `eslint-loader` 总是抛出错误。这时也意味着校验错误会导致编译失败。 41 | 42 | 你也可以配置浮层同时展示警告和错误： 43 | 44 | ``` js 45 | // vue.config.js 46 | module.exports = { 47 | devServer: { 48 | overlay: { 49 | warnings: true, 50 | errors: true 51 | } 52 | } 53 | } 54 | ``` 55 | 56 | 当 `lintOnSave` 是 truthy 值时，`eslint-loader` 会被同时运用在开发环境和生产环境中。如果你在生产环境构建时禁用 `eslint-loader`，可以进行如下配置： 57 | 58 | ``` js 59 | // vue.config.js 60 | module.exports = { 61 | lintOnSave: process.env.NODE_ENV !== 'production' 62 | } 63 | ``` 64 | 65 | ## 在已创建的项目中安装 66 | 67 | ``` sh 68 | vue add @vue/eslint 69 | ``` 70 | 71 | ## 注入的 webpack-chain 规则 72 | 73 | - `config.module.rule('eslint')` 74 | - `config.module.rule('eslint').use('eslint-loader')` 75 | -------------------------------------------------------------------------------- /vue-cli-plugin-pwa/README.md: -------------------------------------------------------------------------------- 1 | # @vue/cli-plugin-pwa 2 | 3 | [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-pwa/README.md) 4 | 5 | > vue-cli 的 pwa 插件 6 | 7 | 该插件加入的 service worker 只会在生产环境下 (即只在运行 `npm run build` 或 `yarn build` 时) 开启。在开发环境下开启 service worker 并不推荐，因为它会导致之前的缓存资源被使用而未包含最新的本地改变。 8 | 9 | 取而代之的是，在开发环境下引入 `noopServiceWorker.js`。这个 service worker 文件会重置之前在相同主机和端口注册过的任何 service worker，有效地达到了 no-op 的目的。 10 | 11 | 如果你需要本地测试一个 service worker，构建应用并在构建目录运行一个简单的 HTTP 服务器。这里推荐使用浏览器隐私模式以避免浏览器缓存带来的问题。 12 | 13 | ## 配置 14 | 15 | 配置是通过 `vue.config.js` 的 `pwa` 属性或 `package.json` 中的 `"pwa"` 字段处理的。 16 | 17 | - **pwa.workboxPluginMode** 18 | 19 | 这个选项允许你在底层的 [`workbox-webpack-plugin`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin) 所支持的两种模式之间进行选择。 20 | 21 | - `'GenerateSW'` (默认值)，每次重新构建你的 web app 时都会创建一个新的 service worker 文件。 22 | 23 | - `'InjectManifest'` 允许你以一个现成的 service worker 文件开始，然后创建一份文件拷贝，并把“precache manifest”注入其中。 24 | 25 | 这份“[该使用哪个插件？](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#which_plugin_to_use)”的指南会帮助你在两者之间做出选择。 26 | 27 | - **pwa.workboxOptions** 28 | 29 | 这些选项会传入底层的 `workbox-webpack-plugin`。 30 | 31 | 关于所支持的值的更多的信息，请查阅 32 | [`GenerateSW`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_generatesw_config) 或 [`InjectManifest`](https://developers.google.com/web/tools/workbox/modules/workbox-webpack-plugin#full_injectmanifest_config) 的指南。 33 | 34 | - **pwa.name** 35 | 36 | - 默认值：`package.json` 的 "name" 字段 37 | 38 | 在生成的 HTML 中用作 `apple-mobile-web-app-title` meta 标签的值。注意你需要编辑 `public/manifest.json` 来配合它。 39 | 40 | - **pwa.themeColor** 41 | 42 | - 默认值：`'#4DBA87'` 43 | 44 | - **pwa.msTileColor** 45 | 46 | - 默认值：`'#000000'` 47 | 48 | - **pwa.appleMobileWebAppCapable** 49 | 50 | - 默认值：`'no'` 51 | 52 | 这里的默认值是 `'no'` 因为 iOS 11.3 之前都不支持 PWA。更多详情请查阅[这篇文章](https://medium.com/@firt/dont-use-ios-web-app-meta-tag-irresponsibly-in-your-progressive-web-apps-85d70f4438cb)。 53 | 54 | - **pwa.appleMobileWebAppStatusBarStyle** 55 | 56 | - 默认值：`'default'` 57 | 58 | - **pwa.assetsVersion** 59 | 60 | - 默认值：`''` 61 | 62 | 该选项会为图标和 manifest 文件的 URL 添加 `?v=`。以便在需要的时候应对浏览器缓存。 63 | 64 | - **pwa.manifestPath** 65 | 66 | - 默认值：`'manifest.json'` 67 | 68 | 应用的 manifest 文件路径。 69 | 70 | - **pwa.iconPaths** 71 | 72 | - 默认值： 73 | 74 | ```js 75 | { 76 | favicon32: 'img/icons/favicon-32x32.png', 77 | favicon16: 'img/icons/favicon-16x16.png', 78 | appleTouchIcon: 'img/icons/apple-touch-icon-152x152.png', 79 | maskIcon: 'img/icons/safari-pinned-tab.svg', 80 | msTileImage: 'img/icons/msapplication-icon-144x144.png' 81 | } 82 | ``` 83 | 84 | 改变这些值可以为图标设置不同的路径。 85 | 86 | ### 配置示例 87 | 88 | ```js 89 | // Inside vue.config.js 90 | module.exports = { 91 | // ...其它 vue-cli 插件选项... 92 | pwa: { 93 | name: 'My App', 94 | themeColor: '#4DBA87', 95 | msTileColor: '#000000', 96 | appleMobileWebAppCapable: 'yes', 97 | appleMobileWebAppStatusBarStyle: 'black', 98 | 99 | // 配置 workbox 插件 100 | workboxPluginMode: 'InjectManifest', 101 | workboxOptions: { 102 | // InjectManifest 模式下 swSrc 是必填的。 103 | swSrc: 'dev/sw.js', 104 | // ...其它 Workbox 选项... 105 | } 106 | } 107 | } 108 | ``` 109 | 110 | ## 在已创建的项目中安装 111 | 112 | ``` sh 113 | vue add @vue/pwa 114 | ``` 115 | 116 | ## 注入的 webpack-chain 规则 117 | 118 | - `config.plugin('workbox')` 119 | -------------------------------------------------------------------------------- /vue-cli-plugin-typescript/README.md: -------------------------------------------------------------------------------- 1 | # @vue/cli-plugin-typescript 2 | 3 | [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-typescript/README.md) 4 | 5 | > vue-cli 的 typescript 插件 6 | 7 | 使用 TypeScript + `ts-loader` + [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin) 实现线程外的快速类型检查。 8 | 9 | ## 配置 10 | 11 | TypeScript 可以通过 `tsconfig.json` 进行配置。 12 | 13 | 从 `3.0.0-rc.6` 起，`typescript` 会改为一个这个包的 peer dependency，所以你可以通过更新你项目中的 `package.json` 来指定 TypeScript 的版本。 14 | 15 | 这个插件可以配合 `@vue/cli-plugin-babel` 使用。当使用 Babel 时，该插件将会输出 ES2015 并将其它基于浏览器目标的自动的 polyfill 委托给 Babel。 16 | 17 | ## 注入的命令 18 | 19 | 如果在项目创建的时候选择了 [TSLint](https://palantir.github.io/tslint/)，则会注入 `vue-cli-service lint`。 20 | 21 | ## 缓存 22 | 23 | [cache-loader](https://github.com/webpack-contrib/cache-loader) 默认开启，被缓存的东西存储在 `/node_modules/.cache/ts-loader`。 24 | 25 | ## 并行执行 26 | 27 | [thread-loader](https://github.com/webpack-contrib/thread-loader) 会在多核机器上默认开启。你可以在 `vue.config.js` 中设置 `parallel: false` 将其关闭。 28 | 29 | ## 在已创建的项目中安装 30 | 31 | ``` sh 32 | vue add @vue/typescript 33 | ``` 34 | 35 | ## 注入的 webpack-chain 规则 36 | 37 | - `config.rule('ts')` 38 | - `config.rule('ts').use('ts-loader')` 39 | - `config.rule('ts').use('babel-loader')` (当配合 `@vue/cli-plugin-babel` 使用时) 40 | - `config.rule('ts').use('cache-loader')` 41 | - `config.plugin('fork-ts-checker')` 42 | -------------------------------------------------------------------------------- /vue-cli-plugin-unit-jest/README.md: -------------------------------------------------------------------------------- 1 | # @vue/cli-plugin-unit-jest 2 | 3 | [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-unit-jest/README.md) 4 | 5 | > vue-cli 的 unit-jest 插件 6 | 7 | ## 注入的命令 8 | 9 | - **`vue-cli-service test:unit`** 10 | 11 | 通过 Jest 运行单元测试。默认的 `testMatch` 是 `/(tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx))`，它匹配： 12 | 13 | - 任何 `tests/unit` 中以 `.spec.(js|jsx|ts|tsx)` 结尾的文件； 14 | - 任何 `__tests__` 目录中的 js(x)/ts(x) 文件。 15 | 16 | 使用：`vue-cli-service test:unit [options] ` 17 | 18 | 支持所有的 [Jest 命令行选项](https://facebook.github.io/jest/docs/en/cli.html)。 19 | 20 | ## 调试测试代码 21 | 22 | 注意直接运行 `jest` 会失败，因为 Babel preset 需要提示 (hint) 才能让代码在 Node.js 中运行，所以你必须通过 `vue-cli-service test:unit` 来运行测试代码。 23 | 24 | 如果你想要通过 Node inspector 调试你的测试代码，可以运行如下代码： 25 | 26 | ``` sh 27 | # macOS or linux 28 | node --inspect-brk ./node_modules/.bin/vue-cli-service test:unit 29 | 30 | # Windows 31 | node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js test:unit 32 | ``` 33 | 34 | ## 配置 35 | 36 | Jest 可以通过你项目根目录中的 `jest.config.js` 文件或 `package.json` 文件中 `jest` 字段的进行配置。 37 | 38 | ## 在已创建的项目中安装 39 | 40 | ``` sh 41 | vue add @vue/unit-jest 42 | ``` 43 | -------------------------------------------------------------------------------- /vue-cli-plugin-unit-mocha/README.md: -------------------------------------------------------------------------------- 1 | # @vue/cli-plugin-unit-mocha 2 | 3 | [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-plugin-unit-mocha/README.md) 4 | 5 | > vue-cli 的 unit-mocha 插件 6 | 7 | ## 注入的命令 8 | 9 | - **`vue-cli-service test:unit`** 10 | 11 | 通过 [mocha-webpack](https://github.com/zinserjan/mocha-webpack) + [chai](http://chaijs.com/) 运行单元测试。 12 | 13 | **注意该测试会运行在带有 JSDOM 浏览器环境模拟的 Node.js 中** 14 | 15 | ``` 16 | 使用：vue-cli-service test:unit [options] [...files] 17 | 18 | 选项： 19 | 20 | --watch, -w 以监听模式运行 21 | --grep, -g 只运行匹配 的测试 22 | --slow, -s 将测试阀值减慢，单位是毫秒 23 | --timeout, -t 设置超时阀值，单位是毫秒 24 | --bail, -b 第一个测试失败后仍然保释 25 | --require, -r 在运行测试之前引入给定的模块 26 | --include 在测试包中包含给定的模块 27 | --inspect-brk 开启审查工具来调试测试代码 28 | ``` 29 | 30 | 默认文件匹配规则是：`test/unit` 内所有以 `.spec.(ts|js)` 结尾的文件。 31 | 32 | 也支持所有的 [mocha-webpack 命令行选项](http://zinserjan.github.io/mocha-webpack/docs/installation/cli-usage.html)。 33 | 34 | ## 在已创建的项目中安装 35 | 36 | ``` sh 37 | vue add @vue/unit-mocha 38 | ``` 39 | -------------------------------------------------------------------------------- /vue-cli-service-global/README.md: -------------------------------------------------------------------------------- 1 | # @vue/cli-service-global 2 | 3 | [英文原版](https://github.com/vuejs/vue-cli/tree/dev/packages/\@vue/cli-service-global/README.md) 4 | 5 | 全局安装这个包之后，你可以直接运行 `vue serve` 和 `vue build` 而不需要任何本地依赖： 6 | 7 | ``` sh 8 | npm install -g @vue/cli-service-global 9 | echo '' > App.vue 10 | vue serve 11 | ``` 12 | -------------------------------------------------------------------------------- /vue-component-compiler-utils/README.md: -------------------------------------------------------------------------------- 1 | # @vue/component-compiler-utils 2 | 3 | [英文原版](https://github.com/vuejs/component-compiler-utils) 4 | 5 | > 用来编译 Vue 单文件组件的底层实用工具 6 | 7 | 这个包包含了底层的实用工具，对于将 Vue 单文件组件编译为 JavaScript 的打包器或模块系统来说，为其撰写插件或转换规则是用得到这些实用工具的。 8 | 9 | 表层 API 设计被刻意最小化，目的是在尽可能灵活的同时保持可复用。 10 | 11 | ## 为什么 `vue-template-compiler` 不是一个 `peerDependency`？ 12 | 13 | 因为这个包更多地作为一个底层实用工具被使用，在实际的 Vue 工程中常常是一个可传递的依赖。这也是顶层包 (例如 `vue-loader`) 在调用 `parse` 和 `compileTemplate` 方法时将 `vue-template-compiler` 通过选项注入的原因。 14 | 15 | 没有将其列为同级依赖 (peer dependency) 也使得工具作者可以将 `vue-template-compiler` 换为一个非默认的模板编译器，而不需要仅仅为了填补同级依赖而引入它。 16 | 17 | ## API 18 | 19 | ### parse(ParseOptions): SFCDescriptor 20 | 21 | 将单文件组件的源码解析为一个带有 source map 的描述器。实际的编译器 (`vue-template-compiler`) 必须通过 `compiler` 选项被传入，这样具体的版本号就可以被最终用户指定。 22 | 23 | ``` ts 24 | interface ParseOptions { 25 | source: string 26 | filename?: string 27 | compiler: VueTemplateCompiler 28 | // https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilerparsecomponentfile-options 29 | // default: { pad: 'line' } 30 | compilerParseOptions?: VueTemplateCompilerParseOptions 31 | sourceRoot?: string 32 | needMap?: boolean 33 | } 34 | 35 | interface SFCDescriptor { 36 | template: SFCBlock | null 37 | script: SFCBlock | null 38 | styles: SFCBlock[] 39 | customBlocks: SFCCustomBlock[] 40 | } 41 | 42 | interface SFCCustomBlock { 43 | type: string 44 | content: string 45 | attrs: { [key: string]: string | true } 46 | start: number 47 | end: number 48 | map?: RawSourceMap 49 | } 50 | 51 | interface SFCBlock extends SFCCustomBlock { 52 | lang?: string 53 | src?: string 54 | scoped?: boolean 55 | module?: string | boolean 56 | } 57 | ``` 58 | 59 | ### compileTemplate(TemplateCompileOptions): TemplateCompileResults 60 | 61 | 将模板的源码编译为 JavaScript 代码。实际的编译器 (`vue-template-compiler`) 必须通过 `compiler` 选项被传入，这样具体的版本号就可以被最终用户指定。 62 | 63 | 它也可以通过 [consolidate](https://github.com/tj/consolidate.js/) 可选地为任何模板引擎进行预处理。 64 | 65 | ``` ts 66 | interface TemplateCompileOptions { 67 | source: string 68 | filename: string 69 | 70 | compiler: VueTemplateCompiler 71 | https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilercompiletemplate-options 72 | // default: {} 73 | compilerOptions?: VueTemplateCompilerOptions 74 | 75 | // Template preprocessor 76 | preprocessLang?: string 77 | preprocessOptions?: any 78 | 79 | // 将模板里找到的资源 URL 转换为 `require()` 调用 80 | // 这个选项默认是关闭的。如果设置为 true，则默认值为： 81 | // { 82 | // video: ['src', 'poster'], 83 | // source: 'src', 84 | // img: 'src', 85 | // image: 'xlink:href' 86 | // use: 'xlink:href' 87 | // } 88 | transformAssetUrls?: AssetURLOptions | boolean 89 | 90 | // 为 vue-template-es2015-compiler，即一个 Buble 的 fork，指定的选项 91 | transpileOptions?: any 92 | 93 | isProduction?: boolean // default: false 94 | isFunctional?: boolean // default: false 95 | optimizeSSR?: boolean // default: false 96 | 97 | // 是否美化编译后的渲染函数 (只在开发环境下有效) 98 | // 默认值：true 99 | prettify?: boolean 100 | } 101 | 102 | interface TemplateCompileResult { 103 | code: string 104 | source: string 105 | tips: string[] 106 | errors: string[] 107 | } 108 | 109 | interface AssetURLOptions { 110 | [name: string]: string | string[] 111 | } 112 | ``` 113 | 114 | #### 处理输出 115 | 116 | 处理得到的 JavaScript 代码形如； 117 | 118 | ``` js 119 | var render = function (h) { /* ... */} 120 | var staticRenderFns = [function (h) { /* ... */}, function (h) { /* ... */}] 121 | ``` 122 | 123 | 它**不会**假定任何模块系统。你要在必要的时候负责处理导出。 124 | 125 | ### compileStyle(StyleCompileOptions) 126 | 127 | 将输入的原始 CSS 进行 scoped CSS 转换。它不会处理预处理器。如果组件没有使用 scoped CSS 那么这一步会被跳过。 128 | 129 | ``` ts 130 | interface StyleCompileOptions { 131 | source: string 132 | filename: string 133 | id: string 134 | map?: any 135 | scoped?: boolean 136 | trim?: boolean 137 | preprocessLang?: string 138 | preprocessOptions?: any 139 | postcssOptions?: any 140 | postcssPlugins?: any[] 141 | } 142 | 143 | interface StyleCompileResults { 144 | code: string 145 | map: any | void 146 | rawResult: LazyResult | void // 来自 PostCSS 的懒处理原始结果 147 | errors: string[] 148 | } 149 | ``` 150 | 151 | ### compileStyleAsync(StyleCompileOptions) 152 | 153 | 和 `compileStyle(StyleCompileOptions)` 相同，但是返回一个解析 `StyleCompileResults` 的 Promise 对象。可用于异步的 PostCSS 插件。 154 | -------------------------------------------------------------------------------- /vue-style-loader/README.md: -------------------------------------------------------------------------------- 1 | # Vue Style Loader [![Build Status](https://circleci.com/gh/vuejs/vue-style-loader/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-loader/tree/master) [![npm package](https://img.shields.io/npm/v/vue-style-loader.svg)](https://www.npmjs.com/package/vue-style-loader) 2 | 3 | [英文原版](https://github.com/vuejs/vue-style-loader) 4 | 5 | 这个库 fork 自 [`style-loader`](https://github.com/webpack/style-loader)。和 `style-loader` 一样，你可以在 `css-loader` 之后将其链起来，并通过它将 CSS 以样式标记的方式动态注入到文档中。不过因为这个库已经在 `vue-loader` 的默认依赖中，多数情况下你是不需要自行配置该 loader 的。 6 | 7 | ## 选项 8 | 9 | - **manualInject** (3.1.0+): 10 | 11 | 类型：`boolean`。当从一个非 Vue 文件导入样式的时候，默认情况下样式会作为该导入内容的一个副作用被注入。当 `manualInject` 为真多时候，被导入的样式对象会暴露一个 `__inject__` 方法，供您自行选择恰当的时机手动调用。如果这个方法在服务端被调用，则会接收一个待添加样式的 `ssrContext` 的参数。 12 | 13 | ``` js 14 | import styles from 'styles.scss' 15 | 16 | export default { 17 | beforeCreate() { // 或者为此创建一个混入 (mixin) 18 | if(styles.__inject__) { 19 | styles.__inject__(this.$ssrContext) 20 | } 21 | } 22 | 23 | render() { 24 | return
Hello World
25 | } 26 | } 27 | ``` 28 | 29 | 注意当 `vue-style-loader` 用在从一个 `*.vue` 文件内导入样式的时候，这个行为是自动开启的。暴露该选项只是为了高阶的用法。 30 | 31 | - **ssrId** (3.1.0+): 32 | 33 | 类型：`boolean`。为被注入的 `