vue非编译的模块化写法

项目目录

●/
    ●index.html
    ●js/
        ●main.js
        ●myComponent.js
        ●routes.js
        ●textComponent.js
        ●lib/
            ●vue.js
            ●vue-router.js
            ●require.min.js

一、构建require.js环境

（1）index.html网页设置require.min.js

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<div id="app"><transition name="tsfade" mode="out-in"><router-view ></router-view></transition>
</div>
</body>
<script src="js/lib/require.min.js" data-main="js/main"></script>
</html>

（2）js/main.js

require.config({nodeIdCompat: true,baseUrl:'./',paths: {vue         : 'js/lib/vue','vue-router': 'js/lib/vue-router',axios       : 'js/lib/axios.min',routes      : 'js/routes',myComponent : 'js/myComponent',textComponent : 'js/textComponent',}});
require(['vue',  'vue-router','routes','myComponent'],function (Vue,  VueRouter,routes,  myComponent) {Vue.use(VueRouter);var router = new VueRouter({routes:routes});let vue = new Vue({router: router,components: { myComponent: myComponent},}).$mount('#app');
});

二、vue模块写法

（1）js/routes.js

define(['myComponent'],function (myComponent) {const basePath = "";var routes = [{path: '/',name: 'default',redirect: basePath + "/myComponent",},{name: "myComponent",path: basePath + "/myComponent",component: myComponent, }];return routes;})

（2）js/myComponent.js

define(['textComponent'],function (textComponent) {var template =`<div><text-component></text-component><p>{{info}}</p></div>`;let component = {template: template,data() {return {info: '芙蓉区',};},components:{textComponent:textComponent}};return component;
});

（3）js/textComponent.js

define(function () {var template =`<div><p>{{text}}</p></div>`;let component = {template: template,data() {return {text: '信息',};}};return component;
})

项目地址：https://github.com/90duc/RequireJSVue

vue非编译的模块化写法相关推荐

vue路由懒加载写法
有些是 {path: '/about',name: 'about',component: resolve => require(['./views/About.vue'],resolve) } ...
[vue] vue和微信小程序写法上有什么区别？
[vue] vue和微信小程序写法上有什么区别?写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下 ...
vue的axios两种写法（不知道对不对，仅供参考）
vue的axios两种写法(不知道对不对,仅供参考) `methods () { getHomeInfo () { axios.get ('/api/index.json') ...
vue中a的href写法
vue中a的href写法注意点:href前面要加":"或者v-bind: 2.字符串要用单引号" ' "包住加上了冒号是为了动态绑定数据,等号后面可以写变量 ...
Vue 非父子组件通信方案
Vue 非父子组件通信方案概述在 Vue 中模块间的通信很普遍如果是单纯的父子组件间传递信息,父组件可以使用 props 将数据向下传递到子组件,而在子组件中可以使用 events (父组件需要 ...
Vue 非父子组件通信（ref）
Vue 非父子组件通信 (ref) 流程:1. 先在son子组件中定义一个数据和事件处理程序data( ) { return { flag: false }} , methods: { cry( ) ...
欧姆龙njnx程序全部ST语言，非标设备的写法框架xyz气缸和报警，移位指令，处理检测ng写法
欧姆龙njnx程序全部ST语言,非标设备的写法框架xyz气缸和报警,移位指令,处理检测ng写法,数据类型联合体,统计月产量,日产量,ok产量,ng产量,运行时间,报警时间,oee,合格率,功能块,省去 ...
VUE非父子组件通信
非父子组件通信 vue非父子组件传值方式,本文章整理了两种方式:vuex和总线bus.vuex相比于总线bus来说非常的稳定,推荐直接使用vuex. 我看其他的文章基本上是[点击导航栏回退的时候,去获 ...
Vue中动态添加class写法动态静态clas混合
Vue中动态添加class写法动态静态clas混合示例 //fx,cont-block为静态class ob为动态class <div :class="[ 'fx','cont- ...

vue非编译的模块化写法

vue非编译的模块化写法相关推荐

最新文章

热门文章