首页天道酬勤vue适合开发什么项目,vue原理解析

vue适合开发什么项目,vue原理解析

张世龙 05-05 18:38 87次浏览

Vue项目结构分析1 .利用CLI构建的Vue项目结构概述如下

这里应该关注的内容如下图所示,重点应该关注的是红色标志

其中修改最多的部分是components文件夹,其中包含大多数需要手动编写的代码。

接下来分析一些文件,目的是了解各个部分是如何联系在一起的。

2.index.html主页文件的初始代码如下:

! doctypehtmlhtmlheadmetacharset=' utf-8 ' metaname=' viewport ' content=' width=device-width,initial-scale=1.1. - builtfileswillbeautoinjected--/body/html是普通的html文件,不平凡的是div id='app'/div,下面有注释,构建的文件会自动注入也就是说,我们制作的其他内容都是

另一个不常见的地方是,整个项目只有这个html文件,所以这是一个单页面APP应用程序,打开这个APP应用程序,表面上有很多页面,但实际上它们都只是一个div。

3 .在3.App.vue上的图中,此文件称为根组件,因为其他组件也包含在此组件中。

. vue文件是自定义文件类型,在结构上类似于html, vue文件是vue组件。 请先看看那个初始代码

template divid=' app ' img src='./assets/logo.png ' router-view//div/templatescriptexportdefault { name 3360 } - moz-OS x-font-smoothing :灰色缩放; 文本对齐3360中心; color: #2c3e50; margin-top: 60px; }/style您可能注意到了,这里也有div id='app ',但与index.html中的无关。 此id=APP仅支持以下css :

script标记的内容是该组件的脚本,也就是js代码。 export default是ES6的语法,意思是可以导出整个组件,然后使用import导入组件。 大括号中的内容是有关此组件的属性。

此文件的最重要的一点实际上是第四行,其中router-view/是容器,名称为“路由视图”,表示当前根(URL )指向的内容将显示在此容器中。 也就是说,其他组件自己的路由(即使具有URL,也必须在router文件夹的index.js文件中定义)在表面上只是单独的页面,实际上在根组件App.vue中

4 .在4.main.js之前,我说App.vue的div id='app '和index.html的div id='app '没有关系,这两个文件是怎么联系的? 查看门户文件main.js中的代码

importvuefrom ' vue ' importappfrom './app ' importrouterfrom './router ' vue.config.production tip=false/* ESL infrom components: ) app ),template: 'App/'} )如果你把嘴插在这里,可能有些学生看不惯,比如这个js文件里没有分号。 ); 因为是ES6的语法,所以不这么写反而会提示错误。 虽然可以改变和消除es-lint,但我认为习惯新的规则也很好。

顶部的import有几个模块。 其中,vue模块是node_modules,App是在App.vue中定义的组件,而router是在router文件夹中定义的路由。

Vue.config.productionTip=false的作用是防止vue在启动时生成生产提示。

在此js文件中,您创建了一个Vue对象(实例)。 el属性提供页面上已存在的DOM元素作为Vue对象的装载目标,router表示该对象包含Vue Router,并使用项目中定义的根。 components表示对象中的Vue组件,template类似于使用字符串模板作为Vue实例的标识符并定义html标记。

通过阅读以上三个文件,我认为您基本上可以了解前端项目的结构。

vue项目结构启动原理详解,vue框架的结构