使用TypeScript开发vue-cli3项目

ts引入了数据类型，可以更好的发现问题，本着学习的目的搭建了TypeScript开发的vue-cli3项目

下面的内容默认读者具备了vue全家桶基础并具备了ES2015+语法与TypeScript基础！！

在vue-cli3中使用ts开发开始：

vue create ts-app

上面是我的默认选项（然后我会去装一套ui，本人懒癌，css不想写，这里装的element-ui）

npm i element-ui -S

mian.ts: 引入element-ui

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)

在组件中会有一些新的东西（ts的写法）：

1、组件中的装饰器

// 引入装饰器
import { Component, Vue, Provide } from 'vue-property-decorator'

2、export default（不导出是不行滴）

export default class Login extends Vue {}

3、组件挂载（组件要用@Component挂载）与data数据定义（数据要用@Provide()定义，暂时还没有觉得有多方便~~），在标签的使用上没有什么区别，还是双大括号，都是vue的语法

import { Component, Vue, Provide } from 'vue-property-decorator'
import LoginHeader from './LoginHeader.vue'
@Component({
  components: {
    LoginHeader
  }
})


export default class Login extends Vue {
  @Provide() ruleForm: {
    username: String,
    password: String,
    autoLogin: Boolean
  } = {
    username: '',
    password: '',
    autoLogin: !1 // 是否自动登录
  }
}

4、引入axios（这里要注意：要下ts版的 axios  会下载俩个包）

npm i axios @types/axios --save


#如果是安装 nprogress 进度条，都需要ts处理一下
# npm install nprogress @types/nprogress -S

5、axios 封装 http.ts（我这里是用的element-ui）创建文件/src/utils/http.ts

import axios, { AxiosResponse, AxiosRequestConfig } from 'axios'
import { Message } from 'element-ui'
import router from '@/router'

const service = axios.create({
  timeout: 10000 // 超时时间
})

//  请求拦截
service.interceptors.request.use((config:AxiosRequestConfig) => {
  return config
}, (err:any) => {
  Promise.reject(err)
})

// 响应拦截
service.interceptors.response.use((response: AxiosResponse) => {
  return response
}, (err:any) => {
  let errMsg = ''
  if (err && err.response.status) {
    switch (err.response.status) {
      case 401:
        errMsg = '登录状态失效，请重新登录'
        localStorage.removeItem('tsToken')
        router.push('/login')
        break
      case 403:
        errMsg = '拒绝访问'
        break

      case 408:
        errMsg = '请求超时'
        break

      case 500:
        errMsg = '服务器内部错误'
        break

      case 501:
        errMsg = '服务未实现'
        break

      case 502:
        errMsg = '网关错误'
        break

      case 503:
        errMsg = '服务不可用'
        break

      case 504:
        errMsg = '网关超时'
        break

      case 505:
        errMsg = 'HTTP版本不受支持'
        break

      default:
        errMsg = err.response.data.msg
        break
    }
  } else {
    errMsg = err
  }
  Message.error(errMsg)
  return Promise.reject(errMsg)
})
export default service

6、全局挂载 axios， main.ts

import axios from '@/utils/http'
Vue.prototype.$axios = axios

6、cli3中，需要自己在根目录下创建vue.config.js文件来做跨域处理

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/',
  // outputDir: 在npm run build时 生成文件的目录 type:string, default:'dist'
  // outputDir: 'dist',
  // pages:{ type:Object,Default:undfind }
  devServer: {
    disableHostCheck: true, // 花生壳显示Invalid Host header让其不检查hostname。
    https: false, // https:{type:Boolean}
    open: false, // 配置自动启动浏览器
    // proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理
    // port: 80,
    // host: 'wxtest.com',
    proxy: {
      '/api': {
        target: 'http://192.168.0.188:8080/api',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    } // 配置多个代理,
  }
}

7、安装vuex-class（安装过之后，组件中才能引入vuex的方法）

npm i vuex-class --save

// 组件中
import { State, Getter, Mutation, Action } from 'vuex-class'

8、jwt-decode 用于解析token

npm i jwt-decode @types/jwt-decode --save


#使用方法
import jwt_decode from 'jwt-decode'
var token = 'eyJ0eXAiO.../// jwt token'
var decoded = jwt_decode(token)

有空了再续更~