vue學徒之基礎配置

2021-10-05 06:59:55 字數 1748 閱讀 8594

對於乙個專案而言,會有自己的一套顏色體系,這個時候會在src資料夾下建立乙個styles,來存放我們的一些對於樣式的基本設定,我在專案中使用scss來編寫html樣式,有層次感並且上手簡單。

建立base.color.scss檔案,

$primarycolor: #3f51b5;

$accentcolor: #9e9e9e;

$secondarytextcolor: #757575;

...

該檔案中定義了一些列的顏色,方便在專案中進行使用,但是這樣還使用不了這個檔案,首先需要在專案根目錄下建立vue.config.js

module.exports = 

}}}

這樣我們就可以使用base.color.scss中定義的變數了。

當然對於整個vue專案來說,只是設定顏色是不夠的,我們很多時候會使用到axios來和後台進行資料互動,這個時候如果我們在每個需要呼叫axios中進行使用,未免顯得有些複雜和冗餘,這裡我們可以將其簡單的封裝一下。

import axios from 'axios'

import qs from 'qs'

首先確保安裝了axios和qs庫,如果沒有安裝,請執行以下命令安裝。

npm install -s axios

npm install -s qs

首先axios是乙個封裝了比較完美的vue的http請求的庫,然後qs可以對引數進行格式化引數。

2、然後進行axios基礎設定

# 設定axios預設攜帶cookies

}})

這樣我們就設定好了乙個基本的axios引數

然後進行封裝

}這樣乙個簡單的api封裝也就完成了,其實我這裡少了個axios***的相關設定,到時候需要的時候,我再進行設定。

index.js檔案已經建立完畢,需要進行繫結。

import vue from 'vue'

import from '@/api'

vue.prototype.$api = api

經過這樣的設定後,我們就可以在頁面上隨心所欲的使用了。

this.$api.fetch('list', ).then(data => )
當然在dev環境下,有的時候我們需要呼叫後台介面,這個時候如果直接訪問會出現405錯誤警告,這個時候首先需要在sever設定跨域問題,然後在vue.config.js中進行設定伺服器**。

devserver:

}}

這樣我們就可以在本地進行安心的除錯了。

今天就先這麼多,希望您能理解,對於有問題的地方希望指出。

vue學徒之router入門

今天講解vue乙個很重要的元件router,熟悉後台開發的人肯定對router有一定的了解,在我們用jinjia2渲染模板的時候,通常都會定義各種各樣的router,router相當於整個專案的導航,每個頁面對應的內容,都通過router來控制。在建立好了的vue專案中有乙個src router.j...

vue基礎基礎之基基礎

目錄 1,引用 2,例項化 3,資料定義和使用 4,函式的定義和使用 5,資料的改變方式 6,原生js如何輸出vue中的data資料 7,vue中系統屬性的使用 每個vue應用都需要通過例項化vue來實現 語法 var myvue new vue 注意 若id重複,則以第乙個為準 也可以在外邊定義 ...

vue插槽樣式 vue基礎之插槽

categories vue基礎 tags 插槽element ui 插槽slot 插槽 vue內建元件 做為承載分發內容的出口 普通插槽 插槽使用 全域性元件 第乙個引數是元件名,第二個引數是options vue.component vbtn template 我是頭部元件 var vconte...