首页天道酬勤vue项目结构启动原理详解,vue框架的结构

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

张世龙 05-05 18:36 32次浏览

(1) Build )存储项目构建(webpack )相关代码、项目构建脚本

(2)配置目录,保存项目的一些基本配置信息。 最常用的是端口转发

)3) node_modules:npm加载的项目相关模块。 此目录包含项目的所有依赖关系,也就是通过npm install命令下载的文件

)4) src :此目录下包含项目的源代码。 也就是说,开发者写的代码放在这里

这里包含几个文件:

assets:保存图像

components:存储组件文件(可复用、不独立的页面),

建议将组件存储在components中,然后创建另一个新的page文件夹来放置整个页面。

router:包含根的js文件,index .js

首先,我们导入了Vue对象、Router对象和HelloWorld组件

创建Router对象并定义路由表

在此定义的路由表中,路径为/,对应的组件为HelloWorld,

也就是说,如果浏览器地址为/,则HelloWorld组件将显示在路由器视图位置

App.vue:项目门户文件是Vue组件,也是项目的第一个Vue组件

App.vue是vue组件,组件包含三部分:页面模板(template )、页面脚本(page script )和页面样式(style )

页面模板定义页面的HTML元素。 在此定义图像和router-view两个

用于实现当前页面数据初始化、事件处理等操作的页面脚本

页面样式是指模板对HTML元素的页面美化操作

main.js:核心文件相当于Java中的main方法,是整个项目的入口js

首先导入Vue对象

导入App.vue并将其命名为App

导入路由器。 注意,router目录根的默认文件名为index.js,因此可以省略

所有内容都导入成功后,创建Vue对象并将Vue处理的节点设置为“#app”

“#app”是指在index.html文件中预定义的div

将router设定为vue对象,简化的写法。 完整的写法是router:router,如果和key/value一模一样的话可以省略。

声明组件App。 名为App的组件最初导入到项目中,但直接导入的组件不能直接使用,必须声明。

模板定义了一个页面模板,用于将App组件的内容渲染为名为“#app”的div

(5)静态)静态资源目录

(6) test )初始测试目录

(7).xxxx )包含git结构和语法结构等的结构文件

(8) index.HTML )项目首页、门户页面也是整个项目唯一的html页面

(9) package.json项目配置文件,用于定义项目的所有依赖关系,包括开发时依赖关系和发布时依赖关系

(10 )自述文件:手册

vue目录命名,vue文件目录结构