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. 【spoj1811 & spoj1812 - LCS1 & LCS2】sam

    spoj1811  给两个长度小于100000的字符串 A 和 B,求出他们的最长公共连续子串. 先将串 A 构造为 SAM ,然后用 B 按如下规则去跑自动机.用一个变量 lcs 记录当前的最长公共 ...

  2. 9张图让你明白什么叫做"一坨屎"一样的iOS垃圾代码

    前言:这是一个两万余行的商业项目,但代码质量却不敢恭维!     //本文永久链接,转载请注明出处:http://www.cnblogs.com/ChenYilong/p/3489939.html  ...

  3. js判断浏览器是否为ie

    使用传统方式 if ((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Op ...

  4. 通过监测DLL调用探测Mimikatz

    通过Sysmon的-l参数可以探测到DLL加载(ImageLoaded): REF: https://securityriskadvisors.com/blog/post/detecting-in-m ...

  5. alt+ F8 设置无效（转）

    原文转自 https://blog.csdn.net/m372897500/article/details/7310251 具体修改方法如下: 工具-选项-环境-键盘-应用以下其他键盘映射方案,选择v ...

  6. 【bzoj4094】【洛谷3097】Optimal Milking

    假的,假的,都是假的. 题意是最大点独立集还要算贡献,写个网络流岂不是GG? 其实这个也就是奇偶不能选而已……所以无外乎这么四种情况: 左开右闭 左闭右开 都闭 都开 线段树按照套路维护一下就好了. ...

  7. request模拟知乎登录（无验证码机制）

    import request try: import cookielib #python2版本 except: import http.cookiejar as cookielib #python3版 ...

  8. 【 Zabbix 】— 监控nginx

    一.环境说明 OS:centos6.7 x64 nginx:nginx/1.9.9 ZABBIX:2.4.8 zabbix监控nginx是根据nginx的stub_status模块,抓取status模 ...

  9. LayerDate渲染多个class出现闪现问题的解决

    填写表单的时候有时候会需要添加一行表单的业务逻辑,而表单要用到LayerDate的话便不可避免的出现多个class的情况 这种情况下后面的class是无法渲染的,layerDate官网提出了解决方法: ...

  10. maven 通过 profile 设置多环境打包

    maven 在设计之初就考虑到了业务代码和测试代码的分开存放.将业务代码默认存放在  src/main  下,将测试代码放在  src/test  下,然后在各自目录下再细分  java  与 res ...