準(zhǔn)備階段
- 安裝nodejs棠耕、npm
- 全局安裝vue、vue-cli
- 全局安裝webpack
- 在合適的位置建一個(gè)項(xiàng)目文件夾
開(kāi)始
打開(kāi)你的Terminal（MAC）或者cmd（windows）
一路cd到你的項(xiàng)目文件夾
通過(guò)vue-cli腳手架搭建項(xiàng)目：vue init webpack xxx xxx為你的項(xiàng)目名
設(shè)置項(xiàng)目名柠新、描述窍荧、作者、是否使用vue-router（使用）恨憎、是否使用ESLint（雖然很有用但是我不喜歡用哈哈）蕊退、單元測(cè)試（不需要）、e2e （NO）、使用npm...反正就是一路回車咕痛，看自己需求搭建痢甘。
用vscode打開(kāi)項(xiàng)目，在終端處cd到初始化的項(xiàng)目目錄運(yùn)行
npm start
好了 項(xiàng)目初始化搞定??
打開(kāi)你的瀏覽器輸入http://localhost:8080就可以看到Vue的界面了
簡(jiǎn)單設(shè)計(jì)項(xiàng)目架構(gòu)
項(xiàng)目有一個(gè)設(shè)計(jì)合理的架構(gòu)是非常重要的茉贡，不同的文件不同的代碼做著不同的工作塞栅，我們現(xiàn)在要給他們劃分開(kāi)，一人一個(gè)坑??
新建幾個(gè)文件夾讓你的自動(dòng)生成的項(xiàng)目目錄長(zhǎng)成這樣 /* ?? */
utils工具類
在這里我們定義一些開(kāi)發(fā)時(shí)會(huì)用到的工具類腔丧，例如封裝axios放椰、時(shí)間格式化工具、封裝本地存儲(chǔ)等
例子：http.js 簡(jiǎn)單封裝axios
baseURL就是你要訪問(wèn)的地址的ip和端口號(hào)
import axios from 'axios'
let httpInstance = axios.create()
// httpInstance.defaults.baseURL = 'http://172.20.10.2:3001'//iphone熱點(diǎn)
// httpInstance.defaults.baseURL = 'http://172.30.10.127:3001' //公司ip
//httpInstance.defaults.baseURL = 'http://39.97.114.146:3001' //服務(wù)器地址
// httpInstance.defaults.baseURL = 'http://192.168.1.109:3001' //軟件園5號(hào)樓宿舍
httpInstance.defaults.baseURL = 'https://api.apiopen.top/' //發(fā)放接口
httpInstance.defaults.timeout = 5000
//POST 請(qǐng)求
httpInstance.formurl = (url, data, config) => {
return httpInstance.post(url, data, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
...config
})
};
// request攔截器
httpInstance.interceptors.request.use(
config => {
//這里寫攔截后你需要的操作
//例如：
// if (store.getters.token) {
// config.headers['Authoriztion'] = store.getters.token; //讓每個(gè)請(qǐng)求都攜帶token
// }
// config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
return config
},
error => {
console.log('err' + error) //only for debug ～～～
return Promise.reject(error)
}
)
// reponse攔截器
httpInstance.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response)
}
},
error => {
return Promise.reject(error)
}
)
export default httpInstance
api.js 接入后端服務(wù)的api管理
對(duì)所有訪問(wèn)后端的接口進(jìn)行統(tǒng)一管理可以使復(fù)雜的系統(tǒng)變得有條理愉粤，可以使開(kāi)發(fā)時(shí)候思路更清晰砾医，也方便管理維護(hù)，我們建一個(gè)api文件夾衣厘，不同類別的接口各自定義在自己的模塊中如蚜，那里出錯(cuò)就去哪里找問(wèn)題。
例子：userApi.js
import HttpUtils from '../utils/http'
const UserApi = {
userLogin: (params) => {
let url = '/login';
return HttpUtils.post(url, params)
},
userRegist: (params) => {
let url = '/regist';
return HttpUtils.post(url, params)
}
}
export default UserApi;
在業(yè)務(wù)界面調(diào)用接口時(shí)直接使用定義好的接口就ok啦?? /* ?? */
import UserApi from "../api/userApi";
UserApi.userLogin({ account: 666 , password: 'wozhende666' })
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
這樣最終訪問(wèn)的地址就是http.js中的baseURL+userApi.js中定義的接口:
https://api.apiopen.top/login 也就是后端接口放的地方影暴，把公共部分提取出來(lái)為baseURL错邦，不同的接口在api管理中來(lái)區(qū)分??
項(xiàng)目路由router
由 前端 來(lái)控制頁(yè)面的跳轉(zhuǎn)（但其實(shí)是個(gè)單頁(yè)面），根據(jù)不同的 url 地址展示不同的內(nèi)容和頁(yè)面型宙。
優(yōu)點(diǎn)：體驗(yàn)好撬呢，不需要每次從服務(wù)器獲取全部，快速展現(xiàn)給用戶妆兑；
缺點(diǎn)：不利于SEO魂拦；使用瀏覽器的前進(jìn)，后退鍵的時(shí)候會(huì)重新發(fā)送請(qǐng)求搁嗓，沒(méi)有合理的利用緩存芯勘；單頁(yè)面無(wú)法記住之前滾動(dòng)的位置，無(wú)法在前進(jìn)和后退的時(shí)候記住滾動(dòng)的位置腺逛。
路由的結(jié)構(gòu)設(shè)計(jì)可以按自己的項(xiàng)目頁(yè)面結(jié)構(gòu)情況來(lái)設(shè)計(jì)
我一般的習(xí)慣是將頭部借尿，底部等公共的部分抽離出來(lái)放到外層，各個(gè)業(yè)務(wù)界面定義為子路由
舉個(gè)?? /* ?? */
import Vue from 'vue'
import Router from 'vue-router'
import Home from "../views/home";
import Index from '../views/index'
import FirstPage from '../views/firstpage/firstpage.vue'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'home',
component: Home,
redirect: '/index', //配置默認(rèn)子路由為index
children: [{
path: '/index',
name: 'index',
component: Index,
}, {
path: '/firstpage',
name: 'firstpage',
component: FirstPage,
}]
}]
})
view下有個(gè) home.vue是入口頁(yè)面屉来，頁(yè)面的頭部和底部抽離出來(lái)在這里使用路翻，在頭部和底部之間又定義了一層二級(jí)路由（在router.js中配置了children）index.vue是首頁(yè)，其他頁(yè)面文件按功能不同進(jìn)行分類茄靠，在定義路由的時(shí)候要弄清楚層級(jí)關(guān)系
home.vue代碼如下：
<template>
<div>
<top-header></top-header>
<router-view></router-view>
<top-footer></top-footer>
</div>
</template>
<script>
import TopHeader from "../components/layout/top_header";
import TopFooter from "../components/layout/top_footer";
export default {
name: "",
components: { TopHeader, TopFooter },
data() {
return {};
}
};
</script>
<style scoped>
</style>
效果如下
如圖地址改變只是改變了中間需要改變的部分茂契，頭部和底部不用重新渲染，同時(shí)在寫代碼的時(shí)候也不需要每次都寫那些代碼慨绳，方便多了不是嗎掉冶？
狀態(tài)管理
由于前端技術(shù)爆發(fā)式發(fā)展真竖，SPA、組件化厌小、模塊化等概念被炒的飛起恢共，項(xiàng)目中各個(gè)模塊如果需要共同狀態(tài)或者說(shuō)數(shù)據(jù)的話，就需要組件間通訊璧亚，但是如果業(yè)務(wù)結(jié)構(gòu)一層套一層讨韭，數(shù)據(jù)狀態(tài)在父、子癣蟋、孫透硝、曾孫... 之間傳遞的時(shí)候很容易就亂了，于是在項(xiàng)目比較大的時(shí)候疯搅，出于對(duì)項(xiàng)目架構(gòu)的靈活性考慮就要使用狀態(tài)管理濒生。
常見(jiàn)的狀態(tài)管理技術(shù)：mobx Vuex Reduex
簡(jiǎn)單來(lái)說(shuō)說(shuō)vuex
在store文件夾下新建store.js
store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
name: 'store',
state: {
//定義要進(jìn)行狀態(tài)管理的數(shù)據(jù)
count: 0
},
//改變state的屬性的值的方法放在mutations里
mutations: {
increment(state) {
state.count += 1
},
decrement(state) {
state.count -= 1
}
}
})
在main.js中將store掛載到全局下每一個(gè)組件上
import store from './store/store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
當(dāng)你需要使用store中的某一數(shù)據(jù)時(shí)，你可以這樣：
{{$store.state.count}}對(duì)沒(méi)錯(cuò)幔欧，就是直接用哈哈
這里要記住一定不要忘了$罪治，我就老忘???♂?
當(dāng)要改變數(shù)據(jù)的狀態(tài)時(shí)，要把改變數(shù)據(jù)的邏輯寫在store.js的 mutaiins 中?? 請(qǐng)看上上個(gè)圖
使用時(shí)是這樣??
index.vue
<template>
<div>
<button @click="$store.commit('increment')">+</button>
<button @click="$store.commit('decrement')">-</button>
<button @click="change">change</button>
</div>
</template>
<script>
export default {
name: "",
components: {},
data() {
return {};
},
created() {},
methods: {
change() {
this.$store.commit({
type: "decrement",
amount: 10
});
}
}
};
</script>
<style scoped>
</style>
直接在行內(nèi)調(diào)用礁蔗【跻澹或者像第三個(gè)按鈕一樣綁定事件都可以。
??因?yàn)槲姨珣辛耸蒴铮瑺顟B(tài)管理還有許多更方便有趣的內(nèi)容谁撼，這里只是提了冰山一角歧胁，最最最基礎(chǔ)的使用
??這篇文章最初開(kāi)始寫的目的只是因?yàn)槊看谓?xiàng)目總是覺(jué)得不完美滋饲，這里那里差點(diǎn)東西的樣子，擼個(gè)文鞏固一下喊巍，并且也規(guī)范一下自己建一個(gè)合理屠缭、邏輯清晰的目錄結(jié)構(gòu)
??關(guān)于架構(gòu)部分，本人還是個(gè)前端小學(xué)生崭参，在這里根據(jù)自己對(duì)項(xiàng)目結(jié)構(gòu)的理解呵曹，覺(jué)得哪些技術(shù)在工程中需要就設(shè)計(jì)了哪些，如果又不合理或者有錯(cuò)誤的地方還請(qǐng)指正何暮！
??如果覺(jué)得哪里還需要完善歡迎留言奄喂！
??本篇還會(huì)繼續(xù)修正、更新海洼。
??求點(diǎn)贊跨新、分享。轉(zhuǎn)發(fā)請(qǐng)備注作者出處
志同道合的小伙伴可以加微信:tong961790??
