Vue3環(huán)境安裝以及項(xiàng)目搭建全過(guò)程
搭建Vue 環(huán)境
1 下載 node.js
node.js 中文網(wǎng) https://nodejs.org/en 下載合適的安裝包 或者可以點(diǎn)擊這里進(jìn)行下載
2 配置環(huán)境 （安裝時(shí)系統(tǒng)自動(dòng)配置環(huán)境變量）
- 進(jìn)入系統(tǒng)環(huán)境變量界面
- 選擇系統(tǒng)變量 path 點(diǎn)擊新建
- 查看是否有node.js 的安裝路徑
3 查看版本
- 查看 node 版本命令：node -v
- 查看 npm 版本命令 npm - v
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-rQXAfplr-1668560306557)(C:\Users\yichengyu\AppData\Roaming\Typora\typora-user-images\image-20221115171122390.png)]](http://img.jbzj.com/file_images/article/202312/2023121511473876.png)
4 安裝淘寶鏡像，有利于加快下載速度
npm install -g cnpm --registry=https://registry.npm.taobao.org
檢測(cè) cnpm -v
5 下載vue-cli (vue腳手架)，用于搭建vue
使用 npm 下載： -g 表示全局安裝 npm install -g @vue/cli 使用 cnpm 下載 速度會(huì)更快一點(diǎn) cnpm install -g @vue/cli
檢查版本 vue --version 或者 vue -V
現(xiàn)在即可創(chuàng)建vue項(xiàng)目了
1 第一種方式 使用命令行界面
1.進(jìn)入你需要保存vue文件的文件夾，在目錄輸入 cmd ，或者直接打開(kāi)命令行界面 cd 到保存vue文件的文件夾。
輸入 vue create vue項(xiàng)目名 比如：
vue create test
2.選擇創(chuàng)建項(xiàng)目模板 這里我們選擇自定義 按 上下方向鍵 切換版本，選中第三個(gè)選項(xiàng) 回車
3.這里是選擇項(xiàng)目初始化需要的模塊 這里可以根據(jù)需要選擇，我們一般需要
Eable Router Vuex
按 空格鍵 選擇 選擇好后回車即可
4.選擇初始化 vue版本 我們選 3.x 回車
路由器使用歷史模式?(需要適當(dāng)?shù)姆?wù)器設(shè)置以便在生產(chǎn)中實(shí)現(xiàn)索引回退)(Y/n) 輸入 n 回車
你喜歡把配置Babel, ESLint等放在哪里? 選 in package.json 回車
最后一個(gè)也選 輸入 n 回車 后項(xiàng)目開(kāi)始初始化
5.初始化完畢后 開(kāi)啟項(xiàng)目 分別復(fù)制彈出的代碼 運(yùn)行項(xiàng)目
6. 打開(kāi)網(wǎng)址 查看自己的vue項(xiàng)目
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-N3R9nebJ-1668560245577)(C:\Users\yichengyu\AppData\Roaming\Typora\typora-user-images\image-20221115175506343.png)]](http://img.jbzj.com/file_images/article/202312/2023121511473986.png)
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-KITt9nsQ-1668560245577)(C:\Users\yichengyu\AppData\Roaming\Typora\typora-user-images\image-20221115175539100.png)]](http://img.jbzj.com/file_images/article/202312/2023121511473987.png)
2 網(wǎng)頁(yè)方式創(chuàng)建 vue項(xiàng)目
在 命令行界面 輸入 vue ui
機(jī)會(huì)打開(kāi)網(wǎng)頁(yè) 具體操作與以差不多，可以自行嘗試
一些用用的指令：
重新更新模塊 npm install 查看當(dāng)前目錄下安裝的node包 npm list 引入 cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 運(yùn)行項(xiàng)目 npm run serve 打包項(xiàng)目 npm run build 安裝 vue 3 腳手架 vue-cli npm install -g @vue/cli 安裝 vue 2 j腳手架 npm install -g vue-cli 卸載 vue-cli npm uninstall -g vue-cli 引入 axios npm install axios --save 引入 qs npm install qs--save 引入 jquery npm install jquery --save; 引入 bootstrap npm install bootstrap --save 查找 vue路徑 where vue
總結(jié)
到此這篇關(guān)于Vue3環(huán)境安裝以及項(xiàng)目搭建的文章就介紹到這了,更多相關(guān)Vue3環(huán)境安裝項(xiàng)目搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了解決vue頁(yè)面渲染但dom沒(méi)渲染的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
vue路由傳參的使用場(chǎng)景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時(shí),攜帶參數(shù)跳轉(zhuǎn),下面這篇文章主要給大家介紹了關(guān)于vue路由傳參方式的方式總結(jié)及獲取參數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue使用echarts實(shí)現(xiàn)三維圖表繪制
這篇文章主要為大家詳細(xì)介紹了vue如何在項(xiàng)目中使用echarts實(shí)現(xiàn)三維圖表的繪制,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2023-08-08
前端開(kāi)發(fā)的時(shí)候,在項(xiàng)目中引入組件以及使用是非常常見(jiàn)操作,下面這篇文章主要給大家介紹了關(guān)于Vue全局提示組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
Vue創(chuàng)建項(xiàng)目后沒(méi)有webpack.config.js(vue.config.js)文件的解決
這篇文章主要介紹了Vue創(chuàng)建項(xiàng)目后沒(méi)有webpack.config.js(vue.config.js)文件的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue項(xiàng)目中vue.config.js常用配置項(xiàng)詳解
在 Vue CLI 創(chuàng)建的項(xiàng)目中,vue.config.js 是核心配置文件,用于定制化構(gòu)建、開(kāi)發(fā)和部署流程,本文詳細(xì)解析了該文件的常用配置項(xiàng),并結(jié)合代碼示例和表格說(shuō)明,幫助開(kāi)發(fā)者高效管理項(xiàng)目配置,提升開(kāi)發(fā)體驗(yàn),需要的朋友可以參考下2025-04-04
vuejs數(shù)據(jù)超出單行顯示更多，點(diǎn)擊展開(kāi)剩余數(shù)據(jù)實(shí)例
這篇文章主要介紹了vuejs數(shù)據(jù)超出單行顯示更多，點(diǎn)擊展開(kāi)剩余數(shù)據(jù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue3?pinia管理數(shù)據(jù)的3種方式代碼
在Vue3中Pinia是一個(gè)狀態(tài)管理庫(kù),它提供了一種簡(jiǎn)單而強(qiáng)大的方式來(lái)管理應(yīng)用程序的狀態(tài),這篇文章主要給大家介紹了關(guān)于Vue3?pinia管理數(shù)據(jù)的3種方式,需要的朋友可以參考下2024-04-04
解決Vue中的生命周期beforeDestory不觸發(fā)的問(wèn)題
這篇文章主要介紹了解決Vue中的生命周期beforeDestory不觸發(fā)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue3中的Refs全解析(附實(shí)戰(zhàn)案例)
Vue3的Refs是一種新的API,用于訪問(wèn)DOM元素或組件實(shí)例,這篇文章主要介紹了Vue3中Refs的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06