天天看點

vue搭建前端項目

    初學vue,剛開始跟着某教程學習了一段時間,發現隻會引入vue.js,然後使用一下v-for之類的。一些邏輯還是離不開js。這絕對不是我想要的。于是跟着vue群的大佬開始學習,他遠端幫我搭建第一個簡單的項目網站,我一遍學習一邊記錄,在這簡單記錄一下知識點。

0:大家可以跟着官網搭建出網站的雛形。然後來看看目錄結構,由于學vue時間不長,現在隻是主要在src裡面進行操作。。

vue搭建前端項目

1  : main.js收所有檔案的入口,用來配置全局變量,引入所有需要的架構、架構需要送出安裝好的。

    例如安裝echarts。指令為:npm install echarts --save

vue搭建前端項目

2:App.vue是主元件,一般不謝代碼,配置路由的話,寫router-view即可

vue搭建前端項目

3:在components目錄中放.vue頁面。

vue搭建前端項目

4:router/index.js中是配置的路由,先引入後進行配置路徑與對應的頁面,這裡使用了子路由:rediect是設定了預設路徑

vue搭建前端項目

5:需要添加一個頁面時:

    (1):在components中增加一個vue檔案

    (2):在router中進行引入并配置路徑

6:使用ajax調用假資料的時候遇到的問題,報錯路徑不正确,請教大神後明白是因為接口的問題,于是mock模拟了接口後成功。mock目錄以及index.js内容如下:

vue搭建前端項目
vue搭建前端項目

7:對于頁面之間跳轉,使用路由的方法:

        this.$router.push({path:urls, query: { id: thisId, option: ""}});    //url是路徑,後面是參數。

8:剩下的各種坑,就是對vue的不熟練了。希望大家可以學到