使用requirejs搭建前端项目

JavaScript08

使用requirejs搭建前端项目,第1张

本文主要是讲述如何使用requirejs这个模块化管理工具来搭建前端项目结构,适合内网开发以及还在使用比较旧的技术栈(如jQuery)的前端同学。

github地址: https://github.com/duwenbin0316/Requirejs-demo.git ,如果对你有帮助,请点个star,谢谢!

requirejs的使用我就一笔带过,主要是讲如何搭建项目结构。

项目基本目录结构如下:

在index.html中引入requirejs本身以及主js文件:

index.js定义了模块的名称和路径,以及模块所需的依赖,并调用了main模块的start方法:

main.js为应用主模块,调用main.start()执行应用初始化,所有的dom创建都在模块内部处理,index.html中只有一个div#main的dom元素。main.js内容如下:

同时在main.js中调用了header模块的start方法。

项目结构按照该思路一层一层构建,简单明了,当然也可以根据个人习惯提取出一些通用的组件,本文就不再赘述。

Vue.js:(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。

ue.js 是一个用于创建 web 交互界面的。其特点是

1.简洁 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。

2.数据驱动 自动追踪依赖的模板表达式和计算属性。

3.组件化 用解耦、可复用的组件来构造界面。

4.轻量 ~24kb min+gzip,无依赖。

5.快速 精确有效的异步批量 DOM 更新。

6.模块友好 通过 NPM 或 Bower 安装,无缝融入你的工作流。