vue2+iview+require实现AMD模式下的组件化开发、按需加载

最新推荐文章于 2024-08-07 09:47:40 发布

Take_Dream

最新推荐文章于 2024-08-07 09:47:40 发布

阅读量4.4k

点赞数

分类专栏： vue 前端构建工具webpack/gulp等

本文链接：https://blog.csdn.net/Take_Dream_as_Horse/article/details/78867376

版权

本文介绍了一个不使用webpack，而是利用AMD（Asynchronous Module Definition）模式，结合vue2、iview和requirejs进行组件化开发和按需加载的项目实践。主要技术栈包括vue、iview和requirejs，同时css样式使用less模块化，但客户端编译部分存在优化空间。项目中，通过requirejs配置全局依赖，创建公用组件如header和nav，并详细阐述了组件定义和首页开发过程。

摘要由CSDN通过智能技术生成

github地址：https://github.com/chuanzaizai/vue_iview_require

1、最近项目遇到的需求：不使用webpack, 采用老设计模式AMD，实现按需加载，组件化开发

2、主要技术栈： vue （https://cn.vuejs.org/v2/guide/）

iview （http://v1.iviewui.com/）

requirejs （http://requirejs.org/）

css样式采用less模块化，未在webpack中配置less-loader,借助less.js在客户端编译（此方法不可取，需优化）

3、设计思路：

（1）配置require，新建main.js

main.js中主要配置全局js的依赖项，vue的全局监听器，引入公用的header、nav组件

requirejs.config({
    // baseUrl:'./',
    paths:{
        text:'lib/text',
        jquery:'lib/jquery.min',
        less:'lib/less-1.6.3.min',
        vue:'lib/vue',
        iview:'lib/iview.min',
        vueresource:'lib/vue-resource-1.3.4.min',
        httpinterface: 'httpinte