1、路径布局大致就是这样，完全模拟小程序，主要是靠require来做到的

2、首先index.html是这样的（配置js和css没有用requireJs主要是方便而且载入什么组件比较清晰）

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">

    <title></title>

    <link rel="stylesheet" href="common/css/cssreset.css"/>

    <link rel="stylesheet" href="common/css/swiper-3.4.2.min.css"/>

    <script src="common/js/vue.min.js"></script>

    <script src="common/js/vueRouter.js"></script>

    <script src="common/js/iscroll.js"></script>

    <script src="common/js/swiper-3.4.2.min.js"></script>

    <script src="common/js/require.js" defer async="true" data-main="common/js/main"></script>

    <style></style>

</head>

<body>

<div id="app">

    <router-view name="body"></router-view>

    <router-view name="foot"></router-view>

</div>

</body>

</html>

2、主要的配置main.js

/**

 * Created by zcwl123 on 2017/5/23.

 */

//require配置

require.config({

    baseUrl: "page",

    paths: {

        "foot":"foot/foot",    //载入模块

        "index":"index/index",

        "order":"order/order"

    },

    map: {

        '*': {

            'text':'../common/js/text',//载入require-text

            'css': '../common/js/css'  //载入require-css

        }

    }

});

//导入依赖

var arr=['foot','index','order'];

define(arr, function(){

    //路由主键

    const routes = [

        { path: '/index', components: {

                body:index,foot:foot

            }

        },

        { path: '/order', components: {

                body:order,foot:foot

            }

        }

    ];

    //创建导航

    const router = new VueRouter({

        routes: routes

    });

    //导航依赖

    const app = new Vue({

        router:router

    }).$mount('#app');

});

3、模块当中index.js文件这样布局

var index;

var arr=['text!index.html'];//载入html文件

define(arr, function(html){

    index = {

        //html

        template:html,

        //数据

        data:function(){

            return {

                test:3

            }

        },

        //方法

        methods:{

        },

        //vue钩子

        mounted: function () {

            //切换到每一个页面，切换不同的css

            require(['text!index.css'], function (css) {

                document.getElementsByTagName("style")[0].innerHTML=css;

            });

        }

    };

});

4、因为是使用最初级的vue组件的方法，所以组件一定要有一个大标签包围。模块index.html文件

<div id="index">

    空白

</div>

5、css文件正常即可，然后就可以像小程序一样了，也是像小程序一样每次新建页面都要先导入依赖

vue假全家桶升级方式，形成类似于小程序的路径管理（新增require-css与require-text）的更多相关文章

  1. 什么是vue的全家桶

    vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成.

  2. 关于.NET HttpClient方式获取微信小程序码（二维码）

    随着微信小程序的火热应用,市面上有关小程序开发的需求也多了起来.近来分析了一项生成有关生成微信小程序码的需求——要求扫码跳转到小程序指定页面(带参数):看了下小程序官方文档文档,结合网上的例子,未看到 ...

  3. Vue3全家桶升级指南一composition API

    1.setup() vue3中的composition API中最重要的就是setup方法了,相当于组件的入口,所有的composition API都必须放到setup()中的使用. setup是在组 ...

  4. 前端框架之Vue(10)-全家桶简单使用实例

    vue-router官方文档 vuex官方文档 安装 npm install vue-router --save 使用实例 vue-router初使用(webpack-simple模板) 1.切换到指 ...

  5. vue的全家桶

    自定义指令 <div v-demo="{ color: 'white', text: 'hello!' }"></div> Vue.directive('d ...

  6. Vue3全家桶升级指南二ref、toRef、toRefs的区别

    ref是对原始数据的拷贝,当修改ref数据时,模板中的视图会发生改变,但是原始数据并不会改变. toRef是对原始数据的引用,修改toRef数据时,原始数据也会发生改变,但是视图并不会更新. 在vue ...

  7. 让我们用Vue cli全家桶搭建项目

    一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...

  8. 这款 IDE 插件再次升级，让「小程序云」的开发部署提速 8 倍

    今年3月份,在阿里云北京峰会上,阿里巴巴正式发布了“阿里巴巴小程序繁星计划”,截至当前,已经有成千上万的开发者加入这个计划,使得小程序得到蓬勃发展,然而不可避免的是,这些服务加重了对云端的开发部署.运 ...

  9. [转]vue全面介绍--全家桶、项目实例

    慢慢了解vue及其全家桶的过程 原文http://blog.csdn.net/zhenghao35791/article/details/67639415 简介 “简单却不失优雅,小巧而不乏大匠”.  ...

随机推荐

  1. 【bzoj1096-仓库建设】斜率优化

    dsy1096: [ZJOI2007]仓库建设 [问题描述] L公司有N个工厂,由高到底分布在一座山上.如图所示,工厂1在山顶,工厂N在山脚. 由于这座山处于高原内陆地区(干燥少雨),L公司一般把产品 ...

  2. 【BZOJ1976】能量魔方 [最小割]

    能量魔方 Time Limit: 10 Sec  Memory Limit: 64 MB[Submit][Status][Discuss] Description 小C 有一个能量魔方,这个魔方可神奇 ...

  3. bzoj2683/4066 简单题

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2683 http://www.lydsy.com/JudgeOnline/problem.ph ...

  4. swift xcode设置 ，代码折叠，全局折叠 快捷键

    在preference text editing 里面打开 function 折叠的项, 折叠方法快捷键: option+command +left/right 全局折叠快捷键: shift+opti ...

  5. shell脚本之while for if 语句和编写计划任务

    关于while循环: while do done 例如 1.关于内存的实时操作: (1).vim a.sh (2).输入以下while循环 (3)../a.sh执行脚本 2.自加一的操作: (1).v ...

  6. Django-csrf跨站请求伪造

    方式一: 下列代码插入ajax提交之$.ajaxSetup({ data: {csrfmiddlewaretoken: '{{ csrf_token }}' }, }); 注意:该代码中包含模板渲染语 ...

  7. iOS 动画整理

    序列帧动画 曾经项目里的一段源码: 1234567891011121314 UIImageView * activityImageView = [[UIImageView alloc] init];N ...

  8. Linux下文件的三个时间意义及用法

    Linux下文件的三个时间参数: (1)modification time(mtime):内容修改时间        这里的修改时间指的是文件的内容发生变化,而更新的时间. (2)change tim ...

  9. 【python】抄写大神的百度贴吧代码

    原文链接:http://cuiqingcai.com/993.html 划重点: 1.提取帖子内容时,对图片,贴吧自动增加的超链接,制表符,换行符要做删除或替换处理 2.decode是把bytes转换 ...

  10. 使用bottle进行web开发（6）：Response 对象

    Response的元数据(比如http的status code,headers,cookies等,都被i封装到一个叫Response的对象中,并传给浏览器. status code:status co ...