一哪轿、搭建框架
- 搭建框架之前要安裝三個依賴，最好是全局安裝
1）npm -----這個安裝完nodeJs就有了
2）webpack -----npm install webpack -g
3）vue-cli -----npm install vue-cli -g
2. 查看安裝的依賴的版本
npm -v
webpack -v
vue -V (這里注意是大寫的V)
- 在任意目錄下執(zhí)行
vue init webpack projectName
- 根據(jù)提示選擇自己所需要的
- 進(jìn)入項(xiàng)目文件夾醉旦，執(zhí)行npm install來安裝項(xiàng)目所需要的依賴藏古，然后執(zhí)行npm run dev, 訪問運(yùn)行之后的網(wǎng)址吧碾，如果能彈出頁面就代表項(xiàng)目構(gòu)建完成
- 如果要安裝element-ui,進(jìn)入官網(wǎng)，查看安裝命令npm i element-ui -S
- 在main.js中引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
然后
Vue.use(ElementUI)
new Vue({
el: '#app',
router,
render: h => h(App)
})
如果要驗(yàn)證是否引入成功，就再helloworld.vue中加上一些element-ui的標(biāo)簽看效果
- 安裝頁面樣式所需要的文件
npm install sass-loader node-sass --dev
在頁面寫樣式
<style lang="scss"></style>
二掷贾、配置路由訪問頁面
- 在src目錄下新建三個文件 home.vue, login.vue, 404.vue
- 打開router文件夾下的index.js配置路由配置路由之前需要引入相關(guān)頁面
import login from '@/components/views/login'
import home from '@/components/views/home'
import errorPage from '@/components/views/404'
然后在下面的routes中配置
{
path: '/',
name: 'home',
component: home
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/errorPage',
name: 'errorPage',
component: errorPage
}
-
在home.vue添加三個按鈕睛榄，觸發(fā)對應(yīng)的方法跳轉(zhuǎn)路由 跳轉(zhuǎn)路由需要注意的地方
this.$router.push()相當(dāng)于window.location.href()this.$router.replace()直接替換history歷史
this.$router.go()相當(dāng)于 window.history.go(-1)
在頁面跳轉(zhuǎn)攜帶參數(shù)時，this.$router.push()有兩種用法
第一種不帶參數(shù)：（name為配置路由時的name,path為配置路由時的path）
this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})
第二種帶參數(shù)：
1）query傳參（在地址欄傳參）---相當(dāng)于get請求
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
2）params傳參（在地址欄不顯示參數(shù)）---相當(dāng)于post請求
this.$router.push({name:'home',params: {id:'1'}})
params傳參只能通過name來傳參想帅，而且配置路由的時候需要在path添加參數(shù)
path: "/home/:id 或者 path: "/home:id"
三懈费、安裝asios
axios 是一個基于 Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，用來發(fā)送 http 請求博脑。
- 安裝命令
npm install axios
- 測試是否安裝成功憎乙，通過按鈕觸發(fā)方法發(fā)一個get請求
這里為了測試方便，現(xiàn)在的請求url = "http://localhost:8080"
axios.get(url).the(res=>{
請求成功的操作
}).catch(err=>{
請求失敗的操作（對于請求失敗的定義叉趣，是指請求響應(yīng)狀態(tài)碼不再2xx以內(nèi)的）
})
- 一兩個接口這么寫泞边，代碼是非常臃腫的，所以可以封裝axios
封裝的步驟:
1）在src目錄下新建一個文件夾fetch,創(chuàng)建fetch.js文件疗杉，
- 先引入axios
import axios from 'axios'
3）然后創(chuàng)建實(shí)例
const service = axios.create({
baseUrl: '', //空代表項(xiàng)目的根路徑
timeout: 20000 //請求接口的超時時間
})
4）最后導(dǎo)出創(chuàng)建的axios實(shí)例service
export default service
5）在src目錄下創(chuàng)建一個目錄api,創(chuàng)建api.js
6）引入剛才創(chuàng)建的axios實(shí)例
import fetch from '@/fetch/fetch'
7）寫一個get請求方法
export function login(){
return fecth({
url: '/',
method: 'get'
})
}
8）在需要用到的頁面導(dǎo)入
import {login} from '@/api/api'
9）在觸發(fā)請求的方法中使用
login().then(res=>{
請求成功的步驟
}).catch(err=>{
請求失敗的步驟
})
- 一般在請求的時候阵谚，會對請求進(jìn)行攔截和請求成功的數(shù)據(jù)攔截，這樣就可以對請求配置攔截器
1）打開fetch.js文件烟具，在export default service 上面新增配置
//對請求進(jìn)行攔截梢什，一般是在請求上加上一個請求頭token
axios.interceptors.request.use(function (config) {
// 在發(fā)送請求之前做些什么
return config;
}, function (error) {
// 對請求錯誤做些什么
return Promise.reject(error);
});
//對請求返回的數(shù)據(jù)進(jìn)行攔截，一般是驗(yàn)證是否有權(quán)限朝聋，或者請求響應(yīng)失敗的狀態(tài)碼
axios.interceptors.response.use(function (response) {
// 對響應(yīng)數(shù)據(jù)做點(diǎn)什么
return response;
}, function (error) {
// 對響應(yīng)錯誤做點(diǎn)什么
return Promise.reject(error);
})
