vue之src文件流程及根组件APP

最新推荐文章于 2023-02-14 11:24:36 发布

Renkx0404

最新推荐文章于 2023-02-14 11:24:36 发布

阅读量331

点赞数 1

本文链接：https://blog.csdn.net/Renkx0404/article/details/84249250

版权

初始vue-cli中src文件的组成

assets文件夹
```
 放一些对应的图片
```
component文件夹
```
 组件文件夹
```
App.vue文件
```
 根组件
```

 组件包含三个部分：		
 	 - 第一部分：模板 html结构(有且只有一个根模板）；
 	 - 第二部分：行为 js 处理逻辑
 	 - 第三部分：样式 css 解决样式

main.js文件

 和index.html文件直接关联的文件

文件流程

	index.html --->main.js--->App.vue

				<!DOCTYPE html>
				<html>
				  <head>
				    <meta charset="utf-8">
				    <meta name="viewport" content="width=device-width,initial-scale=1.0">
				    <title>my-project</title>
				  </head>
				  <body>
				    <div id="app"></div>
				    <!-- built files will be auto injected -->
				  </body>
				</html>

	index.html 是当前项目的入口文件，这里的 <div id="#app"></div>容器就是通main.js,引入的,当执行完index.html的是时
	候就会直接的执行main.js

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

	这里是先引入vue，然后就可以实例化对象。new Vue({});然后就是引入APP根组件（组件可以理解为一个功能的页面）

				// 组件的html结构层
				<template>
				  <div id="app">
				    <img src="./assets/logo.png">
				    <router-view/>
				  </div>
				  //这里有且只有一个根组件
				</template>
				//JS 逻辑行为层
				<script>
				export default {
				  name: 'App'
				}
				</script>
				//css解决样式
				<style>
				#app {
				  font-family: 'Avenir', Helvetica, Arial, sans-serif;
				}
				</style>