【服务端看前端】 vue3.0之目录结构和component组件_vue3.0目录结构

• 工程目录介绍
• component示例
• router路由信息
• APP.vue根组件
• main.js工程实例

vue 把所有前端视图统一组件化封装到.vue结尾的文件中，vue文件彼此可以互相引用；类似html的包含引用；组件可以声明为全局组件（工程级），局部组件（在引用处引入）；完整的一个前端页面包含多个 vue文件；

工程目录介绍

• 如下图所示：

  • src/component: 各类业务组件，前端可视化组件的开发空间（developer主要工作空间）

  • src/router: 路由空间，前端浏览器导航栏url路由策略（ 使用 vue create 并没有创建，手动创建）

  • APP.vue： 根component，业务组件的引用实例化在这个目录（可编辑更改），局部注册使用；

  • main.js： vue实例初始化，各类包的注入文件；（加载router工具，加载mount位置）

  • vue.config.js: vue配置文件（例如：代理配置-解决cors问题）

    

component示例

业务组件全是 .vue结尾的文件，文件内容大致包含dom元素(html\css)、vue-js信息、包信息3个类别

一个较完整的vue文件示例：

<script setup>
<!--包信息 -->
import { ref } from 'vue'
<!--类似js的一些写法内容 -->
const count = ref(0)

function increment() {
  count.value++
}
</script>

<!--类似html组件的一些写法内容 和vue的js内容结合，形成动态网页-->
<template>
  <button @click="increment" id="click-button">
    {{ count }}
  </button>
</template>

<!--类似css的写法内容，形成网页风格信息-->
<style scoped>
 
   #content {
    display: inline-block;
    margin-left: 15px;
    position: fixed;
  }
  #logoimg {
    width: 120px;
    height: 30px;
    
  }
  </style>
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

router路由信息

前端组件和访问请求直接的路由关系，组件的action以及url的路径可以控制通过路由策略转到对应的vue组件进行页面渲染； 例如用来做 导航的跳转

前提：安装vue-router:

# 命令npm 
npm install vue-router
1
2

一个 router-js文件的配置内容示例

<!--路由包包信息 -->
import { createWebHistory, createRouter } from "vue-router";

<!--分发的组件信息 -->
import HelloWorld from '@/components/HelloWorld.vue'
import DateTable from '@/components/DateTable.vue';

const routes = [
  {
    path: "/", <!-- 浏览器导航访问/， 就加载DateTable这个组件 -->
    name: "Home",
    component: DateTable,
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

APP.vue根组件

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <!-- 引入一个vue组件，组件名称：HelloWorld -->	
  <HelloWorld msg="Welcome to Your Vue.js App"/> 
  <button @click="increment">
    {{ count }}
  </button>
</template>
1
2
3
4
5
6
7
8
9
10
11

• 一个前端页面由很多个vue组件形成；例如常规的 导航栏.vue、内容栏.vue、网站地图.vue; 这些大大小小的vue文件，组成一个个用户界面；如果转换成一个属性就够，类似官网下图的举例

App (root component)
├─ TodoList  ------ 一个vue文件
│  └─ TodoItem ------ 一个vue文件
│     ├─ TodoDeleteButton ------ 一个vue文件
│     └─ TodoEditButton ------ 一个vue文件
└─ TodoFooter ------ 一个vue文件
   ├─ TodoClearButton ------ 一个vue文件
   └─ TodoStatistics ------ 一个vue文件
1
2
3
4
5
6
7
8

vue模板组件，只有在mount后vue-nodes运行加载才会渲染出来，不mount它就是一个静态的代码块；

app.mount(一个实际的页面dom元素--例如一个div组件的id)
1

mount后组件属性结构就按照代码编写的逻辑进行渲染，形成我们熟悉的html+css+js用户界面；

根据这个逻辑：vue.js 这个框架，可以用来嵌入到一个非vue的前端工程中，慢慢改造自己的工程

main.js工程实例

初始化一个vue实例： 可以通过use()函数注入需要的包，可以通过mount()函数挂载一个容器

<!-- 引入createAPP 函数，创建一个vue应用实例 -->
import { createApp } from 'vue'
<!-- 从一个单文件组件中导入根组件 -->
import App from './App.vue'

const app = createApp(App)
1
2
3
4
5
6

实际工程开发，需要对很多的文件和组件进行封装提高易用性和可维护性，这里不赘述