Vue CLI 3.x 学习笔记

Vue.js 官网

Vue.js 开发的标准工具

Vue CLI 配置参考

搭建Vue项目

使用Vue官方推荐的Vue CLI工具，Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 实现的交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
• 一个运行时依赖 (@vue/cli-service)，该依赖：
  • 可升级；
  • 基于 webpack 构建，并带有合理的默认配置；
  • 可以通过项目内的配置文件进行配置；
  • 可以通过插件进行扩展。
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
  Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

安装Vue CLI

npm install -g @vue/cli

检查其版本是否正确

vue --version

vue create

运行以下命令来创建一个新项目：

vue create hello-world

使用图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

自定义配置文件

创建完项目在根目录是没有eslint、bable等相关配置文件，如需自定义，可以自行创建文件。
Vue CLi3.0删除了config和build文件夹，现在配置webpack只需要在项目的根目录下新建vue.config.js文件

#vue.config.js 完整默认配置
module.exports = {
     // 基本路径
     baseUrl: '/',
     // 输出文件目录
     outputDir: 'dist',
     // 用于嵌套生成的静态资产（js，css，img，fonts）的目录。
     assetsDir: '',
     // 以多页模式构建应用程序。
     pages: undefined,
     // eslint-loader 是否在保存的时候检查
     lintOnSave: true,
     // 是否使用包含运行时编译器的Vue核心的构建。
     runtimeCompiler: false,
     // 默认情况下babel-loader忽略其中的所有文件node_modules。
     transpileDependencies: [],
     // 生产环境sourceMap
     productionSourceMap: true,
     // webpack配置
     configureWebpack: () => {},
     chainWebpack: () => {},
     // css相关配置
     css: {
      // 启用 CSS modules
      modules: false,
      // 是否使用css分离插件
      extract: true,
      // 开启 CSS source maps?
      sourceMap: false,
      // css预设器配置项
      loaderOptions: {},
     },
     // webpack-dev-server 相关配置
     devServer: {
      host: '0.0.0.0',
      port: 8080,
      https: false,
      hotOnly: false,
      proxy: null, // 设置代理
      before: app => {}
     },
     // enabled by default if the machine has more than 1 cores
     parallel: require('os').cpus().length > 1,
     // PWA 插件相关配置
     pwa: {},
     // 第三方插件配置
     pluginOptions: {
      // ...
     }
}

浏览器兼容性
在package.json文件里多了一个browserslist字段，这个字段指定了项目兼容到哪些浏览器。

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

Vue CLI 配置参考

单页面应用入口(默认单页面，也可以配置多页面应用)

public/index.html 文件是一个会被html-webpack-plugin 处理的模板。在构建过程中，资源链接会被自动注入。

处理静态资源

静态资源可以通过两种方式进行处理：

• 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
• 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理的。

从相对路径导入

当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

例如，url(./image.png) 会被翻译为 require('./image.png')，而：

<img src="./image.png">

将会被编译到：

h('img', { attrs: { src: require('./image.png') }})

在其内部，我们通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的文件路径，再用 url-loader 将小于 4kb 的资源内联，以减少 HTTP 请求的数量。

你可以通过 chainWebpack 调整内联文件的大小限制。例如，下列代码会将其限制设置为 10kb：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => Object.assign(options, { limit: 10240 }))
  }
}

URL 转换规则

• 如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。
• 如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。
• 如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：

<img src="~some-npm-package/foo.png">

• 如果 URL 以@开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @。(仅作用于模版中)

public 文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。

注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：

• 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
• 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
• 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。
  public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：
• 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过<%= BASE_URL %>设置链接前缀：

<link rel="icon" href="<%= BASE_URL %>favicon.ico">

• 在模板中，你首先需要向你的组件传入基础 URL：

data () {
  return {
    publicPath: process.env.BASE_URL
  }
}

然后：

<img :src="`${publicPath}my-image.png`">

何时使用 public 文件夹

• 你需要在构建输出中指定一个文件的名字。
• 你有上千个图片，需要动态引用它们的路径。
• 有些库可能和 webpack 不兼容，这时你除了将其用一个独立的 <script> 标签引入没有别的选择。

预处理器

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader：

# Sass
npm install -D sass-loader sass

# Less
npm install -D less-loader less

# Stylus
npm install -D stylus-loader stylus

然后你就可以导入相应的文件类型，或在*.vue文件中这样来使用：

<style lang="scss">
$color: red;
</style>

如果你想对某个组件的css设置私有化，可以使用scoped属性

<style scoped  lang="scss">
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
$color: green;
div{
  background: $color;
}
</style>

全局引用文件(css、scss、js)

main.js是入口文件，在这个文件里引入的css、scss、js就会在所有的页面使用，由于不需要输入变量，所有直接引入需要的文件即可生效。

import Vue from 'vue'
import App from './App.vue'
//引入common.scss
import './assets/common.scss'
//引入rem.js
import './assets/rem'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

代码解析

首先看看Vue官方教程

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

再来看看main.js代码

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

对比后发现，官网挂载vue实例时候是在el定义的目标元素，脚手架创建的项目是通过$mount定义的目标元素，并且脚手架是通过render函数渲染的模板，并不是用的html创建的模板。
两者在使用效果上没有任何区别，都是为了将实例化后的vue挂载到指定的dom元素中。
如果在实例化vue的时候指定el，则该vue将会渲染在此el对应的dom中，反之，若没有指定el，则vue实例会处于一种“未挂载”的状态，此时可以通过$mount来手动执行挂载。