Vue的学习与使用_01.Vue的基本框架-CSDN博客

本文链接：https://blog.csdn.net/jieweizhuding/article/details/137807004

本文详细解读了Vue项目的基本结构，包括脚手架中的文件分布、main.js的入口作用、App.vue和HelloWorld组件的定义，以及mixin的使用。重点介绍了组件之间的依赖关系和加载顺序。

摘要由CSDN通过智能技术生成

Vue的框架

(1)解析Vue脚手架创建的项目模板

在这里插入图片描述

node_module中是Vue的基本配置与依赖
public中是html首页(index.html)与网址图标
assets中是网页中用到的静态资源包括图片视频等
components中是除了App.Vue下的其余组件
App.Vue是最主要且地位唯一的组件,统领所有的其他组件
main.js是项目的入口,用于连接index,html与App.Vue

(2)解析主要文件的内容

①main.js

//导入Vue核心,不包含模板解析器
import Vue from 'vue'
//导入App组件
import App from './App.vue'
//关闭生产提示
Vue.config.productionTip = false
//创建vm(Root),render函数是将App组件放入Root中并将App暴露给index.html
new Vue({
  render: h => h(App),
}).$mount('#app')

②index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  //如果浏览器不支持JavaScipt,则提示如下语句.
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
 //使用vm
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

③App.vue

//定义App模板内容
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>
//js代码
<script>
//将components中的组件导入
import HelloWorld from './components/HelloWorld.vue'
//默认暴露,名字为App,即定义了<App/>,
//每当调用一次这个标签就会调用一次VueComponent函数新生成一个对象,每个对象同名但相互独立
//局部暴露,即App,HelloWorld等只能在其直接"管理者"中使用,而其"管理者"的"管理者"无法使用
export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>
//css是汇总到一起的,不会因为在不同组件中而相互分离
//因此其他的组件一般会添加scoped属性,而在App中的就可以认为是全局属性,
//在任何一个组件中的内容只要与这里的css匹配上都会被修饰.
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

④component

//定义模板
<template>
  ...
</template>
//与App类似,具体内容在之后会集中具体讲述
<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      
    }
  },
}
</script>
//局部css
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

(3)其他的新增文件

①mixin.js

export const mix1={
	//组件中重复部分
}
export const mix2={
	//组件中重复部分
}
...

使用时有局部使用
在组件的script中

import {mix1} from "../mixin.js"
import {mix2} from "../mixin.js"
...
//在属性中
	mixins:[mix1,mix2..],

在全局使用
在main.js中

import {mix1} from "../mixin.js"
import {mix2} from "../mixin.js"
...
Vue.mixin(mix1)
Vue.mixin(mix2)
...

并且如果mixin与本地数据冲突,使用本地数据.

(4)运行加载顺序

在这里插入图片描述
即文件入口为main.js,然后去寻找App.vue与index.html,又因为App.vue中使用了components中的内容,就去寻找components并将components中的内容挂载到App.vue中,最终将App.vue中的全部内容交给index.html