項目初始化
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文件介紹:
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 地址 分支名 |
本文同步發(fā)表在我的個人博客:https://www.lubaojun.com/







