目錄
簡介
Nodejs安裝及環(huán)境配置
下載安裝
如何用vite創(chuàng)建一個vue項目
在cmd下輸入命令
使用gitee
設(shè)置私人令牌
創(chuàng)建倉庫
git的安裝和環(huán)境配置
本地克隆倉庫
提交修改后倉庫
簡介
vue官網(wǎng)
Vue.js - 漸進式 JavaScript 框架 | Vue.js
vite官網(wǎng)
Vite中文網(wǎng)
Vite 是一種具有明確建議的工具，具備合理的默認設(shè)置。您可以在 功能指南 中了解 Vite 的各種可能性。通過 插件，Vite 支持與其他框架或工具的集成。如有需要，您可以通過 配置部分 自定義適應(yīng)你的項目。
Vite 還提供了強大的擴展性，可通過其 插件 API 和 JavaScript API 進行擴展，并提供完整的類型支持。
Nodejs安裝及環(huán)境配置
下載安裝
點擊這里下載
根據(jù)自己電腦系統(tǒng)及位數(shù)選擇，我這里選擇windows64位.msi格式安裝包
下載完成后，雙擊安裝包，開始安裝，一直點next即可，安裝路徑默認在C:\Program Files下，也可以自定義修改
安裝完成后，.msi格式的安裝包已經(jīng)將node.exe添加到系統(tǒng)環(huán)境變量path中,如果你下載的是.zip格式，因為沒有安裝過程，所以需要手動將node.exe所在目錄添加到環(huán)境變量path中，查看系統(tǒng)變量驗證
如何用vite創(chuàng)建一個vue項目
在cmd下輸入命令
首先輸入npm create vite@latest
然后name后面輸入文件夾名稱
選擇Vue項目和JavaScript腳本語言
根據(jù)產(chǎn)生的run，依次進入三個命令
?
Done. Now run:
?1、 cd 20231114-02
?2、npm install
?3、npm run dev
PS E:\2201software\20231114> cd ..
PS E:\2201software> npm create vite@latest
輸入項目名稱
√ Project name: ... 20231114-02
? Select a framework: ? - Use arrow-keys. Return to submit.
??? Vanilla
>?? Vue
??? React
??? Preact
??? Lit
??? Svelte
??? Solid
??? Qwik
??? Others
? 選擇vue項目
?----------------------------------------------------------------------------------------------------
??? √ Select a framework: ? Vue
? Select a variant: ? - Use arrow-keys. Return to submit.
??? TypeScript
>?? JavaScript
??? Customize with create-vue ↗
??? Nuxt ↗
選擇腳本語言
?----------------------------------------------------------------------------------------------------
Scaffolding project in E:\2201software\20231114-02...
Done. Now run:
? cd 20231114-02
? npm install??
? npm run dev??
PS E:\2201software>
Done. Now run:
? cd 20231114-02
? npm install
? npm run dev
PS E:\2201software> cd 20231114-02
PS E:\2201software\20231114-02> npm install
[#########.........] | idealTree:20231114-02: timing idealTree:#root Compl
----------------------------------------------------------------------------------------
運行項目? npm run dev
PS E:\2201software\20231114-02> npm run dev
> 20231114-02@0.0.0 dev
> vite
? VITE v4.5.0? ready in 556 ms
? ?? Local:?? http://localhost:5173/
? ?? Network: use --host to expose
? ?? press h to show help使用gitee
進入gitee官網(wǎng)，注冊登錄賬號，進入官網(wǎng)，進入個人主頁。
gitee官網(wǎng)
設(shè)置私人令牌
進入個人設(shè)置
選擇私人令牌
生成新令牌
輸入私人令牌描述和密碼后即可生成，并將令牌復(fù)制
設(shè)置令牌
打開vs，在設(shè)置中搜索gitee（已下載gitee插件，如未配置，請先下載gitee插件），點擊擴展，粘貼進私人令牌中。設(shè)置完成后將vs關(guān)閉重啟
創(chuàng)建倉庫
重啟后進入gitee插件
在新建倉庫中輸入倉庫名稱，回車確認
設(shè)置好后，會在倉庫下方顯示庫名
返回gitee頁面，在個人主頁頁面進入倉庫，并點擊庫名進入demo倉庫
點擊初始化readme文件
進入此界面則倉庫創(chuàng)建完成
git的安裝和環(huán)境配置
Git下載網(wǎng)址
根據(jù)自己電腦系統(tǒng)及位數(shù)選擇
下載完成后，雙擊安裝包，開始安裝，一直點next即可，安裝路徑默認在C:\Program Files下，也可以自定義修改
下載后自動將git.cmd所在目錄添加到環(huán)境變量path中
本地克隆倉庫
點擊倉庫中的下載，復(fù)制下載路徑
返回vs中，選擇源代碼管理（需先將Node.js配置在環(huán)境變量中），點擊克隆
將路徑復(fù)制在文本框中
選擇克隆位置并創(chuàng)建
第一次克隆需輸入用戶名和密碼（如若在此時賬號或密碼輸入錯誤，需在控制面板-管理Windows憑據(jù)中找到gitee.com修改）
成功后在資源管理器中顯示倉庫
提交修改后倉庫
如果對倉庫內(nèi)容進行修改，需提交到倉庫，在源代碼管理器中可直觀對比
點擊提交
文章來源：http://www.zghlxwxcb.cn/news/detail-826286.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-826286.html
到了這里，關(guān)于用CScode創(chuàng)建vue前端的環(huán)境配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
