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. 【BZOJ2663】灵魂宝石 [二分]

    灵魂宝石 Time Limit: 5 Sec  Memory Limit: 128 MB[Submit][Status][Discuss] Description “作为你们本体的灵魂,为了能够更好的 ...

  2. bzoj4759 [Usaco2017 Jan]Balanced Photo

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4759 [题解] 排序,从大到小插入,树状数组统计. # include <vector ...

  3. 【BZOJ】5028: 小Z的加油店

    [算法]数学+线段树/树状数组 [题解] 首先三个操作可以理解为更相减损术或者辗转相除法(待证明),所以就是求区间gcd. 这题的问题在线段树维护gcd只能支持修改成一个数,不支持加一个数. 套路:g ...

  4. 微信小程序登录流程图

    一. 官方登录时序图 官方的登录时序图 二. 简单理解 这里仅按照官方推荐的规范来 0. 前置条件 一共有三端: - 微信小程序客户端 - 第三方服务器端- 微信服务器端 1. 客户端获得code,并 ...

  5. CVE-2017-5521: Bypassing Authentication on NETGEAR Routers（Netgear认证绕过漏洞）

    SpiderLabs昨天发布的漏洞, 用户访问路由器的web控制界面尝试身份验证,然后又取消身份验证,用户就会被重定向到一个页面暴露密码恢复的token.然后通过passwordrecovered.c ...

  6. Symfony2之创建一个简单的web应用 Symfony2——创建bundle

    bundle就像插件或者一个功能齐全的应用,我们在应用层上开发的应用的所有代码,包括:PHP文件.配置文件.图片.css文件.js文件等都会包含在bunde系统中.          可以通过两种方法 ...

  7. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  8. linux tomcat 乱码

    使用vi编辑器编辑长文件时,常常是头昏眼花,也找不到需要更改的内容. 这时,使用查找功能尤为重要. 方法如下: 1.命令模式下输入“/字符串”,例如“/Section 3”. 2.如果查找下一个,按“ ...

  9. snakes

    原地址 讨论区 Changing 算法一 我会随机! 由于我忘了设置多组数据,期望得分0至100. 算法二 我会模拟! 复杂度\(O(t^2)\),期望得分60. 但是很多人忘记题目给出的是环形-- ...

  10. 【C++】多重继承

    1. 多重继承时的二义性 当使用多重继承时,如果多个父类都定义了相同名字的变量,则会出现二义性.解决方法:使用 :: 声明作用域 #include <iostream> using nam ...