vue+vue-cli+vuex+vrouter 開發學習和總結

1.項目目錄結構

　　

 

　　1.components------------------------->頁面中所用的公共組件；

 　  2.router index.js --------------------->存儲路由信息

　　3.store  actions.js  ------------------>處理vuex action操做信息 

　　　　　　getters.js-------------------->獲取vuex index.js中定義的屬性值

　　　　　　index.js---------------------->定義vuex的屬性值，mutations對象函數等；

　　　　　　api.js------------------------->處理views頁面組件中網絡請求處理
　   4.views-------------------------------->SPA頁面組件
　　5.static--------------------------------->項目中須要用到的圖片 css和 common js等；

　　

 2.理解和問題總結

  

   1.css 導入方式

  @import "../static/common/css/common.css";
  @import "../static/common/css/main.css";

　

 1.關於建立根app的兩種方式中的總結：

    關於建立根app的兩種方式中的總結：
   1.
       const app = new Vue({
           router,
           store,
           render: h => h(App),
         }).$mount('#app');

       render: h => h(App) 具體是什麼含義？
       render: function (createElement) {
           return createElement(
           'h' + this.level,   // tag name 標籤名稱
           this.$slots.default // 子組件中的陣列
           )
       }

       將h做爲createElement的別名是一個通用慣例

      2.（最新的加載方式）
        new Vue({
            el: '#app',
            router,
            store,
            template: '<App/>',
            components: { App }
         });

 

  2.router 組件導入方式

 

　　　　　　組件的引入方式
       a. 採用import的方式引入進來；好比 import login from '../components/login.vue'  （推薦）
       b. 採用require的方式 resolve => require(['../components/login.vue'], resolve)

 

3.V-if 和V-show的區別使用

　

v-show 不會從新建立和銷燬，只是簡單的display屬性，而v-if 會銷燬和從新建立； v-if能夠經過key 對相同的模塊不採用複用；

 

4.DOM元素引用

　

<p class="errorDes_login" ref="errorDescription" v-show="isErrorShow">您輸入的手機號碼格式錯誤!</p>

能夠經過 this.$refs.errorDescription 獲取相應的引用ref引用對象;  this.$el獲取根DOM元素，而後經過this.$el.querySelector() 查詢獲取到對應的子元素；

 

5.關於組件CSS class重名的問題

 

因爲vue 會把全部的static文件都封裝到app.js的文件中。全部若是後面的組件class,與前面組件class重名，會覆蓋以前組件中css的渲染效果

 

6.關於axios POST請求出錯的問題

在使用axios 進行post請求時;params 須要進行qs 處理,否則會提示跨域的問題。

import axios from 'axios';
import qs from 'querystring'

axios.post(loginUrl,qs.stringify(signParams)，config)
        .then(function(){})
        .catch(function(){})

 

 7.設置代理解決本地開發跨域的問題

　　

進入config/index.js裏
配置方法一：
proxyTable: {
    '/api':{
      target:'http://www.api.com',  
      changeOrigin:true,
      pathRewrite:{}
     }
},

配置方法二：
proxyTable: {
    '/api':{
      target:'http://www.api.com/api',  
      changeOrigin:true,
      pathRewrite:{
'^/api':''
}
     }
},

以上配置表示請求接口以 "/api" 開頭的話，服務器會去請求  http://www.api.com/api  如下的接口。

例如 this.$http.get('/api/menu/get_list').then(function(){}),

這樣子就能夠拿到  http://www.api.com/api/menu/get_list  的數據了。

 

8.axios請求   Unexpected token o in JSON at position 1問題

在使用axios請求返回的response時，不能對response，進行JSON.pase(response)，不然會出現Unexpected token o in JSON at position 1，由於response自己就是一個Object對象；

 

 9.同級文件導入時，提示node_module中找不到的問題

在導入時，必須加當前目錄 ./，不然會直接在node_module裏面去找，而不是在當前目錄下；
例如 test.js 和 login.js在同一個文件下；那麼login.js 在導入test.js時 必須指明是當前目錄，不然會在node_module裏面去尋找

import * as test from './test.js'

 

 10.對於使用了v-if的element,在js 元素引用時，this.$refs.ele ,要作判斷處理。 不然 element被銷燬後，會提示undefined的錯誤；

 

 11.methods裏面的函數進行網絡請求時，在request的回調裏面沒法獲取this.$router.push的。應該函數請求前加入  const self = this 經過self.$router進行操做；

　

 12.使用axios請求時，返回的response 包含了整個請求的信息 請求頭相關的設置等；須要注意！

{"data":{"code":1,"desc":"成功","data":{"icon":"****","app_name":"xx","permissions":[{"code":"sport","name":"xx"},{"code":"location","name":"xx"}]}},
"status":200,"statusText":"OK",
"headers":{"content-type":"application/json;charset=UTF-8"},
"config":{"transformRequest":{},"transformResponse":{},
"timeout":0,
"xsrfCookieName":"XSRF-TOKEN",
"xsrfHeaderName":"X-XSRF-TOKEN",
"maxContentLength":-1,
"headers":{"Accept":"application/json, text/plain, */*"},
"method":"get","url":"*****"},"request":{}}

 

 

 

 

 ----------------------------------------------------------------------------------------- ---未完待續-------------------------------------------------------------------------------------------------------------------------------------------