vue学习笔记-目录结构及理解-02

夏隐居士

已于 2024-04-04 05:38:22 修改

阅读量1.3k

点赞数 23

分类专栏： vue 文章标签： vue.js

于 2024-04-04 05:30:33 首次发布

本文链接：https://blog.csdn.net/qq_20244015/article/details/137355560

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.常用目录结构

.vscode //vscode环境文件夹
node_moduies //nodejs环境文件夹
public //全局静态资源文件夹
src //程序文件夹
env.d.ts //ts语言声明文件
index.html //浏览器入口文件
package-lock.json //脚手架项目依赖声明列表文件
package.json //脚手架用户安装依赖声明列表文件
tsconfig.app.json //st应用配置文件
tsconfig.json \ jsconfig.json //项目配置文件
tsconfig.node.json //nodejs配置文件
vite.config.ts \ vite.config.js //vite配置文件

2.src目录结构

1.assets //存放资源文件，如图片、样式表等文件夹
2.components //渲染组件文件夹
3.router //Router路由配置文件夹
4.store //pinia状态管理文件夹
5.views //vue渲染页面文件夹
6. App.vue //主页面渲染文件
7.main.js / main.st //项目入口文件，全局的配置和初始化

3.main.js / main.st文件的理解

/*仅为个人理解*/

import './assets/main.css'               //引入一个全局的css样式文件

import { createApp } from 'vue'          //引入一个vue类型，名为createApp
import { createPinia } from 'pinia'      //引入一个pinia的类型，名为createPinia

import App from './App.vue'              //引入主组件App.vue名为app
import router from './router'            //引入router文件夹下的index.js配置文件，名为router 

const app = createApp(App)               //将App.vue文件创建组件名为app

app.use(createPinia())                   //挂载pinia插件到app
app.use(router)                          //挂载router配置到app

app.mount('#app')                        //渲染App.vue的模板到index.html页面中id=app的元素

4.App.vue 文件的理解

//这里写js脚本代码
<script setup>
//引入路由中的 RouterLink  RouterView方法
import { RouterLink, RouterView } from 'vue-router' 
//引入一个HelloWorld.vue模板或者叫组件
import HelloWorld from './components/HelloWorld.vue'
</script>

//模板
<template>
  //定义一个header的标签，这个标签是全局固定的，因为直接在app.vue定义
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    
    <div class="wrapper">
      <HelloWorld msg="You did it!" />

      <nav>
        //定义两个RouterLink标签，类似a标签的组件，
        //当用户点击后会加路由文件中指定路径的xxx.vue文件内的模板到下面的RouterView标签中
        //也就说这部分的内容是固定的，每个页面都会携带这块header标签内容
        <RouterLink to="/">Home</RouterLink>        
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  //RouterLink生成的标签被点击后，指定路由模板的内容会加载到这里
  <RouterView />
</template>

<style scoped>
//这里为css代码
</style>

5.路由中的index.js文件的理解

//引入路由插件中的createRouter  createWebHistory 两个方法
import { createRouter, createWebHistory } from 'vue-router'
//引入一个组件名为HomeView 
import HomeView from '../views/HomeView.vue'

//创建一个路由名为router 
const router = createRouter({
  //指定路由访问方式
  history: createWebHistory(import.meta.env.BASE_URL),
  //定义两个路由分别指向两个vue文件
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

//把配置好的router公布出去，让其他组件可访问
export default router

代码中定义了两个路由，分别演示了两种方法分别指向了两个不同的vue后缀的组件文件，这两个路由path路径对应了4.App.vue代码中的RouterLink的to属性指向的路径

6.index.html 入口文件理解

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

代码中引入一个“/src/main.js”的文件，这个文件中指定了把App.vue模板组件中的内容动态渲染加载到index.html页面中

7.总结

通过以上几个文件代码可以理解为，它的启动访问顺序为，index.html中调用了main.js中的代码，来解析App.vue中的模板内容，然后加载到index.html页面中，由始至终整个项目只有一个index.html页面，通过丰富App.vue和main.js中的代码和结合路由实现页面的静态切换，App.vue中通过路由引入不同的vue组件进行"拼装",main.js中可以引入全局的js和css文件和各种插件，组成了整个网站