一、項(xiàng)目開發(fā)配置
1宴杀、項(xiàng)目搭建
1.1癣朗、項(xiàng)目安裝：
1.2、項(xiàng)目結(jié)構(gòu)：
2旺罢、框架引入：
2.1旷余、css相關(guān)：
reset.css ：重置頁(yè)面的樣式。統(tǒng)一項(xiàng)目在各瀏覽器的默認(rèn)樣式保持一致扁达。點(diǎn)擊進(jìn)入下載 reset.css正卧。
border.css：實(shí)現(xiàn)1px邊框。點(diǎn)擊進(jìn)入下載 borde.css
參考：方案一跪解； 方案二-
fastclick：移動(dòng)端300ms點(diǎn)擊延遲問題炉旷，在某些機(jī)型和瀏覽器上，點(diǎn)擊事件會(huì)有300ms的延遲。
參考：http://www.reibang.com/p/16d3e4f9b2a9
在vue項(xiàng)目中的使用方式：npm install fastclick --save
2.2窘行、圖標(biāo)樣式：
- 使用字體樣式：詳見字體樣式
2.3饥追、輪播圖框架：
-
vue-awesome-swiper
參考：鏈接一
使用：//這里使用@的意思為安裝指定的版本 npm install vue-awesome-swiper@v2.6.7 --save
2.4、插件：
-
better-scroll ：移動(dòng)端滾動(dòng)插件解決移動(dòng)端各種滾動(dòng)場(chǎng)景需求的開源插件罐盔，適用于滾動(dòng)列表但绕、選擇器、輪播圖惶看、索引列表捏顺、開屏引導(dǎo)等應(yīng)用場(chǎng)景。點(diǎn)擊進(jìn)入下載 better-scroll
使用：//html <div class="wrapper" ref=“wrapper”> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- you can put some other DOMs here, it won't affect the scrolling --> </div>
注：在vue中纬黎，可以通過在元素上添加ref的語(yǔ)法來獲取//js import BScroll from 'better-scroll' const wrapper = document.querySelector('.wrapper') const scroll = new BScroll(wrapper) //或者： import BScroll from 'better-scroll' const scroll = new BScroll('.wrapper')const scroll = new BScroll(this.$refs.wrapper) //wrapper為自定義的名字幅骄，元素上ref中的值
二、項(xiàng)目開發(fā)代碼
1莹桅、代碼技巧
1.1昌执、簡(jiǎn)寫導(dǎo)入目錄：
說明：在項(xiàng)目開發(fā)中，在一個(gè)js或css文件中如果導(dǎo)入其他目錄下的相關(guān)文件诈泼，就需要通過如下方式,
示例：
<style>
@import url('../../assets/style/fontStyle.css');
</style>
但如果每次都導(dǎo)入同一目錄下的文件懂拾，會(huì)比較麻煩，就可以通過設(shè)置簡(jiǎn)寫路徑達(dá)到同樣的導(dǎo)入效果
配置方法如下铐达，其中key值為自定義的簡(jiǎn)寫名稱（如stylePath）岖赋，value值為配置的路徑
示例：
//在{項(xiàng)目目錄}\build\webpack.dev.conf.js文件中
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'stylePath': resolve('src/assets/styles'), //在這里進(jìn)行配置簡(jiǎn)寫別名
}
},
//使用如下，這里使用了stylus的框架
<style lang="stylus" scoped>
@import "~stylePath/border.styl"
</style>
2瓮孙、Vuex的使用及注意點(diǎn)
2.1唐断、Vuex的使用：
-
顯式安裝Vuex：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)注：當(dāng)使用全局 script 標(biāo)簽引用 Vuex 時(shí)，不需要以上安裝過程杭抠。
-
創(chuàng)建store：
// 如果在模塊化構(gòu)建系統(tǒng)中脸甘，請(qǐng)確保在開頭調(diào)用了 Vue.use(Vuex) const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } } })//觸發(fā)狀態(tài)變更 //commit可接收多個(gè)參數(shù)，第一個(gè)參數(shù)（如increment）為方法名偏灿，第二個(gè)及之后的參數(shù)為方法（如increment）中接收的參數(shù) store.commit('increment') console.log(store.state.count) // -> 1 -
注入store：
Vuex 通過 store 選項(xiàng)丹诀，提供了一種機(jī)制將狀態(tài)從根組件“注入”到每一個(gè)子組件中（需調(diào)用 Vue.use(Vuex)）const app = new Vue({ el: '#app', // 把 store 對(duì)象提供給 “store” 選項(xiàng)，這可以把 store 的實(shí)例注入所有的子組件 store, components: { Counter }, template: ` <div class="app"> <counter></counter> </div> ` })
3翁垂、router-link 的使用技巧
3.1铆遭、使用：
在需要跳轉(zhuǎn)的元素外包裹一層<router-link></router-link> ，使用to 語(yǔ)法即可跳轉(zhuǎn)到指定的頁(yè)面中
<ul>
<router-link to="/">
<li>
//....
</li>
</router-link>
</ul>
3.2沿猜、技巧：
實(shí)際上枚荣，HTML會(huì)將router-link 渲染成<a> 標(biāo)簽
這就會(huì)導(dǎo)致被router-link 包裹的元素中的文字顯示成<a> 默認(rèn)的藍(lán)色樣式，可通過如下方式解決：
<ul>
<router-link
tag="li"
to="/">
//....
</router-link>
</ul>
使用tag將router-link 標(biāo)記為li 標(biāo)簽啼肩，這樣既保證了ul 中的子元素為li 橄妆，又保證了html在渲染的時(shí)候衙伶，不會(huì)講router-link 渲染為a 標(biāo)簽
4、頁(yè)面數(shù)據(jù)的緩存
4.1呼畸、使用：keep-alive
如果某一頁(yè)面多次被訪問痕支，并且其中的數(shù)據(jù)基本保持不變，則可以使用頁(yè)面緩存的技術(shù)：
<keep-alive>
<router-view/>
</keep-alive>
注：當(dāng)頁(yè)面被緩存后蛮原，生命周期鉤子mounted 方法則只會(huì)在第一次進(jìn)入的時(shí)候，執(zhí)行一次另绩，就不會(huì)再執(zhí)行了儒陨。但生命周期鉤子方法activated 方法會(huì)每次調(diào)用
4.2、緩存數(shù)據(jù)的刷新：
但如果頁(yè)面的數(shù)據(jù)根據(jù)傳過來的參數(shù)來判定是否需要緩存和刷新數(shù)據(jù)笋籽，則可以通過生命周期的鉤子activated 來實(shí)現(xiàn)數(shù)據(jù)的刷新
mounted: {
//首次進(jìn)入蹦漠，刷新數(shù)據(jù)
},
activated: {
//再次進(jìn)入，根據(jù)傳入?yún)?shù)判斷是否需要再次刷新數(shù)據(jù)
if(lastFlag===this.flag) {
//重新刷新數(shù)據(jù)
}
}
4.3车海、隔離某些頁(yè)面的緩存：
如果通過keep-alive 進(jìn)行頁(yè)面的緩存笛园，會(huì)將其包裹下的路由子頁(yè)面都會(huì)被緩存，假如其中的某一子頁(yè)面不需要被緩存侍芝，則可以通過exclude 語(yǔ)法將不需要緩存的頁(yè)面隔離出去研铆，保證其每次都會(huì)重新加載請(qǐng)求：
<keep-alive exclude="Detail">
<router-view/>
</keep-alive>
注：
- 其中的Detail為指定的路由頁(yè)面，文件名稱：
Detail.vue - 則每次進(jìn)入頁(yè)面州叠，生命周期鉤子函數(shù)
mounted都會(huì)被重新執(zhí)行
5棵红、多頁(yè)面的拖動(dòng)影響
5.1、問題說明：
當(dāng)在一個(gè)頁(yè)面拖動(dòng)到底部的某個(gè)位置的時(shí)候咧栗，再點(diǎn)擊其中的一個(gè)元素進(jìn)入到下一個(gè)頁(yè)面逆甜，則進(jìn)入的這個(gè)頁(yè)面也會(huì)被拖到相同的位置，這就造成了多頁(yè)面的拖動(dòng)影響
5.2致板、解決辦法：
在路由配置中交煞，加入一項(xiàng)scrollBescrollBehavior ，即每次進(jìn)行路由切換的時(shí)候斟或，讓頁(yè)面的初始位置為指定的x和y值
export default new Router({
routes: [{
path: "/", //根路徑
name: "Home", //名稱
component: Home //組件名稱
}, {
path: "/city", //指定路徑
name: "City",
component: City
}
//....
],
scrollBehavior (to, from, savedPosotion) {
return { x: 0, y:0 }
}
});
6素征、頁(yè)面支持IP訪問
6.1、問題說明：
前端項(xiàng)目通過webpage 啟動(dòng)的缕粹，它不支持IP的形式進(jìn)行頁(yè)面訪問稚茅，所以需要修改項(xiàng)目的默認(rèn)配置項(xiàng)
6.2、解決方案：
在項(xiàng)目的根目錄下的package.json文件中平斩，進(jìn)行如下配置：
"scripts": {
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
......
},
注：主頁(yè)增加了--host 0.0.0.0
7亚享、兼容性問題
7.1、問題說明：
在某些瀏覽器和手機(jī)上不支持一些es6和vue的新特性绘面，就會(huì)出現(xiàn)兼容性的問題
7.1欺税、解決方案：
通過使用第三方框架庫(kù)babel-polyfill來解決兼容性問題
- 安裝：
npm install babel-polyfill --save - 使用：
重啟姓名服務(wù)器侈沪，在項(xiàng)目中直接引入代碼即可import "babel-polyfill"
參考文章：https://blog.csdn.net/crazyfeeling/article/details/70241285
8、項(xiàng)目打包上線
-
路徑配置：
如果需要將打包好的文件放到指定的目錄中進(jìn)行訪問晚凿，則需要進(jìn)行相應(yīng)的配置：
找到index.js文件亭罪，在build配置項(xiàng)中，進(jìn)行如下配置：build: { ...... assetsPublicPath: '/project', ...... {注：其中的project就是需要配置的路徑
打包編譯（build）：
npm run build
vue腳手架工具會(huì)自動(dòng)的對(duì)src目錄下的源代碼進(jìn)行打包編譯歼秽，生產(chǎn)一個(gè)能夠被瀏覽器運(yùn)行的代碼应役，同時(shí)這套代碼也被壓縮了的。運(yùn)行之后燥筷，顯示Build complete即成功完成編譯箩祥，會(huì)生產(chǎn)一個(gè)dist目錄，此目錄即為要上線的文件部署到服務(wù)器后臺(tái)
將打包好的文件dist中的文件放到服務(wù)器上的指定目錄中即可
9肆氓、異步組件的使用：
9.1袍祖、使用方式：
- 常規(guī)組件的寫法：
import HomeHeader from './components/HomeHeader.vue' export default { ...... components: { HomeHeader: HomeHeader, } ...... } - 異步組件的寫法：
import HomeHeader from './components/HomeHeader.vue' export default { ...... components: { HomeHeader: () => import('./components/HomeHeader.vue'), } ...... }
9.2、注意事項(xiàng)：
- 使用異步加載可以避免一次性將數(shù)據(jù)全部加載完成谢揪，造成加載量過大
- 只有當(dāng)項(xiàng)目很龐大蕉陋，app.js達(dá)到至少1MB以上的時(shí)候，才有必要使用異步加載組件進(jìn)行拆分
三拨扶、相關(guān)參考
1凳鬓、項(xiàng)目開發(fā)參考
1.1、集成自定義的模板腳手架：
四屈雄、相關(guān)問題
1村视、發(fā)布項(xiàng)目遇到圖片找不到情況：
1.1、問題描述：
- 在使用npm run build進(jìn)行webpack打包后酒奶，發(fā)布的項(xiàng)目可能會(huì)遇到圖片等找不到的情況蚁孔。
1.2、解決方案：
- “萬(wàn)能”解決辦法：
- 將config/index.js 里面的
assetsPublicPath:'/'改為assetsPublicPath:'./' - build/util.js里面的
將其中的if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, fallback: 'vue-style-loader', publicPath:'/' })publicPath改為：publicPath：'../../'就可以了惋嚎。這樣打包出來的路徑就是正確的了杠氢。 - 將config/index.js 里面的
說明：
- 第一個(gè)是為了改變js中引入圖片的路徑，改為
./就是指在當(dāng)前路徑另伍，這個(gè).代表的路徑就是assetsRoot+assetsSubDictionary鼻百，這里定位到dist/static/，加上圖片前綴img摆尝，就可以找到了温艇。 - 第二種是為了改變vue文件中使用style樣式里面例如
background:url('xxx')，這樣的路徑堕汞，因?yàn)閟tyle最終變成css文件在dist/static/css里面勺爱，我們的圖片放在dist/static/img中，那么加上../../變成dist目錄下讯检，默認(rèn)的目錄前綴是static琐鲁，img是圖片默認(rèn)前綴卫旱，這樣就可以定位到圖片。
