npm install -g @vue/cli
# OR
yarn global add @vue/cli
一。先说说自己感受 对比一下2.9.6
npm run dev 变成 npm run serve。
速度： 感觉快了10倍吧
vue-cli 2.9.6
vue-cli 3.0.0
然后是构建方面的，2.9.6 构建的时候 询问 default(babel, eslint) || manually select features 的配置。
而3.0.0 ，只询问babel 7.0配置。
构建目录，相比之前精简了很多。
2.9.6的版本中，感觉，vue init的意思只不过就是从git上面拉取下来的。我
之前都是直接去修改webpack-dev-server ，而不是在config目录修改。这样的自由度，
感觉vue-cli只不过是帮你创建了文件夹，配置了bable，加入了"vue-loader": "^15.3.0"
这样子的话，vue-cli升级变得很困难。
default(babel, eslint)
manually select features
尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版，这种拉模版的方式有几个问题：
1.在单个模版里面同时支持太多选项会导致模版本身变得极其复杂和难以维护，而提供多个模版一方面会让初学者无所适从，另一方面模版之间也难以共享功能或是互相迁移。CLI 3 对此的解决方案是通过插件的形式去支持多个不同的功能，一个插件对应一个功能（比如单元测试），这样即避免了多个模版，也使得 CLI 自身的可维护性得到提升。同时，支持第三方插件，使得用户可以实现各种自定义的功能扩展。 2.拉模版生成的项目，所有的 webpack 配置和构建脚本都直接包含在仓库中，一旦用户对这些部分做了修改，就很难再获得源模版的更新和升级。CLI 3 生成的项目，核心的 webpack 配置和构建逻辑都被封装在依赖中，同时允许用户通过配置文件来进行底层的修改。这样的好处是 CLI 更新后，用户即使做过自定义的修改也依旧可以升级。 3.由于核心配置都被封装起来了，所以我们有更多的空间去做更复杂的功能和优化，比如构建时的性能优化（缓存 / 多核），modern mode，生成 web component 等，而不用担心用户的项目里面充斥大量和应用本身无关的构建代码。同时以后随着 web 平台新规范的落地，我们也可以继续在 CLI 中添加各种针对性的优化，用户只需要升级即可获得。
vue-cli 2.9.6
vue-cli 3.0.0
二。上手3.0.0
(推荐)安装 @vue/cli-service-global ，从而使用单组件测试，vue serve component.vue
可以使用vue build component.vue 来构建组件，我觉得组件就没有必要的，这功能是用在页面当中的。 例如，输入vue build App.vue
这里可能会有个小坑，我们直接打开构建出来的文件，是路径错误的(因为是./ )根路径，这里留坑，cli 2.9.6的时候，配置spa的
时候也遇到过，应该不难。嗯解决了，就是在vue.config.js 里面的assetsDir: ‘./‘ default: ‘’
vue ui 可以用来可视化那样去创建一个project
当我们默认构建了项目的时候，想添加router 和vuex的时候
1 | vue add router |
vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
三。CLI服务
vue-cli-service serve
1 | 用法：vue-cli-service serve [options] [entry] |
vue-cli-service build
1 | 用法：vue-cli-service build [options] [entry|pattern] |
–modern 生成一个现代浏览器支持的ES2015 代码，并生成一个兼容老浏览器的包来自动回退。
–target 就是目标了，vue build –target src/App.vue
–report 和 –report-json 会根据构建统计生成报告，它会帮助你分析包中包含的模块们的大小。
vue-cli-service inspect
1 | 用法：vue-cli-service inspect [options] [...paths] |
四。插值
public/index.html 被用作模板
- <%= value="" %=""> 用来做不转义插值；
- <%- value="" %=""> 用来做 HTML 转义插值；
- <% expression="" %="">用来描述 JavaScript 流程控制
除了被 html-webpack-plugin 暴露的默认值之外，所有客户端环境变量也可以直接使用。 例如：link rel="icon" href="<%= base_url="" %="">favicon.ico"
rel = "prefetch"
是一种 resource hint，用来告诉浏览器在页面加载完成后，利用空闲时间提前获取用户未来可能会访问的内容。
默认情况下，一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import() 按需 code splitting 的产物) 自动生成 prefetch 提示。
这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin(‘prefetch’) 进行修改和删除。
rel = "preload"
是一种 resource hint，用来指定页面加载后很快会被用到的资源，所以在页面加载的过程中，我们希望在浏览器开始主体渲染之前尽早 preload。
默认情况下，一个 Vue CLI 应用会为所有初始化渲染需要的文件自动生成 preload 提示。
这些提示会被 @vue/preload-webpack-plugin 注入，并且可以通过 chainWebpack 的 config.plugin(‘preload’) 进行修改和删除
1 | // vue.config.js |
1 | import(/* webpackPrefetch: true */ './someAsyncComponent.vue') |
不生成index.html (假如你在用服务器的时候，肯可能不需要这些，什么时候有服务器？我现在的范围是nuxt ssr，哦，就是已经有index.html模板了，我们需要的就是build就OK了那种..可是这样并没什么卵用，我也不推荐这样做)
1
2
3
4
5
6
7
8
9
10
11
12// vue.config.js
module.exports = {
// 去掉文件名中的 hash
filenameHashing: false,
// 删除 HTML 相关的 webpack 插件
chainWebpack: config => {
config.plugins.delete('html')
config.plugins.delete('preload')
config.plugins.delete('prefetch')
}
}
然而这样做并不是很推荐，因为：
硬编码的文件名不利于实现高效率的缓存控制。 硬编码的文件名也无法很好的进行 code-splitting (代码分段)，因为无法用变化的文件名生成额外的 JavaScript 文件。 硬编码的文件名无法在现代模式下工作。 你应该考虑换用 indexPath 选项将生成的 HTML 用作一个服务端框架的视图模板。
不是每个文件都是单页应用
不是每个应用都需要是一个单页应用。Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面的应用。构建好的应用将会在不同的入口之间高效共享通用的 chunk 以获得最佳的加载性能。1 | //type: object |
五。处理静态资源
这里是会有两种方式来处理的。假如你是放在public引入或者通过绝对路径引入，那么该文件不会被webpack处理。
在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。
注意下link rel="icon" href="<%= base_url="" %="">favicon.ico" 在通过html-webpack-plugin引入的时候，html中的路径请添加上<%= base_url="" %="">
注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：
1.脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
2.文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
3.最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。
在模板中想使用base_url的时候，推荐在data里面设置一个baseUrl: process.envBASE_URL
img引入 :src="` ${baseUrl}my-image.png` "
六。URL转换规则
- 如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。
- 如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
- 如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：
- 如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向
/src 的别名 @。(仅作用于模版中)
七。css相关
自动化导入(就是每个单文件中引入变量，相当于全局变量吧)
如果你想自动化导入文件 (用于颜色、变量、mixin……)，你可以使用 style-resources-loader。这里有一个关于 Stylus 的在每个单文件组件和 Stylus 文件中导入 ./src/styles/imports.styl 的例子：
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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’),
],
})
}你也可以选择使用 vue-cli-plugin-style-resources-loader
vue add vue-cli-plugin-style-resources-loader
看这
PostCSS 推荐先去学习一下
PostCSS并不是另一种CSS预编译器，与SASS、Less等预编译器也并不冲突。PostCSS与Babel的不同之处在于，它所支持的所谓“未来CSS语法”并不是严格的CSS规范，其中大部分语法和特性目前只是CSS4的草案而已。很多人将PostCSS称为“CSS后编译器”，这个称谓可以一定程度上说明目前业界对PostCSS的普遍使用方案
这文章里面，我觉得是 less || sass ---> postcss 这样的顺序才正确。注：很多开发者容易混淆css-loader和style-loader的作用。css-loader的作用是解析css源文件并获取其引用的资源，比如@import引用的模块、url()引用的图片等，然后根据Webpack配置编译这些资源。style-loader负责将css代码通过style标签插入html文档中，所以如果独立导出css文件就不再需要style-loader。css-loader必须在style-loader之前执行。
css modules
当import styles from ‘’的时候 ，想使用Module 就 name.module.(css|less|sass|scss|styl)
如果不想这样子做，那么修改config css.module: true
向预处理器 Loader 传递选项
有的时候你想要向 webpack 的预处理器 loader 传递选项。你可以使用 vue.config.js 中的 css.loaderOptions 选项。比如你可以这样向所有 Sass 样式传入共享的全局变量：
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
css: {
loaderOptions: {
// 给 sass-loader 传递选项
sass: {
// @/ 是 src/ 的别名
// 所以这里假设你有src/variables.scss这个文件
data:@<span class="keyword">import</span> <span class="string">"@/variables.scss"</span>;
}
}
}
}
八。webpack相关