2019年8月7日
(1)項目開發(fā)準備
1.node與npm準備 npm是node自帶的包管理器
2.安裝vue-cli腳手架工具当船。幫助構建vue項目度宦。
npm install -g vue-cli? ? ? ? ? ? ? ? vue init webpack my-project? ? ? ? 2.9.6版本
npm install -g @vue/cli? ? ? ? ? ? vue create my-project? ? ? ? ? ? ? ? ? ? 3.0以上版本
3. 利用碼云實現(xiàn)代碼版本管理
注冊碼云 創(chuàng)建項目 生成公鑰私鑰 上傳代碼
git status? ? ? git add .? ? git commit -m "this is commit message"? ?git push
(2) 開始開發(fā)
注意:建議每次開發(fā)前需要新建分支庶橱,然后 git pull? ? ?git checkout index-swiper? ? git status
(3)知識回顧 - vue項目的目錄結構
build目錄是一些webpack的文件撮奏,配置參數(shù)什么的升敲,一般不用動 昧识。我配置過webpack.base.conf.js里的alias(別名)攻臀,其他的還未仔細研究實踐焕数。
config是vue項目的基本配置文件 。index.js 是基礎配置? 其他三個js用于配置開發(fā)刨啸、測試與生產環(huán)境(還沒有配置過)堡赔。
node_modules是項目中安裝的依賴模塊
src源碼文件夾,基本上文件都應該放在這里设联。
—assets 資源文件夾善已,里面放一些靜態(tài)資源。包括styles(里面可以放.css .styl文件)
—components這里放的都是各個組件文件离例。components可以按照項目架構劃分换团,然后各部分都可以有自己的components,可以將項目理解成眾多components的合集宫蛆。真正的業(yè)務邏輯都是在components中艘包。
—App.vue App.vue組件
—main.js入口文件。整個項目的入口邏輯如下:
? ? 1.在項目最外層有一個index.html,定義了一個最外層的div想虎,id是app
2.main.js中new了一個vue實例卦尊,綁定的就是index.html中的div id=app,在這個vue中舌厨,有一個router岂却,一個componens APP?
? ? 3. App.vue是一個非常簡單的單頁面組件,就是使用了router-view這個組件
4.在router目錄下的index.js中邓线,定義了各個路由與對應的組件
? ? 5.然后在各個子組件中進行邏輯編碼淌友。
static生成好的文件會放在這個目錄下。
test測試文件夾骇陈,測試都寫在這里
.babelrc babel編譯參數(shù),vue開發(fā)需要babel編譯
.editorconfig 看名字是編輯器配置文件瑰抵,不曉得是哪款編輯器你雌,沒有使用過。
.gitignore 用來過濾一些版本控制的文件二汛,比如node_modules文件夾
index.html 主頁
package.json 項目文件婿崭,記載著一些命令和依賴還有簡要的項目描述信息
README.md 介紹自己這個項目的