Vue3+Vite+ElementPlus+VueRouter相关配置

2021-04-08

vue

Word count: 828 | Reading time≈ 4 min

element-plus源码有点问题打包的时候会报错，需要手动修改…

vite中文文档

前端构建工具，能够显著提升前端开发体验

初始化项目

1	npm init @vitejs/app

element-plus UI

element-ui没有兼容vue3，但是新推出了element-plus来兼容vue3

安装element-plus

1	npm i element-plus -S

修改配置文件引入库

修改main.ts

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'  // +
import 'element-plus/lib/theme-chalk/index.css' // +

createApp(App).use(ElementPlus).mount('#app')  // .use(ElementPlus)

ElMessageBox消息弹框

一个我自己推出来的功能.. 文档没找着
原因是我要在setup里面使用消息弹框组件但按文档的配置需要用到this

// 但是文档上是写的 this.$alert('...')
// 众所周知 vue3 的setup里面没有 this
// 根据 消息提示 组件的配置方法： ElMessage('...')
// 我大胆猜想了下消息弹框的使用 然后 成功了..

setup:()=>{
  // ...
  ElMessageBox.alert('...')
}

vue-router

安装插件

1	npm i vue-router@next -S

编写路由配置文件

新建router.ts文件
没有在vite.config.ts配置的话不能使用@代替src

import { createRouter, createWebHistory } from 'vue-router'

const Router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            component: () => import('../components/HelloWorld.vue')
        },
        {
            path: '/home',
            name: 'home',
            component: () => import('../components/Home.vue')
        },
    ]
})

export default Router

修改配置文件引入库

在main.ts文件内添加内容

1
2
3

import router from './router/router'

createApp(App).use(router).mount('#app')  // .use(router)

修改App.vue

将文件修改成

<div id="app">
    <!-- 展示路由内容 -->
   <router-view></router-view>  
 </div>

axios

安装插件

1	npm i axios -S

新建 http.ts 文件对axios进行配置

import axios from 'axios'

axios.defaults.baseURL = '/api'
//'http://rap2api.taobao.org/app/mock/data'  不代理
axios.defaults.timeout = 10000

export function get(url: string, params: any) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then((res) => {
            resolve(res)
        }).catch((err) => {
            reject(err)
        })
    })
}

新建 api.ts 文件对接口请求进行封装

1 2	import { get } from './http' export const getData = (url: string, params: any) => get(url, params)

在 vite.config.ts 中配置proxy代理

// ...
server: {
    host: '10.9.37.4',
    port: 8080,
    open: true,
    proxy: {
      '/api': {
        target: 'http://rap2api.taobao.org/app/mock/data', // 目标接口域名
        changeOrigin: true,
        secure: false,  // 是否是https
        ws: true,
        rewrite: (path) => path.replace(/^\/api/, '') // 重新接口地址
      }
    }

  }

使用

引入方法
1
import { getData } from '../api/api'
使用

在组合api中使用异步获取的话父组件使用的时候要在外层添加 <suspense>进行包裹不然数据不会展示

// child component
setup: async () => {
        let datas: any = await getData('/1531382', { scope: 'response' })
        
        let color = reactive(JSON.parse(JSON.stringify(datas.data.data.color)))
        return { color }
    }

// App.vue
<template>
  <suspense>
    <router-view></router-view>
  </suspense>
</template>

vite.config.ts配置

详情

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const path = require('path')

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  alias: {
    '@': path.join(__dirname, 'src')  // 配置用@来代表src目录
  },
  // 服务器相关配置
  server: {
    port: 8080,
    host: '0.0.0.0',
    open: true, // 是否自动开启浏览器
  },
})