基于@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预处理器)的相关配置。

1、认识新版本

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

2、准备工做

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

3、项目搭建

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>复制代码

4、项目配置文件 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
      }
    }
  }
}复制代码

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

5、辅助工具

1. VueDevtools

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

后记

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

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

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