基于@vue/cli 3.x的从0到1搭建Vue项目的实践

定场诗

代码语言：javascript复制

守法朝朝忧闷，强梁夜夜欢歌，

损人利己骑马骡，正直公平挨饿。

修桥补路瞎眼，杀人放火的儿多，

我到西天问我佛，佛说：我也没辙！

概述

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官网传送门下载安装对应系统的版本即可。

检测是否安装成功

代码语言：javascript复制

// 检测node版本
node -v

// 检测npm版本
npm -v

2. 安装脚手架@vue/cli

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

代码语言：javascript复制

npm install -g @vue/cli

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

检测是否安装成功：

代码语言：javascript复制

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

我的版本是3.11.0

三、项目搭建

1. 项目结构初始化

代码语言：javascript复制

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作为插件，添加到项目中

代码语言：javascript复制

vue add router

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

2. vuex 全局状态管理器

一样的套路，走起

代码语言：javascript复制

vue add vuex

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

3. axios 数据请求

再来一遍，走你...

代码语言：javascript复制

vue add axios

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

注意事项：

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

4. CSS预处理器

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

代码语言：javascript复制

npm install sass-loader sass -D

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

在.vue组件中使用sass

代码语言：javascript复制

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

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

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

代码语言：javascript复制

module.exports = {
  // 配置项
}

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

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

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

代码语言：javascript复制

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

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

2. 设置externals

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

public/index.html 引入包

代码语言：javascript复制

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

vue.config.js

代码语言：javascript复制

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

src/components/HelloWorld.vue 使用jQuery

代码语言：javascript复制

import $ from 'jQuery'

随便用

3. proxy代理

日常开发，必设转发代理

代码语言：javascript复制

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

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

五、辅助工具

1. VueDevtools

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

vue.js npm sass javascript css

0 人点赞