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. bzoj 1878 SDOI2009树状数组 离线操作

    本来想写2120的,结果想起来了这个 我们先对于询问左端点排序,用树状数组存区间字母个数,对于每种字母, 第一次出现的位置记录为1,剩下的记录为0,然后记录下,每种颜色 后面第一个和他相同颜色的位置 ...

  2. hdu 2141 Can you find it?（二分查找）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2141 题目大意:查找是否又满足条件的x值. 这里简单介绍一个小算法,二分查找. /* x^2+6*x- ...

  3. hdu 2016 数据的交换输出

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2016 题目大意:把最小的和第一个交换并输出.注意格式哦! #include <stdio.h&g ...

  4. return 与 exit() 的区别

    return是一个关键字,返回函数值:exit()是一个函数: return是语言级的:exit()是操作系统提供的函数: return表示函数退出:exit()表示进程退出: 非主函数中调用retu ...

  5. locust===官方说明文档，关于tasks

    安装: >>> pip  install locust locust在官方simple_code中如下: from locust import HttpLocust, TaskSet ...

  6. php7安装及和php5的共存

    http://blog.csdn.net/liuxinmingcode/article/details/50319145 http://www.jb51.net/article/109228.htm ...

  7. dms程序调试

    Q:程序编译通过后,出现tomcat 端口被占用问题 参考 http://www.cnblogs.com/HoverM/p/3872163.html 先使用netstat   -ano|findstr ...

  8. elasticsearch中client.transport.sniff的使用方法和注意事项

    https://blog.csdn.net/J_bean/article/details/79507559

  9. Ubuntu-16.04安装Xdebug-2.2.5及相关介绍

    Xdebug是一个开放源代码的PHP程序调试器(即一个Debug工具),可以用来跟踪,调试和分析PHP程序的运行状况.在日常开发中,我们会使用如 print_r() var_dump()等函数来进行调 ...

  10. linux+win7双系统重装win7修复grub的办法

    本人是debian+win7的双系统, 下面介绍下重装win7的整个过程以及遇到的一些小问题,在查阅相关博客和朋友的帮助下成功修复, 记录下以便以后有不时之需, 也希望能帮助到遇到同样问题的朋友! 首 ...