Vue 重寫CNnodejs社區總結2

項目簡介

根據CNodejs社區提供的接口地址，用vue2.0重寫了一下。用到的主要是vue-cli、vue-router、axios、flex佈局

實現功能

我的中心（登陸退出）
首頁列表（主題分類，下拉加載）
文章詳情（包括髮表評論，回覆評論，點贊，收藏）
用戶信息（點擊頭像）
消息中心（已讀、未讀）
發佈主題（支持markdown編輯且可預覽）

項目結構

 

開發流程

主要是在vue-cli的基礎上開發，按照接口地址一個一個功能來實現
1 使用vue-cli搭建項目 vue init webpack projectname
2 修改文件結構，在app.vue中引入公共樣式文件，若是沒有統一下載依賴文件，這裏須要下載一些依賴，例如
npm install sass-loader -D
npm install node-sass -D // -D (--save-dev)

項目總結

項目過程當中被記錄下來的一些點
1.考慮組件結構;引入外部樣式時，貌似要在句尾加分號嗎;組件命名注意不要和html5的標籤重複;渲染一段代碼能夠用v-html
2.最重要的是src文件夾: 這裏面的幾個文件夾assets 存放靜態文件，好比圖片等，說明一下，vue通常是把css寫在每一個vue中的，components是組件，一個頁面能夠理解爲由不少不少的組件組成的。
app.vue就是主要的頁面，能夠理解爲把這些組件組合起來的文件。
main.js實際上是用於組合app.vue 和index.html
3.組件遞歸調用,自定義指令，日期格式化，解構賦值，使用scss
4.swiper有個高度auto的設置，能夠翻頁所有後顯示底部頁腳
5取值的異步問題，雖然能獲取值，可是報錯未定義,解決方法是在data裏面初始化一下
6.檢測數組變化，實時渲染頁面Vue.set(this.arr, arrEle, !this.arr[arrEle])
7 感受時間真的很着急，有的功能尚未實現，可能之後再去看吧，左右滑動切換tab，錨點定位，網頁icon,編輯器圖片上傳問題，嘗試寫一個下拉列表的組件，掃碼登陸這個不知道能不能實現
8

mounted調用method裏面的方法
mounted(){
window.onscroll=()=>{
// console.log('a')
this.setpage()
}
}
this做用域的問題

 

9關於下拉加載更多，對瀏覽器滾動判斷問題
10 錨點定位scrollIntoView，或許應該要寫一些demo好好研究一下
11關於生產環境和開發環境接口的問題，想要自動切換接口地址，須要作一些設置
config/dev.env.js和config/prod.env.js 裏面進行設置

'use strict'
module.exports = {
NODE_ENV: '"production"',
BASE_API: '"https://www.xxx.com"',
}

後面那個BASE_API的值是' '' '' '外面有個單引號