Vue 后臺管理項目2-項目初始化

項目初始化

1.腳手架搭建項目

vue-cli3腳手架作用:自動幫我們完成webpack跟Vue相關(guān)的所有配置.

全局安裝指令:cnpm install -g @vue/cli ,只要第一次安裝就會全局存在腳手架,以后直接按照搭建步驟使用即可.

注意事項:
如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x),需要先通過 cnpm uninstall vue-cli -g卸載它,再重新安裝.
可以用指令檢查版本:vue --version

搭建步驟

NO. 步驟描述
1 vue create 新建文件名(該項目是manage)
2 cd manage (進(jìn)入項目文件)
3 npm run serve (啟動前端開發(fā)服務(wù)器,直接用瀏覽器打開vue文件沒效果)
注意 創(chuàng)建的項目文件名不能是中文,包裹創(chuàng)建項目的文件夾可以是中文
擴展:vue.js為什么需要npm run才能運行? webpack的話,是用webpack-dev-server這個插件,比如頁面入口文件main.js執(zhí)行npm run后才能生成在內(nèi)存里,與其他文件形成關(guān)聯(lián)

Ⅰ.提示選取一個 preset(預(yù)設(shè)置):
默認(rèn)的設(shè)置非常適合快速創(chuàng)建一個新項目的原型,而手動設(shè)置則提供了更多的選項,它們是面向生產(chǎn)的項目更加需要的。

Ⅱ.初始化項目成功,訪問網(wǎng)頁顯示如下。

Ⅲ.npm run serve:
其實就是執(zhí)行了vue-cli-service serve 命令,它會啟動一個開發(fā)服務(wù)器 (基于 webpack-dev-server) 并附帶開箱即用的模塊熱重載 (Hot-Module-Replacement)。

Ⅳ.vue-cli3文件介紹:

V.刪除默認(rèn)路由頁面:

2.git本地托管

NO. 步驟描述
1 可以在manage項目內(nèi)再打開一個終端,進(jìn)行g(shù)it托管和插件下載
2 git add . (出現(xiàn)如下warning不影響,繼續(xù)往下執(zhí)行)
3 git commit -m"初始化"
4 git branch dev(創(chuàng)建dev分支)
5 git checkout dev (切換到dev分支)
6 git log --oneline (查看提交版本信息)
7 git status (查看分支是否切換成功)

3.提交到github:集合遠(yuǎn)程git工作流

NO. 步驟描述
1 新建github遠(yuǎn)程倉庫(這里不再贅述,不懂請看之前的Git教程)
2 git push 遠(yuǎn)程地址 分支名
3 (每天上班) git pull (拉取最新)
4 (每天過程循環(huán)) git add .+ git commit -m"信息"(提交更新并備注)
5 (每天下班) git push 地址 分支名

本地倉庫與遠(yuǎn)程倉庫關(guān)系如下

本文同步發(fā)表在我的個人博客:https://www.lubaojun.com/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容