前言
vue-cli3.0来到了rc3版本。3.0相比2.x最大的区别是与create-react-app angular-cli一样提供了开箱即用的功能，尤其是对typescript的支持非常友好，只需要在create项目时通过交互式命令行选择即可以非常快速的搭建起vue+typescript的开发环境。这篇博客将介绍如何搭建vue+typescript+scss开发环境（vue-cli版本为rc3)
实现
- 首先全局安装最新版的vue-cli
1
2
3
| npm i -g @vue/vue-cli
yarn global add @vue/cli
|
- 创建一个新项目
1
| vue create hello-vue-cli
|
- 选择开发设置
默认的vue开发设置是只有babel+eslint，此时我们选择Manually select features
vue-cli键盘交互逻辑为方向键+space+enter
如图所示space选中，a是全选，i是反选
我们在这里要选中typescript，如果有其他需求也可以选择。
选择完成后是选择eslint配置和是否保存配置。如果保存配置之后下次新建项目时就可以直接选择，一键新建项目，非常方便！
- 启动项目
当配置完成后，可以直接按照提示启动项目了
1
2
| cd hello-vue-cli
vue serve
|
- 增加scss开发设置
vue-cli3.0提供了scss，less，stylus等预处理器的开箱即用，具体操作如下：
1
2
3
4
|
yarn add node-sass sass-loader --dev
npm i node-sass sass-loader --save-dev
|
1
2
3
4
| // 给.vue文件里的style增加lang属性
<style lang="scss" scoped>
</style>
|
- 开发代理设置
在平时开发中，前后端分离项目离不开反向代理，vue-cli2.x中配置开发代理是在config文件夹下到index.js，而到了3.x到版本之后，vue-cli将所有到配置文件都内置了，为了提供开箱即用都开发体验，没有向我们暴露配置文件，但是却提供了一种添加或者覆盖默认配置都方法，这点相对于create-react-app, angular-cli来讲更加友好，他们要想实现自由配置一般是先要eject之后，自己在配置文件修改配置，冗余都配置文件对于好多新手来讲都很不友好，而vue-cli提供都这种方式是相对比较友好的。反向代理都配置如下：
首先，在项目都根目录创建一个vue.config.js都文件，然后写入下面的代码：
1
2
3
4
5
6
|
module.exports = {
devServer: {
proxy: 'xxx',
},
}
|
- ts配置vue扩展属性
在使用ts，尤其是vue这种渐进式都框架，增加属性无疑是比较常见都需求，比如我们引入axios之后讲axios扩展到vue到原型上，这时候发现我们直接使用会不能通过编译，ts会告诉我们属性不存在，这时候怎么办呢？还好vue官方文档提供了一种实现方法，如下：
1
2
3
4
5
6
7
8
9
|
import Vue from 'vue'
import { AxiosInstance } from 'axios';
declare module 'vue/types/vue' {
interface Vue {
$http: AxiosInstance
}
}
|
1
2
3
4
|
import axios from 'axios'
Vue.prototype.$http = axios
|
1
2
3
4
5
6
7
8
9
10
11
| async mountecd() {
try {
// 测试，先讲返回值设置为any
const { data } = await this.$http.get<any>('xxx')
} catch (error) {
// TODO 捕获错误
}
}
|
至此，我们基于新版vue-cli3.0的vue+typescript+scss开发环境已经全部搭建完毕。
