如何在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:"

"
26 }
27 },
28 {
29 path:"/home",
30 component:{
31 template:"

"
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; i0) {
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

1

這兩段就是模板文件，直接引入之後加入進去就行了，雖然不能用.vue文件，但是有個好處就是我們可以直接拿HTML來用~而且還支持語法提示和高亮！也算是一種補償吧~

好了，到這裡大家就應該知道如何通過require來使用VUE了吧~如果有什麼不明白的大家也可以留言，我會及時回復大家的~最後提示一下就是用require+VUE+vueRouter+iview的方法來寫項目的話會有點大~因為光這些JS+CSS就已經1M多了~如果再加上本身項目的業務邏輯我估計一個項目下來最少也要幾十M，所以想好好用VUE的話還是學習一下webpack和ES6吧！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！