页面框架模板

最新推荐文章于 2025-11-06 10:51:46 发布

原创最新推荐文章于 2025-11-06 10:51:46 发布 · 1.6k 阅读

5 ·

CC 4.0 BY-SA版权

javaScript 同时被 2 个专栏收录

12 篇文章

订阅专栏

网页

5 篇文章

订阅专栏

页面框架模板的搭建

使用 WebStorm 搭建后台页面框架

有关于 WebStorm 创建一个新项目的介绍

Empty Project ：一个空的项目。
Html5 Boierplate ：Html5 开发的框架。
React App ：基于 React.js 来开发 ios 与 Android 的原生 App 。
Bootstrap ：Bootstrap 是用于开发前端的工具包。
Foundation ：Foundation 是一个易用、强大而且灵活的响应式前端框架，用于构建基于任何设备上的响应式网站、 Web应用和电子邮件。结构语义化、移动设备优先、完全可定制。
AngularJS ：AngularJS有着诸多特性，最为核心的是:MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入，等等。
Angular CLI ：Angular CLI 帮助开发者快速创建Angular 2项目和组件
React Native ：ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。
Node.js Express App : 使用 Express 可以快速地搭建一个完整功能的网站，而Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。
Cordova App : 使得移动应用能够以JavaScript访问原生的设备功能，如摄像头、麦克风等。
Meteor App ： Meteor是跨时代的全栈Web开发框架，Github stars数已超越Ruby on Rails。使用它能够迅速地开发实时的（Real-Time）和响应式的（Reactive）应用，并且可以在一套代码中支持Web，iOS，Android，
Vue.js : 一套构建用户界面的渐进式框架，Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Dart : Dart是一种基于类的可选类型化编程语言，设计用于创建Web应用程序。

layui

使用 WebStorm 创建一个空的项目。
访问官网layui官网，使用增加 layui 的插件。
创建 plugins ，导入刚刚下载好的 layui 插件。
增加 layui 的扩充模板。扩展一个 layui 模块
接下来就是通过 layui 的文档来写 MyAdmin.html 页面。
同时，还可以仿照着官方展示的模板去写。
更多的编写内容请结合 layui 的文档使用。
https://www.layui.com/doc/
问题来了。

项目中我使用的工具是 JetBrains WebStorm 2018.3.5 x64 版本的，在开发过程中，浏览器除了缺少还没有引用到的 html 页面外，还缺少使用插件方法的插件 JavaScript 文件。但是，这些都是正常的情况，都是可以理解的。
正当我想要单独在浏览器端直接打开的 html 页面的时候，我发现，搜狗、谷歌浏览器的内容都是可以正常使用的，没有报错的日志信息。但是 IE 浏览器就不同了。

其中，index / admin is not a valid modules 这两个错误，可以百度查的到，大概是这三个原因其中的一个。

- 1、重复的使用了 layui.js 文件，layui 的目录结构被打乱了。
- 2、没有使用正确的扩展layui 格式，遵循模块规范。
- 3、JQuery.js 的没有被引入。

但是，我仔细检查过DOM 结构，为了防止 js 加载失败导致页面加载不出来的情况的出现，我将所需要的 JavaScript 都添加到了 body 中，并没有发现多余的 layui.js 的引入。遵循扩展模块的规范，我再三到 layui 文档中查看，是否有纰漏之处，但是还是没有任何的进展。引入 JQuery.js ，也没有奏效，我就开始寻找其他的方法，发现第一个错误， SCRIPT16389 ,查询了好多内容，但是始终不能解决这个问题。想不明白的是除了IE 浏览器，造成 JS 加载错误外，其他浏览器都是可以正常运行的。直接使用 IE 浏览器打开文件，总是报上述错误，有没有大神能解决这个问题的，项目源码。

BootStrap

在这里插入图片描述

使用 WebStrom 创建一个 Bootstrap 的项目。
新建一个 index.html 页面。使用 BootStrap css / JavaScript
介绍几款不错的 BootStrap 框架模板。

1. inspinia bootstrap 后端模板演示地址 http://cn.inspinia.cn
  模板下载可以访问：https://download.youkuaiyun.com/download/roobert_chao/11150796

在这里插入图片描述

1. AdminLTE，是基于 BootStrop 3.x 的免费的后台 UI 框架。
  Github 链接： https://github.com/almasaeed2010/AdminLTE
1. VUE -Element-Admin 基于 vue 3.0 和 Element 的控制面板。
  GitHub 链接：https://github.com/PanJiaChen/vue-element-admin
1. blur-admin 基于 Angular 和 BootStrap 的后台管理面板框架。
  Girhub 链接：https://gihub.com/akveo/blur-admin
1. 我是比较看好以上的模板的，所以在学习和使用 inspinia bootstrap 模板，对于后台开发界面的这一方面是非常有用的。

结合 inspinia bootstrap 框架，修改框架应用到自己的项目当中。

仿照着 inspinia bootstrap 首页的样式去写，导入需要的 JavaScript 文件。
4.1. 修改 JS 目录下的 directives.js 项目名称。

4.2. 我发现主页面都是加载的 JavaScript 文件，那么页面是如何形成的呢。发现 JS 目录下的 config.js 文件是路径导向文件。

4.3 修改 commons 文件夹中的内容。