vue-框架模板的源代码注释-白红宇

vue-框架模板的源代码注释

阅读量：6080 次

发布时间：2019-06-20

本文共 3377 字，大约阅读时间需要 11 分钟。

请稍等。。吃完饭回来写

吃饭回来了~嘿

————————————————正经分割线—————————————————

先看我的目录结构：这是配置好node环境和配置好webpack后，生成的原始框架。

具体配置方法移步官网：https://cn.vuejs.org/v2/guide/installation.html#命令行工具-CLI

官网没有介绍框架的详细信息，这里我补充一下：

脚手架目录介绍
CLI脚手架	webpack搭建的开发环境，使用es6语法，打包和压缩js为一个文件，项目文件在环境中编译而不是浏览器，实现页面自动刷新
环境	node.js（安装node和npm）
build 文件夹	构建客户端和服务端，可以改变其端口号
config 文件夹	对应的配置文件
static 文件夹	静态文件
.gitignore	git的忽略文件。。。不重要
index.html	！！** 入口文件
package.json	node的配置文件，说明一些需要的依赖。有了这个文件，在文件目录下打开命令行，执行cnpm i 安装依赖。

开发用的src 文件夹，介绍如下：

src 文件夹	开发文件，src下的文件介绍：
	assets 文件夹	对应的图片等资源文件
	components 文件夹	放置所有自定义的组件文件（文件名以 .vue 结尾，开头大写）
	router 文件夹	路由文件
	App.vue	根组件文件。（注意以 .vue 结尾的组件的文件名，开头都要大写）
	main.js	* 直接关联入口文件，执行完index.html后就会执行main.js的文件，作用就是处理以.vue结尾的组件文件，然后插入到index.html文件中.中转站、处理器的作用。内部配置如下：
		import Vue from ‘vue’：指的是从node_modules的npm中把vue.js的依赖文件引入了进来。
		import App from ‘./App’: 指的是把根目录（src）下的App.vue文件引入进本js中进行处理
		new Vue（{}）：创建一个vue实例。实例中的配置如下：
		el: ‘#app’ 绑定给index.html中的 <div id=‘app’>
		template: ‘<App/>’模板标签
		components: { App }：注册局部组件。。。其他具体配置及解析见下边源代码

模板中，文件调用的顺序【也可以说文件之间关联的关系】：

1、index.html --> 　　　　（第一个执行的页面）

2、main.js --> 　　　　　　　 (作用就是处理vue文件)

3、App.vue --> 　　　　　　　 (根组件。如果这个根组件中有内容，就将根组件内容插入到index.html的div#app ) ->

4、components/xxx.vue --> 　(子组件)【根组件中再调用、注册、引用子组件。如果子组件中有内容，就将子组件内容插入到根组件App.vue的div#app中】

5、components/　　　　　　　组件文件夹下，子组建的互相引用与配合

代码案例

以下贴一个组件嵌套成功的demo，并对每个主要页面的具体代码加以注释，说明每行代码的作用

1. 入口文件：index.html 文件

1  2  3    4     
       5     
       6     
       7     xing.org1的第一个vue实例 8    9   10     
      
11     
      12   13

index.html

2. main.js文件（我叫他：中转站、vue组件处理器）

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'                      　　 //调取vue.js文件(使用import命令加载的Vue构建版本)import App from './App'                    　　 //引入App.vue文件import router from './router'             　　  //引入路由文件？import Xingorg1 from './components/Xingorg1'　　//引入自定义的Xingorg1的子组件，注意区分大小写。(他被注册为了全局组件，任何页面都可以像这样引入)Vue.config.productionTip = false// 注册全局组件Vue.component('zujianName',Xingorg1);　　　　　　//第一个参数是自定义的、调用组件用的、标签的名字，第二个参数是组件文件的名字，注意大小写，不然找不到这个组件文件　　　　　　　　　　　　　　　　　　　　　　　　　　// 注意全局组件的写法，component没有s，【你可以这么想，他是全局的只能有一个，所以不能加s ！！】/* eslint-disable no-new */ /*实例化一个Vue对象 */new Vue({  	　　　　　　//实例化对象  el: '#app',	　　　　//当前vue要控制的容器元素（这里是index.html中的id为app的div）  router,  	　　  　　　//配置路由？  template: '
     ',  //模板：对应的组件调用的标签  components: { App }  //组件注册：components。App就是注册的文件，来源于App.vue})

为了方便观看，再贴一下根组件与子组件的结构关系：

3. 根组件：App.vue

4. 子组件 ./components下的HelloWorld.vue文件

5、另一个子组件 ./components下的Xingorg1.vue文件。

但是这个子组件身份特殊，因其是在main.js下注册的全局组件，

main.js中已经执行了“引入”+“注册”的前两步骤，所以在所有页面中都可以走第3步骤，即 直接调用【直接调用、直接调用（强行凑够三遍）】注册时自定义的组件的名称了。

具体示例可以看App.vue中的这一行代码：

<zujianName>hh</zujianName>，“zujianName”就是当初注册时，自定义的组件的名字。

把他当成标签直接调用即可。那么他这个文件中，template里边的所有内容就被调用的页面给引用了。

如下是Xingorg1文件的具体内容:

好了~这样一个小demo就出来啦！

本文是学习腾讯课堂vue视频的一个学习笔记，完整讲解可以移步：https://ke.qq.com/course/256052#term_id=100301895

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/

转载于:https://www.cnblogs.com/padding1015/p/7865656.html

你可能感兴趣的文章

Web前端单元测试到底要怎么写？看这一篇就够了

脚手架目录介绍

开发用的src 文件夹，介绍如下：

模板中，文件调用的顺序【也可以说文件之间关联的关系】：

代码案例

{ {msg}}

{
{msg}}