vue-cli 3.0详解以及配置webpack目录别名alias

vue-cli 3.0安装

安装命令：
npm install -g @vue/cli

如果已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，
卸载命令：
npm uninstall vue-cli -g

检查其版本是否正确 (3.x)：
vue --version
vue -V

创建一个新项目:
vue create hello-world

windows上的Git Bash交互不是很友好，需要通过
winpty vue.cmd create hello-world
启动上下键选择，space键选中

现有的项目中安装插件：vue-cli-plugin-cube-ui
vue add cube-ui

启动

启动项目：
npm run serve

配置webpack目录别名alias

使用vue.config.js（根目录，默认不存在，需要创建）来配置webpach的一些配置项

链式操作

webpack-chain尝试通过提供可链接或流畅的API来创建和修改webpack配置来改进此过程。

设置别名的结构：
config.resolve.alias
  .set(key, value)
  .set(key, value)
  .delete(key)
  .clear()

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack(config) {
    config.resolve.alias
      .set('components', resolve('src/components'))
      .set('common', resolve('src/common'))
      .set('api', resolve('src/api'))
  }
}

参考：webpack-chain

注意：

各类非 js 直接引用（import require）静态资源，依赖相对路径加载问题，都可以用 ~ 语法完美解决；