一、項目建立
1、打開指令行視窗Cd /d進入想要建立項目的位置，輸入vue create 項目名
編輯
2、選擇Vue2
編輯
3、運作該項目
編輯
4、建立成功
編輯 在浏覽器中輸入以上網址：localhost:8080，來到一下界面，說明成功
編輯
1、安裝路由（vue2 隻能安裝3版本的vue-router）
編輯
看一下這個檔案有vue-router代表安裝成功
編輯
2、配置路由
(1、建立router檔案夾
編輯
(2、建立index.js，配置路由
重定向的解釋：當網址下(如localhost:8080/xxx)比對不到相應的路由的時候，則跳轉到重定向所設定的路徑
路由元件與非路由元件的歸類：compoents檔案夾一般放置非路由元件
pages檔案夾一般放置路由元件
路由還有很多沒寫：（
1、路由守衛：解決在某些條件下不能跳轉到其他路由
2、二級路由
3、路由元件在某些地方不展示，可以增加一個屬性
4、路由的傳參和跳轉
）
meta:可以配置一些參數，作用其實是讓一些非路由元件展示與不展示
//引入Vue
import Vue from "vue";
//引入Vue-router
import VueRouter from "vue-router";
//使用VueRouter
Vue.use(VueRouter);
//引入路由元件
import Home from "@/components/Home"
import Search from "@/components/Search"
//對外暴露一個Vue執行個體
export default new VueRouter({
//配置路由
routes:[
{
path:'/Home',
component:Home,
name:"Home",
meta:{isshow:true}
},
{
path:'/Search',
component:Search,
name:"Search",
meta:{isshow:false}
},
//重定向
{
path:'*',
redirect:"/Home"
}
]
}) 在main.js出口檔案中注冊路由
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//引入路由
import router from './router'
new Vue({
render: h => h(App),
//配置路由，KV一緻，省略V
//這裡使用router之後，元件身上都有$router,$route屬性
//$router最常用來跳轉push跳轉 $route最常用來擷取參數
router
}).$mount('#app') Vue中配置一個出口 <router-viwe><router-view/>
<template>
<div id="app">
<Header/>
<!-- 路由的出口 -->
<router-view></router-view>
<Footer/>
</div>
</template>
<script>
import Header from './components/Header'
import Footer from "@/components/Footer"
export default {
name: 'App',
components: {
Header,
Footer
}
}
</script>
<style>
</style> 三、API接口配置
1、安裝axios axios幫助文檔 配置的時候可以跟着來，不用死記硬背
編輯 這裡面有代表安裝成功
編輯
2、axios的二次封裝
(1、建立api檔案夾，建立resquest.js檔案（其實該檔案就是axios）
編輯
(2、axios的二次封裝 看着文檔來
//引用axios
import axios from "axios";
const requests = axios.create({
// baseURL的作用 例如我有一個接口的網址為www.baidu/api/love
// 如果很多接口都是www.baidu/api/xxx
//我可以省略/api，因為axios會自動幫你添上，這就是baseUrl的作用
baseURL: '/api',
//請求逾時的時間為5s
timeout: 5000,
});
//請求攔截器，發請求之前可以做一些事情
requests.interceptors.request((config)=>{
//config配置對象，有一個屬性 請求頭headers
return config;
})
//相應攔截器
requests.interceptors.response((res)=>{
// 伺服器成功傳回
//簡化傳回的資料，隻傳回data
return res.data;
},(error)=>{
//失敗
//靜态函數Promise.reject傳回一個被拒絕的Promise對象。通過使用 Error的執行個體 擷取錯誤原因（reason）對調試和選擇性錯誤 捕捉很有幫助。
Promise.reject(new Error("faile"));
}) 在API檔案下建立一index.js檔案，用來統一管理接口請求
//結構統一管理
import requests from "./request"
//method 有get 和 post兩種方式
// 有參數的需要些模闆字元串``
export const reqGetSomeInfo = (p)=>requests({url:`"/baidu/${p}"`,method:"get"});
// 無參數直接寫
export const reqGetSomeInfo2 = ()=>requests({url:"/baidu",method:"get"});
//需要傳對象的可以用data屬性
export const reqGetSomeInfo3 = (p,data)=>requests({url:`"/baidu"/${p}`,data:data,method:"get"}); 3、跨域問題
跨域:如果多次請求協定、域名、端口号有不同的地方，稱之為跨域
傳統的解決方式：JSONP、CROS、代理
代理：
在vue.config.js裡添加一下代碼
//配置代理跨域
devServer: {
// /api的作用是：當位址中，出現api時，浏覽器會自動向target請求資料
//注意配置這個，需要重新啟動一下項目
proxy: {
"/api": {
target: "http://39.98.123.211",
},
},
}, 編輯
四、Vuex
以前寫的Vuex詳解 不贅叙了
編輯
1、安裝vuex
編輯 同樣這個json檔案裡面有，就是安裝成功了
編輯
2、配置倉庫
建立store檔案夾，是為大倉庫。Home檔案夾是Home小倉庫
編輯
Home倉庫（在此處調用api接口）
import { reqGetSomeInfo } from "@/api"
const state = {
someInfo:[]//此處是空對象 還是 空數組要看接口傳回的值
}
const mutations = {
GETSUM(state,someInfo)
{
state.someInfo = someInfo;
}
}
const actions = {
//params是攜帶的參數
async getsum({commit},params)
{
let result = await reqGetSomeInfo;
if(result.code == 200)//請求成功會傳回code = 200
{
commit("GETSUM",result.data)
}
}
}
//getter是為了簡化操作
const getters = {}
export default{
state,
actions,
getters,
mutations
} 小倉庫需要在大倉庫注冊 Store.js
import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex);
import Home from "./Home"
export default new Vuex.Store({
modules:{
Home,//Home小倉庫在大倉庫裡注冊
}
}) 入口檔案引入store main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
//引入路由
import router from './router'
//引入倉庫
import store from './store'
new Vue({
render: h => h(App),
//配置路由，KV一緻，省略V
//這裡使用router之後，元件身上都有$router,$route屬性
//$router最常用來跳轉push跳轉 $route最常用來擷取參數
router,
//這裡使用store後，元件身上都有了$store屬性
store,
}).$mount('#app')