如何新建一个最最简单小巧的vue项目

在传统的实践中，当我们要创建一个vue项目时，往往需要自己配置webpack, eslint, babel, 各种loader等等一大堆东西，耗费很多时间。后来，vue-cli出现，让我们创建项目简单了很多，只需一条命令，选择一些配置，便自动生成一个功能齐全的项目。然而，用vue-cli创建的项目，哪怕把不需要的东西都去掉勾选，最后生成的项目还是显得臃肿复杂（本地安装了依赖，体积超过了70MB，编译速度慢，最后dist里的东西体积也大）。
作为一个有洁癖的程序员，肯定不会在这里止步，还要继续优化项目让他更轻更小更快。如何做到呢？如下是我总结的最小项目原则：

• 使用CDN的库而非作为项目依赖参与编译（减小项目体积和生成代码体积，提升编译和页面打开速度）
• 使用全局依赖而非本地依赖（减小项目体积，避免依赖重复下载和储存）
• 对于初学者及小型项目，可以避免使用babel, prettier, eslint等增加复杂度的工具
• 使用pug, stylus等预编译语言（简化代码，减少行数，提升复用）

应用这些原则，来创建一个最简单的项目：

1. 安装全局依赖：yarn global add @vue/cli @vue/cli-service-global。若使用pug可以加装pug pug-plain-loader
2. 创建App.vue，内容举例：

这时我们已经可以通过vue serve、vue build来开发和编译了，但是还需优化

3. 创建vue.config.js，内容为：

module.exports = {
    publicPath: './',
    configureWebpack: {
        externals: {
            vue: 'Vue'
        }
    }
}

这里我把publicPath设成./是为了编译后的文件也能静态地打开查看，不是必须的。
关键点是把webpack配置加一条使用外部（CDN）的全局Vue，这样我们的项目编译就不需要处理vue依赖了，只要编译项目本身的源代码。这时我们再执行vue build会发现速度快了很多，编译后代码体积十分小巧。

4. 我们需要在html里从CDN引入vue，否则项目无法运行。但是项目没有html文件，所以我们需要创建public文件夹，然后在里面创建index.html替换掉默认的html模版，内容如下：

这样一个最简单小巧的vue项目就创建完成了，仅仅包含3个文件，23行代码，项目总大小不过500B，相比之下vue-cli创建的项目动辄70多MB，速度也慢得多。你也可以将这个简单的3个文件的项目保存成一个模版来使用，每次创建新项目只需复制粘贴，岂不快哉。