vue(vite)项目架构

vue(vite)项目架构

• assets :放些静态文件资源（图片,css,js)
• components : 放些封装的组件可以根据自己公司的要求去封装组件
• config : 主要存放一些封装好的api,比如网络请求，路由拦截，加密方法等等
• router : 路由存放器，处理些页面路由的问题
• views : 页面
  注意：文件名并不是固定，我们可以根据自己搭建的框架去写

router(index.js)

简单的路由配置，可以根据公司要求进行适当修改

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
import Home from "../views/home.vue";
import User from "../views/user.vue";
import Index from "../views/index.vue";

const routes = [
    { path: '/', component: Index, name: 'index' },
    { path: '/home', component: Home, name: 'home' },
    { path: '/user', component: User, name: 'user' }
]
//这里用的hash模式路由
const router = createRouter({
    // history内部模块提供了history属性模式,routes路由路径
    history: createWebHashHistory(),
    routes
})
export default router

components

可以引用第三方插件库进行自己的修改，比如传参返回值，根据自己需求去修改，比如分页效果等等，这里引用的element-ui

APP.vue

这里也只是关注几点，script上面加setup可以直接当作原生js去写，这样在vue里面写惯了react的同学也不会因为写法困扰

<template>
  <div id="box">
    <router-link to="/">主页</router-link>
    <router-link to="/home">首页</router-link>
    <router-link to="/user">用户页</router-link>
    <button @click="goAbout">点击logo跳转页</button>
    <button @click="router.push('/user')">跳转用户页</button>
    <div>{{ message }}</div>
  </div>
  <router-view></router-view>
</template>
<script setup>
import { useRoute, useRouter } from "vue-router";
let route = useRoute();
let router = useRouter();
function goAbout() {
  router.push("/home");
}
</script>

<script>
export default {
  name: "App",
  data() {
    return {
      message: "此时mustache表达式是通过data为函数来获取message的值",
    };
  },
};
</script>
<style lang="scss">
#box {
  border: 1px solid black;
  background: #fff;
}
</style>

config

里面可以存放一些公共的频繁率高的组件 ，比如枚举值，请求的封装等等

这篇文章主要讲架构框架 所以代码部分只展示一部分

大家还有什么补充的欢迎在评论区指出