如何在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:123
  8                 }
  9             }
 10         });
 11     }
 12     function load2(){
 13         Vue.component("load2",{
 14             template:templates,
 15             data:function(){
 16                 return {
 17                     abc:456
 18                 }
 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.6
 38                     },
 39                     {
 40                         name: '這個殺手不太冷',
 41                         url: 'https://movie.douban.com/subject/1295644/',
 42                         num:2.5,
 43                         rate: 9.4
 44                     },
 45                     {
 46                         name: '霸王別姬',
 47                         url: 'https://movie.douban.com/subject/1291546/',
 48                         num:2.5,
 49                         rate: 9.5
 50                     },
 51                     {
 52                         name: '阿甘正傳',
 53                         url: 'https://movie.douban.com/subject/1292720/',
 54                         num:2.5,
 55                         rate: 9.4
 56                     },
 57                     {
 58                         name: '美麗人生',
 59                         url: 'https://movie.douban.com/subject/1292063/',
 60                         num:2.5,
 61                         rate: 9.5
 62                     },
 63                     {
 64                         name: '千與千尋',
 65                         url: 'https://movie.douban.com/subject/1291561/',
 66                         num:2.5,
 67                         rate: 9.2
 68                     },
 69                     {
 70                         name: '辛德勒的名單',
 71                         url: 'https://movie.douban.com/subject/1295124/',
 72                         num:2.5,
 73                         rate: 9.4
 74                     },
 75                     {
 76                         name: '海上鋼琴師',
 77                         url: 'https://movie.douban.com/subject/1292001/',
 78                         num:2.5,
 79                         rate: 9.2
 80                     },
 81                     {
 82                         name: '機器人總動員',
 83                         url: 'https://movie.douban.com/subject/2131459/',
 84                         num:2.5,
 85                         rate: 9.3
 86                     },
 87                     {
 88                         name: '盜夢空間',
 89                         url: 'https://movie.douban.com/subject/3541415/',
 90                         num:2.5,
 91                         rate: 9.2
 92                     }
 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吧！