腳本之家服務器常用軟件

快捷導航

vscode安裝git及項目開發(fā)過程

更新時間：2021年03月31日 11:47:34 作者：Rashu99

這篇文章主要介紹了vscode安裝git及項目開發(fā)過程,本文通過圖文并茂的形式給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

項目開發(fā)

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

1.下載git鏈接

2.next完后，打開vscode，文件->首選項->設置->用戶配置下加上git安裝路徑下的Git文件夾下的cmd的git.exe

在這里插入圖片描述

3.去github.com上注冊一個賬號，并且創(chuàng)建一個新項目，寫個項目名稱其他默認就好了

在這里插入圖片描述

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

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

然后vscode上就會出現這個文件夾因為這個項目是空的所以只有一個license

在這里插入圖片描述

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

npm install -g @vue/cli@3.0.4

在這里插入圖片描述

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

6.然后在supermall的終端下

先進行git init 生成.git 文件夾

git init

然后這時候有的文件夾就會變紅如下
用git status 查看

在這里插入圖片描述

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

在這里插入圖片描述

因為裝完git 沒配置所以在這里配置下全局默認ID

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

在這里插入圖片描述

然后接著

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

在這里插入圖片描述

他會跳出登錄github 登錄就可以了

在這里插入圖片描述

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

在這里插入圖片描述

劃分目錄結構

新建一些文件夾
assets 放資源樣式比如 img css 而css文件下 normalize.css 初始化基礎樣式
common 是公共的比如一些js代碼
components 放組件再分成common文件夾和content文件夾 content主要是業(yè)務相關的代碼比如MainTabBar 需要經常更改代碼的
network 放網絡相關
router 放路由
store 放vuex
views 放視圖比如說我的/分類/購物車/首頁

在這里插入圖片描述

引入CSS文件

css里也可以定義變量 –

在這里插入圖片描述

配置別名
@相當于src

在這里插入圖片描述

tabbar組件

從之前寫的tabbar 文件夾復制過來

在這里插入圖片描述

content放的是業(yè)務相關的，也就是說圖標文字可以在這里改，所以放MainTabBar.vue

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

然后復制之前寫的views 里面放首頁/分類/購物車/我的只是創(chuàng)建一個vue文件并沒有寫什么
接著要router-view 渲染出來所以得安裝router
npm install vue-router --save
然后在router文件下創(chuàng)建index.js
在這里配置相關代碼

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

在這里插入圖片描述