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

以上优秀描述，来自于官方，手动微笑.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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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开发，传送门

后记

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

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