項(xiàng)目開(kāi)發(fā)

項(xiàng)目創(chuàng)建和github托管

1.下載git鏈接

2.next完后，打開(kāi)vscode，文件->首選項(xiàng)->設(shè)置->用戶配置下加上git安裝路徑下的Git文件夾下的cmd的git.exe

3.去github.com上注冊(cè)一個(gè)賬號(hào)，并且創(chuàng)建一個(gè)新項(xiàng)目，寫(xiě)個(gè)項(xiàng)目名稱(chēng)其他默認(rèn)就好了

4.重啟vscode，就可以使用git clone ，比如

git clone https://github.com/cnhkkat/vuedemomall.git

然后vscode上就會(huì)出現(xiàn)這個(gè)文件夾 因?yàn)檫@個(gè)項(xiàng)目是空的 所以只有一個(gè)license

?。?！現(xiàn)在默認(rèn)的vue cli 是 4.0.5 版本 后續(xù)發(fā)現(xiàn)有些問(wèn)題解決不了
比如 "export ‘default' (imported as ‘Vue') was not found in ‘vue'
類(lèi)似的 ，可以解決終端不報(bào)錯(cuò)，但是網(wǎng)頁(yè)打開(kāi)還是說(shuō) cannot find 。。。。。
所以為了完成這個(gè)項(xiàng)目
還是回退到3的版本
所以先

npm install -g @vue/cli@3.0.4

5.然后再用vue create supermall 創(chuàng)建一個(gè)項(xiàng)目

6.然后在supermall的終端下

先進(jìn)行g(shù)it init 生成.git 文件夾

git init

然后這時(shí)候有的文件夾就會(huì)變紅 如下
用git status 查看

根據(jù)提示 用 git add . 添加所有的 .文件
再次查看 變綠了

因?yàn)檠b完git 沒(méi)配置 所以在這里配置下全局默認(rèn)ID

git config --global user.email "you@example.com"
 git config --global user.name "Your Name"

然后接著

git commit -m '初始化項(xiàng)目'
git remote add origin https://github.com/cnhkkat/vuedemomall.git 
git push -u origin master

他會(huì)跳出登錄github 登錄就可以了

push 到master里了
所以在master里view code就能看到了

劃分目錄結(jié)構(gòu)

新建一些文件夾
assets 放資源樣式 比如 img css 而css文件下 normalize.css 初始化 基礎(chǔ)樣式
common 是公共的 比如一些js代碼
components 放組件 再分成common文件夾和content文件夾 content主要是業(yè)務(wù)相關(guān)的代碼 比如MainTabBar 需要經(jīng)常更改代碼的
network 放網(wǎng)絡(luò)相關(guān)
router 放路由
store 放vuex
views 放視圖 比如說(shuō) 我的/分類(lèi)/購(gòu)物車(chē)/首頁(yè)

引入CSS文件

css里也可以定義變量 –

配置別名
@相當(dāng)于src

tabbar組件

從之前寫(xiě)的tabbar 文件夾 復(fù)制過(guò)來(lái)

content放的是業(yè)務(wù)相關(guān)的，也就是說(shuō) 圖標(biāo)文字可以在這里改，所以放MainTabBar.vue

而common 是公共普通文件 放組件

然后復(fù)制之前寫(xiě)的views 里面放 首頁(yè)/分類(lèi)/購(gòu)物車(chē)/我的 只是創(chuàng)建一個(gè)vue文件 并沒(méi)有寫(xiě)什么
接著要router-view 渲染出來(lái) 所以得安裝router
npm install vue-router --save
然后在router文件下創(chuàng)建index.js
在這里配置相關(guān)代碼

導(dǎo)入vue 導(dǎo)入vue-router
使用VuerRouter
創(chuàng)建VueRouter的實(shí)例 router 在這里放routes 順便改下mode為history
把routes抽出來(lái) 所以定義一下routers = [] 路由就是放路徑和組件
復(fù)制之前寫(xiě)的

最后一步在main.js里掛載router

這樣就能在App.vue里使用router-view了
在這里導(dǎo)入MainTabBar 以及注冊(cè)MainTabBar 以及使用main-tab-bar
注意路徑問(wèn)題

在MainTabBar里 因?yàn)槭菑?fù)制過(guò)來(lái)所以也要注意路徑問(wèn)題！

這里使用了兩種路徑 一種是別名 @/
一種是絕對(duì)路徑 可能是因?yàn)榘惭b了插件 會(huì)有提示所以感覺(jué)兩者沒(méi)有很大差別
可能在大項(xiàng)目里有很多文件夾 如果一直…/…/…/ 不優(yōu)雅 所以會(huì)使用別名

另外使用別名這里沒(méi)顯示圖標(biāo) 總感覺(jué)怪怪的 這里安裝了image view 這樣就能顯示圖標(biāo)
同樣注意導(dǎo)入的路徑問(wèn)題

然后復(fù)制一下ico logo圖標(biāo)

首頁(yè)開(kāi)發(fā)

首頁(yè)導(dǎo)航欄

因?yàn)槊總€(gè)頁(yè)面都有導(dǎo)航欄 所以在common文件夾下創(chuàng)建navbar文件夾
然后再創(chuàng)建NavBar.vue （一般文件夾小寫(xiě) vue文件大寫(xiě)）
想要實(shí)現(xiàn)以下這種樣式

一般都是分左中右
所以 在插槽外包個(gè)div 設(shè)置樣式 使用具名插槽

父使用flex布局 子使用flex:1 均分 高度為44px

這里做的是首頁(yè)的導(dǎo)航欄
所以在Home.vue里 導(dǎo)入NavBar 并且注冊(cè)它

因?yàn)橹挥惺醉?yè)的導(dǎo)航欄背景顏色是粉色 其他的導(dǎo)航欄可能是白色
所以要設(shè)置在home里 而不能是NavBar里

給nav-bar 搞個(gè)class 這樣就能單獨(dú)設(shè)置樣式
然后使用插槽 名為center

var(–color-tint) 是變量 背景顏色為粉色 字為白色

請(qǐng)求首頁(yè)的多個(gè)數(shù)據(jù)

復(fù)制之前寫(xiě)的axios
也就是network文件下的request.js

然后因?yàn)橐?qǐng)求首頁(yè)的多個(gè)數(shù)據(jù)
為了方便管理url 再封裝一層 也就是說(shuō)在network下創(chuàng)建home.js
因?yàn)閞equest.js是自己封裝的一個(gè)框架 是面向這些組件的 然后home.js面向home.vue 挺合理

之前寫(xiě)到axios里最后返回的是promise

promise可以.then 調(diào)用數(shù)據(jù)

所以 導(dǎo)入getHomeMultidata 因?yàn)槭呛瘮?shù) 所以在（）調(diào)用

（插播一條 **）關(guān)閉eslint 方法

ctrl + p 搜索 eslintrc.js
注釋掉 standard

一直報(bào)錯(cuò)就hin煩 其他解決辦法沒(méi)用 記得保存重啟

可以成功獲得數(shù)據(jù)

函數(shù)執(zhí)行完 里面的變量就被銷(xiāo)毀了 等再次調(diào)用 就重新創(chuàng)建
所以在執(zhí)行完之前要保存數(shù)據(jù)
所以在data（）里定義兩個(gè)空數(shù)組
把數(shù)據(jù)傳給數(shù)組

打開(kāi)vue插件可以看到list

輪播圖

直接復(fù)制粘貼封裝好的 swiper 和 swiperItem
然后在首頁(yè)里

到此這篇關(guān)于vscode安裝git及項(xiàng)目開(kāi)發(fā)過(guò)程的文章就介紹到這了,更多相關(guān)vscode安裝git內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論