基于vuecli-3x的从0到1搭建Vue项目的实践

定场诗

守法朝朝忧闷，强梁夜夜欢歌，损人利己骑马骡，正直公平挨饿。修桥补路瞎眼，杀人放火的儿多，我到西天问我佛，佛说：我也没辙！

概述

Vue 官方的脚手架工具 Vue Cli 有了一次较大的更新，相比于 2.x 版本，新版本 3.x 中对项目的搭建，相关包、插件的安装都有了新大的不同。本文即立足于此，选择 @vue/cli 3.x 版本的脚手架工具，动手实践从 0 到 1 搭建 Vue 项目，包含了项目的初始化，以及 Vue 全家桶 (VueRouter/Vuex/Axios/CSS 预处理器) 的相关配置。

一、认识新版本

@vue/cli 3.x 版本，更加注重脚手架工具本身的易用性和易扩展性，支持开箱即用，同时提供了丰富的插件系统。

优秀之处	为啥如此优秀？
功能丰富	对 Babel、TypeScript、ESLint、PostCSS、PWA、单元测试和 End-to-end 测试提供开箱即用的支持。
易于扩展	它的插件系统可以让社区根据常见需求构建和共享可复用的解决方案。
无需 Eject	Vue CLI 完全是可配置的，无需 eject。这样你的项目就可以长期保持更新了
CLI 之上的图形化界面	通过配套的图形化界面创建、开发和管理你的项目
即刻创建原型	用单个 Vue 文件即刻实践新的灵感。
面向未来	为现代浏览器轻松产出原生的 ES2015 代码，或将你的 Vue 组件构建为原生的 Web Components 组件。

以上优秀描述，来自于官方，手动微笑.gif 官网传送门

二、准备工作

1. Node/NPM 安装

想要操作使用 npm，我们必须要先安装 Node，这个没啥好说的。Node.js 官网传送门
下载安装对应系统的版本即可。

检测是否安装成功

// 检测 node 版本
node -v

// 检测 npm 版本
npm -v

2. 安装脚手架 @vue/cli

注意：3.x 版本包，已经改名为 @vue/cli

npm install -g @vue/cli

2.x 版本安装，npm install -g vue-cli

检测是否安装成功：

// 检测 @vue/cli 的版本
vue -V

我的版本是 3.11.0

三、项目搭建

1. 项目结构初始化

vue create appName

快速便捷的对项目结构进行初始化，选择想要默认加载的配置。有两种模式，一种是default，默认添加了 babel 和 eslint 的配置，另外一种Manually select features，可根据自己的实际需要配置 Babel、VueRouter、Vuex、TypeScript、CSS Pre-processors、Unit testing 等

为了给大家演示这个过，我就选择了 default 默认

2. 创建项目文件，安装依赖

如果在创建项目时，没有选择将 babel、eslint、postcss 等配置独立化，则对应文件不存在，相关配置存储在 package.json 中

3. 运行项目

在项目的根目录执行 npm run serve，即可运行 Vue 的项目。

至此，通过几步简单的操作，Vue 的项目初始化就完成了，各位小伙本是不是很简单.

项目扩展

1. VueRouter 路由配置

注意，vue add 的使用，将 router 作为插件，添加到项目中

vue add router

对，就这样，这就配置好路由 router 模块了

2. vuex 全局状态管理器

一样的套路，走起

vue add vuex

对，就是这样，我们有成功了

3. axios 数据请求

再来一遍，走你 …

vue add axios

注意安装的包名 vue-cli-plugin-axios 插件形式的存在

注意事项：

vue add 的设计意图是为了安装和调用 Vue CLI 插件。对于普通的 npm 包而言，这不意味有一个替代（命令）。对于这些普通的 npm 包，你仍然需要（根据所选的 npm 包）使用包管理器。

4. CSS 预处理器

现在的项目中很多都使用了 CSS 预处理器，那在 @vue/cli 3.x 版本中如何引入使用呢？因为没有相关的 vue 插件，所以此处要按照普通的 npm 包，进行下载安装，此处以 sass 预处理器 为例。

npm install sass-loader sass -D

对，安装一个这个就支持了 sass 预处理了，内置的 webpack 已经把工作帮你做好了

在.vue 组件中使用 sass

<style lang="scss">
</style>

四、项目配置文件 vue.config.js

在项目的根目录下，配置 vue.config.js

module.exports = {// 配置项}

1. 向预处理器 Loader 传递选项

如向所有的 scss 文件中，传入共享的全局变量。

假定存在 src/assets/css/variables.scss 文件

module.exports = {
  css: {
    loaderOptions: {
      scss: {prependData: '@import"~@/assets/css/variables.scss"'}
    }
  }
}

注意，此处的官方案例是错误的，受到的是 sass-loader 新版本影响。需要改变的是：将 data 字段改为 prependData 字段

2. 设置 externals

在进行开发时，有时为了更好的进行文件的缓存(CDN)，减少打包的文件体积，部分包是不希望被 webpack 打包，但是还希望在项目中便捷的使用，可以选择使用 externals 配置。此处以引入 jQuery 为例。

public/index.html 引入包

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

vue.config.js

module.exports = {
  // configureWebpack 配置 webpack
  configureWebpack: {
    externals: {jQuery: 'jQuery'}
  }
}

src/components/HelloWorld.vue 使用 jQuery

import $ from 'jQuery'

随便用

3. proxy 代理

日常开发，必设转发代理

module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'http://xxoo.com',
        changeOrigin: true
      }
    }
  }
}

掌握了转发代理，麻麻再也不担心我和后端调试接口啦 …

五、辅助工具

1. VueDevtools

安装浏览器扩展 VueDevtools，辅助 Vue 开发，传送门

后记

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得 收藏 、 转发 、点击右下角按钮 在看，推荐给更多小伙伴呦，欢迎多多留言交流 …

胡哥有话说，一个有技术，有情怀的胡哥！京东开放平台首席前端攻城狮。与你一起聊聊大前端，分享前端系统架构，框架实现原理，最新最高效的技术实践！

长按扫码关注，更帅更漂亮呦！关注胡哥有话说公众号，可与胡哥继续深入交流呦！