如何在require中使用VUE

　现在网上抄的沸沸扬扬的VUE看来是个很NB的东西啊，看了一下，确实相对于angular1来说简化了不少东西，性能方面也比angular1要好很多，所以现在用的人越来越多了，于是作为前端，学习一下新东西不至于被淘汰那是必须的~在网上看了一下，感觉还不错，打算用它写个单页面应用。于是……坑就跟着来了……

　　首先声明本人不会webpack和es6但是看了一下网上用VUE写单页面程序的基本上都是用的webpack和ES6，他大爷的！这就有点欺负人了！不会什么非用什么？就不能做一个简简单单的前端吗？非要用什么NPM（虽然装这node但是不想用）。于是就走上了传统道路的VUE之旅，用require写VUE。百度了一下，网上用require写VUE的还真不多，于是把自己用require写VUE的过程写出来，帮助那些跟我一样，不会webpack和ES6又想用VUE的人。好了言归正传，上代码！

先来看看require的入口JS吧！

 1 require.config({2     paths:{3         "text":"text",4         "jquery":"jquery",5         "vue":"vue",6         "vueRouter":"vue-router",7         "common":"common",8         "iview":"iview.min",9         "element":"element"
10     },
11     waitSeconds:3
12 });
13 require(['common','jquery','vue','vueRouter','iview'],function(common,$,Vue,VueRouter,iview){
14     Vue.use(VueRouter);
15     Vue.use(iview);
16     var router=new VueRouter({
17         routes:[
18             {
19                 path:'/foo',
20                 component:common.ob
21             },
22             {
23                 path:'/bar/:id',
24                 component:{
25                     template:'<div>bar{{$route.params.id}}</div>'
26                 }
27             },
28             {
29                 path:'/home',
30                 component:{
31                     template:'<div>这是HTME页面</div>'
32                 }
33             },
34             {
35                 path:'*',
36                 redirect:"/home"
37             }
38         ]
39     });
40
41     common.load();
42     common.load2();
43     var vm=new Vue({
44         el:"#app",
45         data:{
46             text:"这是一个测试页面！"
47         },
48         components:{
49             "ceshi":common.ob
50         },
51         methods:{
52             zouni:function(){
53                 this.$router.push('/bar/哎呦我去！')
54             }
55         },
56         router:router
57     });
58
59 });

　　配置文件就不用说了，如果连require也不会的话就先去学学require吧！这里不再赘述了~我这里引用了vueRouter作为单页面的路由，其中我还引入了JQuery，有人说VUE不能和JQ一起使用，但是经过实验是可以的！这里还涉及到了两个前端的UI库，一个是iview，一个是element，虽然看上去差不多，但是具体用起来还是有区别的，这里就以iview为例介绍一下吧（这两个UI库是不能混用的，否则会有意想不到的“惊喜”）！再有一点要说明的就是我用的require和VUE的版本号，都是2.0以上的，我看网上有很多把VUE写到require的shim里面去的，其实是不用的！VUE2.0是支持AMD的！包括它的插件vueRouter和iview都支持！所以shim是不用的！而且我用的JQ是1.9的，也是支持AMD的，这一点来说的话个大库的公司还是有一致性的！

　　如果看不懂vueRouter建议先去学一下，这里也不再赘述，其实路由都差不多，学一下就会了，不懂的可以给我留言！教程地址：https://router.vuejs.org/zh-cn/api/route-object.html。好了，这个部分代码没有什么别的好说的了，都是一些正常的使用，学过VUE的应该都能看懂，接下来重点说说第14行和15行，这里用到了Vue.use()方法，从官网的查询来看，说的是在引入VUE插件的时候需要用到这个方法，但是如果直接在页面引用VueRouter路由文件，则不需要，所以这里是个坑，刚开始写的时候我也弄了半天才弄明白，其次是第15行，iview，这个可能有人要说了，这不跟VueRouter是一个意思嘛，确实是一个意思，但是这里有个坑！在引入iview的时候有一个大坑！那就是引入iview时，第5行的vue引入命名必须为小写的vue！这个真是个坑爹货！本来我是打算跟官方保持一直大写V的，结果引入VueRouter没问题，但是引入iview的时候报错了，真是气人！

　　好了说完了主文件再来看看模块吧！

  1 define(["vue","text!../vuetemp/1.html","text!../vuetemp/2.html","iview"],function(Vue,templates,templates2,iview){2     function load(){3         Vue.component("load",{4             template:templates,5             data:function(){6                 return {7                     abc:1238                 }9             }10         });11     }12     function load2(){13         Vue.component("load2",{14             template:templates,15             data:function(){16                 return {17                     abc:45618                 }19             },20             methods:{21                 zouni:function(){22                     this.$router.push('/bar/哎呦我去！')23                 }24             }25         });26     }27     var ob={28         template:templates2,29         data:function(){30             return {31                 visible:false,32                 movieList: [33                     {34                         name: '肖申克的救赎',35                         url: 'https://movie.douban.com/subject/1292052/',36                         num:1,37                         rate: 9.638                     },39                     {40                         name: '这个杀手不太冷',41                         url: 'https://movie.douban.com/subject/1295644/',42                         num:2.5,43                         rate: 9.444                     },45                     {46                         name: '霸王别姬',47                         url: 'https://movie.douban.com/subject/1291546/',48                         num:2.5,49                         rate: 9.550                     },51                     {52                         name: '阿甘正传',53                         url: 'https://movie.douban.com/subject/1292720/',54                         num:2.5,55                         rate: 9.456                     },57                     {58                         name: '美丽人生',59                         url: 'https://movie.douban.com/subject/1292063/',60                         num:2.5,61                         rate: 9.562                     },63                     {64                         name: '千与千寻',65                         url: 'https://movie.douban.com/subject/1291561/',66                         num:2.5,67                         rate: 9.268                     },69                     {70                         name: '辛德勒的名单',71                         url: 'https://movie.douban.com/subject/1295124/',72                         num:2.5,73                         rate: 9.474                     },75                     {76                         name: '海上钢琴师',77                         url: 'https://movie.douban.com/subject/1292001/',78                         num:2.5,79                         rate: 9.280                     },81                     {82                         name: '机器人总动员',83                         url: 'https://movie.douban.com/subject/2131459/',84                         num:2.5,85                         rate: 9.386                     },87                     {88                         name: '盗梦空间',89                         url: 'https://movie.douban.com/subject/3541415/',90                         num:2.5,91                         rate: 9.292                     }93                 ],94                 randomMovieList: []95             }96         },97         methods:{98             show:function(){99                 this.visible=true;
100             },
101             changeLimit:function() {
102                 function getArrayItems(arr, num) {
103                     const temp_array = [];
104                     for (let index in arr) {
105                         temp_array.push(arr[index]);
106                     }
107                     const return_array = [];
108                     for (let i = 0; i<num; i++) {
109                         if (temp_array.length>0) {
110                             const arrIndex = Math.floor(Math.random()*temp_array.length);
111                             return_array[i] = temp_array[arrIndex];
112                             temp_array.splice(arrIndex, 1);
113                         } else {
114                             break;
115                         }
116                     }
117                     return return_array;
118                 }
119                 this.randomMovieList = getArrayItems(this.movieList, 5);
120             }
121         },
122         mounted () {
123             this.changeLimit();
124         }
125     }
126     return {
127         load:load,
128         load2:load2,
129         ob:ob
130     }
131 });

　　这里因为没法用.vue文件，所以只能这么写了，就是引入模板，然后再在下面配置组件的各种属性方法等等，然后封装成一个object，然后传出去，在路由的地方使用，或者直接注册进全局的VUE里面，然后上面的两个是定义的一个全局组件，直接在主文件中调用就OK了，可以看一下文章开头那段代码的41和42行。

　　接下来就是最重要的模板了（要不是为了方便引入模板，我才不用require呢）~

1 <div>
2 <div>远程加载的模板！{{abc}}</div>
3 <ul>
4     <li>{{$route.params.id}}</li>
5     <li @click="zouni">2</li>
6     <li>3</li>
7     <li>4</li>
8 </ul>
9 </div>

 1 <div>2 <Card style="width:350px">3     <p slot="title">4         <Icon type="ios-film-outline"></Icon>5         经典电影6     </p>7     <a href="#" slot="extra" @click.prevent="changeLimit">8         <Icon type="ios-loop-strong"></Icon>9         换一换
10     </a>
11     <ul>
12         <li v-for="item in randomMovieList">
13             <a :href="item.url" target="_blank">{{ item.name }}</a>
14             <span>
15                 <!-- <Rate disabled v-model="item.rate/2"></Rate>
16                 <Icon type="ios-star" v-for="n in 4" :key="n"></Icon>
17                 <Icon type="ios-star" v-if="item.rate >= 9.5"></Icon>
18                 <Icon type="ios-star-half" v-else></Icon> -->
19                 <Rate allow-half v-model="item.num"></Rate>
20                 {{ item.num }}
21                 {{ item.rate }}
22             </span>
23         </li>
24     </ul>
25 </Card>
26 <i-button @click="show">Click me!</i-button>
27 <Modal v-model="visible" title="Welcome">欢迎使用 iView</Modal>
28 </div>

　　这两段就是模板文件，直接引入之后加入进去就行了，虽然不能用.vue文件，但是有个好处就是我们可以直接拿HTML来用~而且还支持语法提示和高亮！也算是一种补偿吧~

　　好了，到这里大家就应该知道如何通过require来使用VUE了吧~如果有什么不明白的大家也可以留言，我会及时回复大家的~最后提示一下就是用require+VUE+vueRouter+iview的方法来写项目的话会有点大~因为光这些JS+CSS就已经1M多了~如果再加上本身项目的业务逻辑我估计一个项目下来最少也要几十M，所以想好好用VUE的话还是学习一下webpack和ES6吧！

如何在require中使用VUE相关推荐

如何在 django中安装vue
背景:之前写了一个测试工具箱文章地址基于前后端分离的使用标准,前端使用vue,django作为后端处理接口以下是尝试组合的过程: 一.vue安装前提:先安装nodejs #安装最新版本的vue n ...
idea中编辑*.vue文件没有任何提示
idea开发java程序使用频次较高,开发前端项目貌似较少,至少我们公司前端开发使用的是vs,如下图,编辑vue文件时,没有任何提示,代码也是清一色的,不太友好.如何在idea中安装vue相关插件呢? ...
在webpack中使用vue的准备
如何在webpack中使用vue? 1.安装vue的包 : npm i vue -S 2.由于在webpack中,定义组件使用.vue组件模板文件,所以安装能够解析这种文件的loader npm i ...
rxswift中hud_如何在RxSwift中运行测试
rxswift中hud by Navdeep Singh 通过Navdeep Singh 如何在RxSwift中运行测试 (How to run tests in RxSwift) RxTest an ...
Node.js webpack中导入vue的三种方法
在webpack 中使用 Vue: 安装 vue 模块 npm i vue -S 注意: 在 webpack 中, 使用 import Vue from 'vue' 导入的 Vue 构造函数,功能不完 ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
我是如何在webpack中使用postcss-px2rem的
经过一番折腾重要搞定了. 首先需要安装postcss-plugin-px2rem. npm install --save-dev postcss-plugin-px2rem 我的webpack工程中没 ...
如何在React中做到jQuery-free
前言前些天在订阅的公众号中看到了以前阮一峰老师写过的一篇文章,「如何做到 jQuery-free?」.这篇文章讨论的问题,在今天来看仍不过时,其中的一些点的讨论主要是面向新内核现代浏览器的标准 DO ...
如何在Python中建立和训练K最近邻和K-Means集群ML模型
One of machine learning's most popular applications is in solving classification problems. 机器学习最流行的应 ...

如何在require中使用VUE

如何在require中使用VUE相关推荐

最新文章

热门文章