vue3 基本结构说明

目的

让自己忘记后，能通过看文档迅速熟悉，并动手操作

基本结构

与vue2无太大的出入。

<template>
html代码
template>
<script>
js代码
script>
<style>
css样式
style>

vue2具体结构

结合代码

<template>
  <div>
  <el-button type="primary" @click="export()">导出数据el-button>    
  div>
template>
<script>
    export default {
        data() {
        //页面中的所有需要用到的变量定义
           return {
            a:"",
            b:"",
            ......
       };
        },
        methods: {
        页面中引用的所有函数
        export(){},
        ......... 
    }
script>
<style scoped>
style>

注：
1.路由配置：
router文件下的index.js

import Vue from 'vue'
import Router from 'vue-router'
import exportData from '@/components/exportData'
import exportData1 from '@/components/exportData1'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',//组件路径
      name: 'exportData',//和组件的文件名相同
      component: exportData //组件名字
    },
    {
      path: '/',//组件路径
      name: 'exportData1',//和组件的文件名相同
      component: exportData1 //组件名字
    }
    //多个组件用逗号隔开
    ,
    {
    .......
    }
  ]
})

2.组件引用：

ComponentB.vue
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

以上属于局部注册组件
3.后端api配置

window.LOCAL_CONFIG = {
  API_HOME: 'http://localhost:xxxx/dev-api'
};

注：以上只是现阶段接触到的总结，后续深入了解后会进行补充和纠正

vue3具体结构

以代码展开讲解

<template>
 <div>
 div>
template>

<script>
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";

export default {
 //引入组件
  setup() {
    //定义变量和函数
    return {
     //页面中定义的函数和变量
    };
  },
};
script>
<style scoped>
style>

1.路由配置
router下的index.js

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";
const routes = [
 {
        path: "/login",
        name: "Login",
        meta: {
            title: '登录'
        },
        component: () =>
        import ( /* webpackChunkName: "login" */ "../views/audit/Login.vue")
    },
]
const router = createRouter({
    history: createWebHistory("/"),
    routes
});
//分普通用户和管理员两种身份
router.beforeEach((to, from, next) => {
    const c_token = localStorage.getItem("Authorization");
    const authority = localStorage.getItem("authority");
    const role = to.meta.authority;
    if (to.path === '/register') {
        next();
    } else if ((!c_token || !authority) && to.path !== '/login') {
        next('/login');
    } else {
        next();
    }
});

export default router;

注：vue3的路由配置，出现了一点变化

2.组件引用

<script>
import * as echarts from "echarts";
export default{
name:'xxx',
components: {
      // Schart,
      echarts,
    },
    setup(){
    return{
    }
    }
}
script>

3.全局api根路径

import vue from '@vitejs/plugin-vue'
export default {
    base: './',
    plugins: [vue()],
    optimizeDeps: {
        include: ['schart.js']
    },
    server: {
        port: 3000,
        // 配置服务器代理
        proxy: {
            "^/api": { // 代理接口前缀为/apis的请求
                "target": 'http://localhost:8080/', // 对应的代理地址
                "secure": false, // 接受运行在https上，默认不接受
                "changeOrigin": true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
            },
            "^/static": { // 代理接口前缀为/apis的请求
                "target": 'http://localhost:8080/', // 对应的代理地址
                "secure": false, // 接受运行在https上，默认不接受
                "changeOrigin": true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求，这样就不会有跨域问题（只适合开发环境）
            },
        },
    },
}

初步总结，及对比，后续进行继续完善。