vue3项目技术架构图介绍vue项目的整体架构

转载

晨曦微露s 2023-12-13 01:32:09

文章标签 vue3项目技术架构图 vue.js html javascript Vue 文章分类 架构后端开发

1.Vue项目结构：

vue3项目技术架构图介绍vue项目的整体架构_Vue

build文件夹：项目构建（webpack）相关代码

config文件夹：配置文件夹，配置目录，端口号等等

node_modules:npm依赖的项目模块

src文件夹：开发目录

src包括：

App.vue文件：项目入口文件

main.js文件项目的核心文件

router文件夹：存放路由文件，里面的index.js存放路由

component文件夹：组件文件夹

static文件夹：静态资源文件夹
index.html文件：主页面文件
package.json：配置文件

2.vue单文件组件
vue单文件组件就是后缀为.vue的文件，文件中有三个部分的内容

<template>
		<!--这里用于定义Vue组件的模板内容-->
	</template>
	<script type="text/javascript">
		//这里用于定义vue组件的业务逻辑
		export default{
			name:,
			data:(){
				//私有数据
				return {}
			},
			methods:{
				//处理函数
			},
			//其他业务逻辑
		}
	</script>
	这里用于定义组件的样式，scoped设置样式只在当前组件内生效
	<style scoped>
		
	</style>

3.vue项目的运行顺序：
首先vue会先执行index.html文件，代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CNode</title>
  </head>
  <body>
    <div id="app">
			
	</div>
    <!-- built files will be auto injected -->
  </body>
</html>

现在主页面已经有了一个id为app的div盒子
vue会再加载main.js文件，该文件不需要被引入到index.html也会执行
代码如下：

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
Vue.prototype.$http = axios;
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

这里新建了vue对象，里面的component里是项目可能需要用到的组件，起到一种声明的作用，
template是调用在component当中声明的组件。
vue在执行main.js文件时，会自动定位到id为app的盒子，给他渲染template组件中的内容，
组件的内容来自app.vue文件，然后会再执行路由文件，也就是router文件夹下面的index.js文件和app.vue中template中其他的组件内容
以上就是vue执行过程的初步介绍

4.Vue.prototype. $vue3项目技术架构图介绍vue项目的整体架构_javascript_02$ mount(’#app’) ：手动挂载到id为app的dom中的意思，当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；