這篇文章單純關(guān)于 學(xué)習(xí)教學(xué)視頻《vue2.5開發(fā)去哪兒網(wǎng)App》做記錄，并且是直接來到項(xiàng)目預(yù)熱章節(jié)距糖，本地已安裝node與npm颓芭，文章里有很多內(nèi)容是學(xué)習(xí)過程中進(jìn)行查閱學(xué)習(xí)的記錄，因此這是一篇主要關(guān)于構(gòu)建與工具的記錄局待，關(guān)于vue的學(xué)習(xí)知識僅保留在本地
使用github管理本地代碼版本，使用git
- 生成本地公鑰與私鑰，并獲取公用密鑰
ssh-keygen -t rsa -C 'yourName@xxx.com'
cat ~/.ssh/id_rsa.pub
-
github里添加公鑰钳榨，將本機(jī)公鑰加入公鑰設(shè)置里舰罚，實(shí)現(xiàn)本地與github無需帳號密碼同步
add new SSH key 執(zhí)行
ssh -T git@github.com卻出現(xiàn)報錯：ssh_exchange_identification: read: Connection reset by peer執(zhí)行
ssh git@github.com -vT打印出：
OpenSSH_7.3p1, OpenSSL 1.0.2h 3 May 2016
debug1: Reading configuration data /etc/ssh/ssh_config
debug1: Connecting to github.com [13.229.188.59] port 22.
debug1: Connection established.
debug1: identity file /c/Users/admin/.ssh/id_rsa type 1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_rsa-cert type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_dsa type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_dsa-cert type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_ecdsa type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_ecdsa-cert type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_ed25519 type -1
debug1: key_load_public: No such file or directory
debug1: identity file /c/Users/admin/.ssh/id_ed25519-cert type -1
debug1: Enabling compatibility mode for protocol 2.0
debug1: Local version string SSH-2.0-OpenSSH_7.3
ssh_exchange_identification: read: Connection reset by peer
查詢ip 13.229.188.59確實(shí)為github地址，并不存在劫持
通過git上該文章https://help.github.com/en/articles/using-ssh-over-the-https-port解決問題
可能會有人跟我一樣沒有config文件重绷，在.ssh文件夾下手動創(chuàng)建吧沸停，沒文件類型哈，文件夾路徑為C:\用戶\admin.ssh
- 執(zhí)行
git clone 下圖拿到的ssh地址克隆到本地
clone - 在本地拉下來的工程里安裝vue腳手架昭卓，執(zhí)行命令
npm install -g vue-cli愤钾，具體可查閱vue-cli對應(yīng)的vpm網(wǎng)址 - 去到工程的上一級（比如現(xiàn)在的文件夾是travel，那就回到上一級）候醒，執(zhí)行
vue init webpack travel - 回到工程目錄能颁，執(zhí)行
npm run dev，會構(gòu)建一個本地服務(wù)器倒淫，復(fù)制地址到瀏覽器訪問伙菊，到這里項(xiàng)目搭建完成 - 同步到github倉庫上，執(zhí)行
git status會列出現(xiàn)在與之前不一致的文件 - 執(zhí)行
git add .把這些文件添加到git的緩沖區(qū)上 - 執(zhí)行
git commit -m 'project initialized' - 執(zhí)行
git push把代碼同步到github倉庫上 - 當(dāng)其他終端克隆該項(xiàng)目時敌土，因?yàn)閚ode-modules并不會上傳到github镜硕，需要手動下載，在該文件夾下執(zhí)行
npm install即可
所有生成文件的簡要說明
readme文件 -- 是對項(xiàng)目的簡要說明文件
package.json -- 第三方模塊依賴
package-lock.json -- package的索引文件返干，幫助我們確認(rèn)一些第三方依賴的版本（不過我做的時候沒生成該文件出來）
LICENSE -- 開源協(xié)議說明
index.html -- 默認(rèn)首頁模板文件
postcsssrc.js -- postcss配置項(xiàng)
gitignore -- 上傳到git的文件管理兴枯，用來管理哪些文件需要上傳哪些不上傳
eslintrc.js -- 檢測代碼規(guī)范
eslintignore -- 哪些文件不會被eslintre檢測
editorconfig -- 編輯器里的一些語法配置
babelre -- 語法解析器，對vue的語法進(jìn)行一些轉(zhuǎn)換矩欠，讓瀏覽器編譯執(zhí)行
static文件夾 -- 放靜態(tài)資源财剖，比如靜態(tài)圖片，json數(shù)據(jù)等
node_modeules -- 第三方依賴包
src -- 整個項(xiàng)目的源代碼
- main.js -- 項(xiàng)目的入口文件
- app.vue -- 項(xiàng)目最原始的根組件
- router-index.js -- 項(xiàng)目所有路由
- compontents -- 項(xiàng)目用的組件
- assets -- 項(xiàng)目圖片
config -- 整個項(xiàng)目的配置文件
- dev.env.js -- 開發(fā)環(huán)境的配置信息
- index.js -- 基礎(chǔ)配置信息
- prod_env.js -- 線上環(huán)境的配置信息
bulid -- 整個項(xiàng)目的webpack打包配置內(nèi)容（一般不需要修改癌淮，所以也不需要太關(guān)注）
- webpack.base.conf.js -- 基礎(chǔ)的webpack配置項(xiàng)
- webpack.dev.conf.js -- 開發(fā)環(huán)境的webpack配置項(xiàng)
- webpack.prod.conf.js -- 線上環(huán)境環(huán)境的webpack配置項(xiàng)
多頁應(yīng)用 vs 單頁應(yīng)用
安裝flexible 與 px2rem
由于項(xiàng)目是移動端躺坟，因此像視頻一樣手動計算rem是不現(xiàn)實(shí)的，因此需要添加這兩個庫來幫助我們計算
- 下載安裝flexible
npm i lib-flexible --save-dev
- 在main.js里引入lib-flexible
import 'lib-flexible/flexible'
- 安裝px2rem loader
npm install px2rem-loader --save-dev
- 在build文件中找到util.js乳蓄，將px2rem-loader添加到cssLoaders中：
// 增加px2remLoader
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75,
baseDpr: 2
}
}
// 這個是為了給全局添加輔助函數(shù)咪橙，這樣就不需要每個文件都去 @import '~style/fn.styl'
const stylusOption = {
// 要導(dǎo)入全局的文件
import:[
path.join(__dirname, "../src/assets/style/fn.styl")
],
// 全局的路徑
paths:[
path.join(__dirname, "../src/assets/style/"),
path.join(__dirname, "../")
]
}
function generateLoaders(loader, loaderOptions) {
// 修改loaders規(guī)則
const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus', stylusOption),
styl: generateLoaders('stylus', stylusOption)
}
這里補(bǔ)充一下，對到px2rem虚倒，使用的時候會對所有px單位都進(jìn)行rem轉(zhuǎn)換計算匣摘，但對到某些如同邊框，字體這些裹刮，有些時候我們并不希望轉(zhuǎn)化為rem，那么這時需要使用下面兩個技巧：
- 在px后面添加
/*no*/庞瘸，不會轉(zhuǎn)化px捧弃，會原樣輸出。（邊框，圓角等） - 在px后面添加
/*px*/,會根據(jù)dpr的不同违霞，生成三套代碼嘴办。（字體上可以使用）
如果是使用stylus的同學(xué)，記得加 “;” 號买鸽，否則還是會編譯為rem涧郊，有興趣的同學(xué)也可以自行看起github上的項(xiàng)目
傳送門：px2rem地址
傳送門：stylus中文文檔
對于路徑填寫較長的，可以自定義關(guān)鍵字來決定眼五。通過更改添加 bulid 中的 webpack.base.conf 中的 alias鍵值來增加更改指定路徑妆艘，就像threejs中的loader類，有一個.setPath()看幼，可以指定對應(yīng)下載資源的基本路徑路徑一樣
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
//以后路徑就不需要用各種./../或@來指定路徑批旺，可以直接跑到指定文件夾去
'style': resolve('src/assets/style'),
'js': resolve('src/assets/js')
}
//在某個styl里需要用到 fn.styl，則可以使用下面這樣
@import '~style/fn.styl'
github上創(chuàng)建分支及合并分支
公司級別的操作一般是需要通過分支合并到主線里來實(shí)現(xiàn)代碼管理的诵姜，公司用的是hg汽煮，所以一直也沒了解過這些，這次通過學(xué)習(xí)來記錄一下如何通過github上實(shí)現(xiàn)分支的管理合并
上圖我已經(jīng)新建了一個index-swiper的分支棚唆，如果還需要新建其他分支暇赤，只需要在這里輸入分支的名稱，點(diǎn)擊下面的create即可宵凌，分支創(chuàng)建好后需要同步拉取到本地
- 執(zhí)行
git pull拉取線上分支 - 執(zhí)行
git checkout index-swiper將本地分支設(shè)置為index-swiper - 可以通過
git status來查看本地當(dāng)前分支
切換到分支后便是開發(fā)需求功能
開發(fā)的過程中由于沒像視頻里一樣直接拿的線上圖片鞋囊，訪問靜態(tài)資源，發(fā)現(xiàn)別名在data中無法被編譯
swiperList: [
{
'imgUrl': "@img/swiper_1.jpg",
'id': "swiper_1"
},{
'imgUrl': "@img/swiper_2.jpg",
'id': "swiper_2"
},{
'imgUrl': "@img/swiper_3.jpg",
'id': "swiper_3"
}
]
解決的辦法有幾個摆寄，其中覺得比較實(shí)用的是require失暴，代碼更改如下：
swiperList: [
{
'imgUrl': require("@img/swiper_1.jpg"),
'id': "swiper_1"
},{
'imgUrl': require("@img/swiper_2.jpg"),
'id': "swiper_2"
},{
'imgUrl': require("@img/swiper_3.jpg"),
'id': "swiper_3"
}
]
對到使用background背景圖要使用別名，除了需要使用~微饥，還要記得url里需要帶上雙引號：
.icon
display: inline-block
width: 33px;/*no*/
height: 33px;/*no*/
background-image: url("~@img/entrances.png")
background-size: 374px 130px;/*no*/
background-repeat: no-repeat
還有個做法但是我webpack還沒學(xué)逗扒，跟著整一直編譯報錯，先做個記錄：
vue webpack 打包處理stylus中圖片的路徑問題
當(dāng)開發(fā)完后欠橘，需要將自己的分支提交到github上矩肩，由管理員審核后合并到主線中，操作步驟如下：
- 執(zhí)行
git add .把這些文件添加到git的緩沖區(qū)上 - 執(zhí)行
git commit -m 'change'將暫存區(qū)里的改動提交到本地的版本庫肃续，簡要說明為change - 如果你的git沒有設(shè)置郵箱名稱黍檩，這個時候會提示讓你輸入你的郵箱與名稱，執(zhí)行
git config --global user.email "you@example.com"
git config --global user.name "Your Name" - 重新執(zhí)行
git commit -m 'change'始锚，這個時候就會顯示出本次更改變化的所有文件 - 執(zhí)行
git push把代碼同步到github倉庫上（分支上） - 執(zhí)行
git checkout master重新切換到master主線上 - 執(zhí)行
git merge origin/index-swiper刽酱，將index-swiper分支合并到主線上 - 執(zhí)行
git push把代碼同步到github倉庫上
由于我重新申請了github帳號（之前帳號是瞎填的），需要把本地項(xiàng)目重新推到新的帳號倉庫上瞧捌，查閱很多都不行棵里，還是簡書的非復(fù)制粘貼靠譜润文。如果也有同樣需求的童鞋可以參考 fatal: remote origin already exists.解決方法
static目錄是唯一可以被外部訪問的目錄，因此需要被外部可訪問的文件都可以放在static目錄下（忽然想起之前在stylus背景使用別名一直報錯殿怜，有找到一種說把圖片放在static目錄里典蝌，大概就是這原因吧）
當(dāng)不需要把文件提交到github上，則需要在gitignore中添加對應(yīng)的目錄路徑static/mock头谜，這樣就不會把本地模擬數(shù)據(jù)提交到遠(yuǎn)程倉庫上骏掀，也不會保存到本地git倉庫里
當(dāng)需要請求走代理的時候，webpack提供了一個proxyTable的屬性柱告，在config目錄下的index.js截驮，更改proxyTable
proxyTable: {
'/api': { //請求api目錄的時候
target: 'http://localhost:8080', // 依然是本地路徑8080端口
pathRewrite: {
'^/api': "/static/mock" //請求是api開頭的目錄的時候，轉(zhuǎn)發(fā)到/static/mock文件目錄里
}
}
}
這里有個小問題需要注意末荐，如果拿到的json文件格式有問題侧纯，那么webpack會自動返回成字符串類型，因此當(dāng)拿到的結(jié)果不是對象的形式甲脏，那需要去檢查一下本地的json是否書寫有誤（因?yàn)槲揖褪嵌嗔藗€逗號結(jié)果拿不到數(shù)值）
對到多組件間的傳值眶熬，除了bus總線，還能使用vuex块请，當(dāng)然查閱文檔的時候發(fā)現(xiàn)娜氏，如果不是大型單頁應(yīng)用其實(shí)也可以不使用vuex，可以使用 store狀態(tài)管理墩新，唯一不方便的是調(diào)試贸弥，因此共享狀態(tài)不多的情況下簡單的使用store也是一個不錯的選擇
var store = {
debug: true,
state: {
message: 'Hello!'
},
setMessageAction (newValue) {
if (this.debug) console.log('setMessageAction triggered with', newValue)
this.state.message = newValue
},
clearMessageAction () {
if (this.debug) console.log('clearMessageAction triggered')
this.state.message = ''
}
}
教學(xué)視頻畢竟是入門級，很多沒說海渊，還是得看官方文檔绵疲，包括寫進(jìn)計算屬性里呀，使用mapState啊等等臣疑，這些就不做記錄了
當(dāng)使用全局事件的時候盔憨，要記得解綁
// 這里對到為什么使用keep-alive，而不是常規(guī)的mounted感到不解讯沈，也沒說為何
activated () {
// 全局事件綁定郁岩，需要注意解綁
window.addEventListener('scroll', this.handleScroll)
},
deactivated () {
window.removeEventListener('scroll', this.handleScroll)
}
組件的遞歸調(diào)用，說是個難點(diǎn)…沒看出難點(diǎn)也沒看出啥亮點(diǎn)缺狠，留著做記錄问慎，估計組件遞歸也就這種做固定的
<template>
<div class="detail-lsit">
<div class="item"
v-for="(item, index) of list"
:key="index">
<div class="item-title">
<h3 class="title">{{item.title}}</h3>
</div>
<!-- 如果還有children繼續(xù)賦值調(diào)用組件 -->
<div v-if="item.children"
class="second-item">
<detail-list :list="item.children"></detail-list>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'DetailList',
props: {
list: Array
}
}
</script>
<style lang="stylus" scoped>
.item
&:nth-child(n+2)
border-top: 1px solid #ececec
.item-title
line-height: 60px
font-size: 12px;/*no*/
padding: 0 20px
.title
&::before
content: ''
display: inline-block
width: 18px;/*no*/
height: 18px;/*no*/
margin-right: 10px
vertical-align: -12%
background: url("~@img/ticket.png") no-repeat center / cover
.second-item
padding-left: 20px
</style>
對到最后章節(jié)，如果需要請求其他端口的json配置挤茄，可以使用 http-server（個人就是直接用的http-server）
- 安裝http-server
npm i http-server -g - 開啟非8080端口
http-server -p 80如叼，這樣就在該文件夾下啟動了80端口的服務(wù)器（我說的該文件夾，是指你放api/***json的文件夾） - 更改config下的index.js文件
proxyTable: {
'/api': { //請求api目錄的時候
/* 本地調(diào)試請求轉(zhuǎn)發(fā) */
// target: 'http://localhost:8080', // 依然是本地路徑8080端口
// pathRewrite: {
// '^/api': "/static/mock" //請求是api開頭的目錄的時候穷劈，轉(zhuǎn)發(fā)到/static/mock文件目錄里
// }
/* 本地聯(lián)調(diào)薇正，使用了http-server */
target: "http://localhost"
}
},
webpack-dev-server默認(rèn)不支持ip訪問片酝，如果需要直接訪問ip地址，則需要更改package.json文件中對webpack-dev-server的配置定義（由于是json格式挖腰，復(fù)制代碼記得手動去除注釋）
"scripts": {
/* webpack-dev-server 默認(rèn)不支持ip直接訪問，要通過ip訪問需要webpack-dev-server添加 --host 0.0.0.0 */
"dev": "webpack-dev-server --host 0.0.0.0 --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"lint": "eslint --ext .js,.vue src",
"build": "node build/build.js"
},
對到真機(jī)白屏练湿，有可能是因?yàn)椴恢С諩S6新特性猴仑，需要安裝babel-polyfill
- travel文件夾下運(yùn)行
npm i babel-polyfill --save - main.js中引入bable-polyfill
import 'babel-polyfill'
課程到這里完整結(jié)束，后面的章節(jié)沒什么必要記筆記就沒寫了肥哎，包括項(xiàng)目上線辽俗，箭頭函數(shù)異步加載那些都是比較基礎(chǔ)的。接下來會學(xué)習(xí)webpack篡诽，加油崖飘！
補(bǔ)充一下，對到視頻里每次都去github上創(chuàng)建分支杈女，本地pull的方法實(shí)在煩朱浴，好在學(xué)習(xí)webpack之后現(xiàn)在我不需要這么做了，按照我的流程來即可达椰，你完全可以先開發(fā)代碼再來創(chuàng)建分支：
- 執(zhí)行
git checkout -b branchName創(chuàng)建名為branchName的分支翰蠢，并跳到當(dāng)前branchName分支上 - 執(zhí)行
git add .將本次修改加入緩沖區(qū) - 執(zhí)行
git commit -m "description"把文件提交到本地倉庫，描述為description - 執(zhí)行
git push --set-upstream origin branchName將本地分支提交到遠(yuǎn)程倉庫
這個時候你再上github上看啰劲，會發(fā)現(xiàn)多了一條branchName的分支梁沧，文件也提交上來了，這樣蝇裤，就不用重復(fù)視頻創(chuàng)建分支廷支，git pull，git checkout
