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. ZOJ1450 Minimal Circle

    You are to write a program to find a circle which covers a set of points and has the minimal area. T ...

  2. Python 基础总结

    1.执行python脚本的两种方式: 答:1../run.py.shell直接调用python脚本 2.python run.py 调用python 解释器来调用python脚本 5.python单行 ...

  3. [转]Native进程的运行过程

    Native进程的运行过程 一般程序的启动步骤,可以用下图描述.程序由内核加载分析,使用linker链接需要的共享库,然后从c运行库的入口开始执行. 通常,native进程是由shell或者init启 ...

  4. BZOJ 1207

    1207: [HNOI2004]打鼹鼠 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 3089  Solved: 1499[Submit][Statu ...

  5. HDU-3320

    Alice’s Cube Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Tota ...

  6. Django remedy a security issue refer dos attack

    Today the Django team is issuing multiple releases -- Django 1.4.8, Django 1.5.4, and Django 1.6 bet ...

  7. linux：/lib/libc.so.6: version `glibc_2.7′ not found【没有解决】采用新方法达到目的

    1 下载glibc wget http://ftp.gnu.org/pub/gnu/glibc/glibc-2.7.tar.gz 2. tar zxf glibc-2.7.tar.gz 3. cd g ...

  8. 计蒜客 1460.Ryuji doesn't want to study-树状数组 or 线段树 (ACM-ICPC 2018 徐州赛区网络预赛 H)

    H.Ryuji doesn't want to study 27.34% 1000ms 262144K   Ryuji is not a good student, and he doesn't wa ...

  9. mimikatz-域密码获取神器

    mimikatz是一个法国人写的轻量级调试器.出众之处在于其可以直接从 lsass.exe 里猎取windows处于active状态账号明文密码,非常强大. 在网上找了一些相关的文章自己的一点总结吧 ...

  10. HttpServletRequest接口

    package com.hongdian; import java.util.Enumeration; import java.io.IOException; import javax.servlet ...