vue3+ ts + element plus 实战

​ vue3+ ts + element plus 框架搭建前端项目的过程，采用vue-class-component方式来开发。

安装

准备环境

​ @vue/cli 4.5.12

创建项目

# 使用 vue cli 创建项目
vue create gfp-web

集成elementplus

参考文档

npm install element-plus --save

在main.ts 中引入elementplus

import { createApp } from 'vue'
import ElementPlus from 'element-plus' // 引入ElementPlus组件
import App from './App.vue'
import router from './router'
import store from './store'
import axios from './plugins/axios'
import 'element-plus/lib/theme-chalk/index.css' // 引入ElementPlus样式
createApp(App)
    .use(store)
    .use(router)
    .use(axios)
    .use(ElementPlus, { size: 'small', zIndex: 3000 })  // use ElementPlus并修改默认配置
    .mount('#app')

集成axios

参考文档

npm install axios --save
npm install vue-axios --save

在main.ts 中引入axios

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'
import router from './router'
import store from './store'
import 'element-plus/lib/theme-chalk/index.css'
import axios from 'axios'
import VueAxios from 'vue-axios'

const app = createApp(App)
app.use(store)
app.use(router)
app.use(VueAxios,axios) // 引入axios 和 vue-axios
app.use(ElementPlus, { size: 'small', zIndex: 3000 }).mount('#app')

封装axios

// 在src/plugins目录中新建axios.ts
"use strict";
import axios,{AxiosRequestConfig,AxiosResponse} from "axios";
import { ElLoading } from 'element-plus';
let loading:any
function startLoading(){
  interface Options{
    lock:boolean,
    text:string,
    background:string
  }
  const options:Options = {
    lock:true,
    text:"拼命加载中,请耐心等待...'",
    background:'rgba(0,0,0,0.7)'
  }
  loading = ElLoading.service(options);
}

function endLoading(){
  if(loading){
    loading.close();
    loading = null;
  }
}
let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};
export default function(){
  axios.interceptors.request.use(
    function(config:AxiosRequestConfig) {
      startLoading()
      return config;
    },
    function(error) {
      return Promise.reject(error);
    }
  );
  axios.interceptors.response.use(
    function(response:AxiosResponse<any>) {
      endLoading()
      return response;
    },
    function(error) {
      endLoading()
      return Promise.reject(error);
    }
  );  
}

// 在main.ts中引入此文件，并执行暴露的方法
import axiosCust from './plugins/axios'
axiosCust();

// 这里应该用类似插件的方式来做的，但是暂时不会做插件，所以先用函数的方式来做，不太优雅

使用

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
  props: {
    msg: String
  }
})
export default class HelloWorld extends Vue {
  // ! 表示不能为空
  msg!: string
  userName = this.msg
  get hellMsg(): string {
    return 'Hello, ' + this.msg
  }
  mounted() {
      // 直接使用axios
    this.axios.get("/api/common/getDictType/23")
    .then((data)=>{
      this.userName = data.data;
    })
    console.log('mounted')
  }
}
</script>

跨域处理

// 项目根路径下创建vue.config.js文件（名称和路径必须一致）
'use strict'
module.exports = {
    lintOnSave: false,
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8081',//后端接口地址
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '',
                }
            }
        }
    }
}

vue-class-component

github

中文文档

参考文档

待更新…