Vue项目介绍

1.Vue项目结构：build文件夹：项目构建（webpack）相关代码config文件夹：配置文件夹，配置目录，端口号等等node_modules:npm依赖的项目模块src文件夹：开发目录src包括：App.vue文件：项目入口文件main.js文件项目的核心文件router文件夹：存放路由文件，里面的index.js存放路由component文件夹：组件文件夹static文件夹：静态资源文件

st紫月

6767人浏览 · 2021-10-06 12:38:44

st紫月 · 2021-10-06 12:38:44 发布

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) 也是相同的原理，$ mount(’#app’) ：手动挂载到id为app的dom中的意思，当Vue实例没有el属性时，则该实例尚没有挂载到某个dom中；
假如需要延迟挂载，可以在之后手动调用vm.$mount()方法来挂载

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^