vue(vite)项目架构

Posted 2023-04-02 小菜鸟学代码··

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>