1.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. 自 定 义 变 量 名 = i m p o r t 导 入 的 变 量 名 : 把 导 入 的 包 挂 载 到 V u e 对 象 当 中 , 代 表 在 其 他 所 有 的 v u e 页 面 中 都 可 以 使 用 这 个 文 件 , V u e . u s e ( R o u t e r ) 也 是 相 同 的 原 理 , 自定义变量名 = import导入的变量名:把导入的包挂载到Vue对象当中, 代表在其他所有的vue页面中都可以使用这个文件,Vue.use(Router)也是相同的原理, =importVuevue使Vue.use(Router)mount(’#app’) :手动挂载到id为app的dom中的意思,当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中;
假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载

Logo

前往低代码交流专区

更多推荐