-
Vue Cli-12-构建目标
构建目标
当你运行 vue-cli-service build 时,你可以通过 –target 选项指定不同的构建目标。
它允许你将相同的源代码根据不同的用例生成不同的构建。
应用
应用模式是默认的模式。
在这个模式中:
index.html 会带有注入的资源和 resource hint
第三方库会被分到一个独立包以便更好的缓存
...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-11-模式与环境 model & env
模式
模式是 Vue CLI 项目中一个重要的概念。默认情况下,一个 Vue CLI 项目有三个模式:
development 模式用于 vue-cli-service serve
test 模式用于 vue-cli-service test:unit
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-10-webpack
简单的配置方式
调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象:
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
new MyAwesomeWebpackPlugin()
]
}
}
...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-09-CSS
引用静态资源
所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用,并将这些引用作为模块请求来处理。
这意味着你可以根据本地的文件结构用相对路径来引用静态资源。
另外要注意的是如果你想要引用一个 npm 依赖中的文件,或是想要用 webpack alias,则需要在路径前加上 ~ 的前缀来避免歧义。
更多细节请参考处理静态资源。
预处理器
你可以在...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-08-HTML 和静态资源
HTML
Index 文件
public/index.html 文件是一个会被 html-webpack-plugin 处理的模板。
在构建过程中,资源链接会被自动注入。
另外,Vue CLI 也会自动注入 resource hint (preload/prefetch、manifest 和图标链接 (当用到 PWA 插件时) 以及构建过程中处理的 JavaScript 和 CSS ...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-07-浏览器兼容性
browserslist
你会发现有 package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围。
这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。
现在查阅这里了解如何指定浏览器范围...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-06-vue cli service CLI 服务
使用命令
在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。
你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。
这是你使用默认 preset 的项目的 package.json:
{
...
2018-06-14 07:16:10 |
Vue
-
Vue Cli-05-plugin 插件和 Preset
插件
Vue CLI 使用了一套基于插件的架构。
如果你查阅一个新创建项目的 package.json,就会发现依赖都是以 @vue/cli-plugin- 开头的。
插件可以修改 webpack 的内部配置,也可以向 vue-cli-service 注入命令。在项目创建的过程中,绝大部分列出的特性都是通过插件来实现的。
基于插件的架构使得 Vue CLI 灵活且可扩展。如果你对开发...
2018-06-14 07:16:10 |
Vue