Vue3環(huán)境安裝以及項目搭建全過程
搭建Vue 環(huán)境
1 下載 node.js
node.js 中文網(wǎng) https://nodejs.org/en 下載合適的安裝包 或者可以點(diǎn)擊這里進(jìn)行下載
2 配置環(huán)境 （安裝時系統(tǒ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ī)制,建議將圖片保存下來直接上傳(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
檢測 cnpm -v
5 下載vue-cli (vue腳手架)，用于搭建vue
使用 npm 下載： -g 表示全局安裝 npm install -g @vue/cli 使用 cnpm 下載 速度會更快一點(diǎn) cnpm install -g @vue/cli
檢查版本 vue --version 或者 vue -V
現(xiàn)在即可創(chuàng)建vue項目了
1 第一種方式 使用命令行界面
1.進(jìn)入你需要保存vue文件的文件夾，在目錄輸入 cmd ，或者直接打開命令行界面 cd 到保存vue文件的文件夾。
輸入 vue create vue項目名 比如：
vue create test
2.選擇創(chuàng)建項目模板 這里我們選擇自定義 按 上下方向鍵 切換版本，選中第三個選項 回車
3.這里是選擇項目初始化需要的模塊 這里可以根據(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 回車
最后一個也選 輸入 n 回車 后項目開始初始化
5.初始化完畢后 開啟項目 分別復(fù)制彈出的代碼 運(yùn)行項目
6. 打開網(wǎng)址 查看自己的vue項目
![[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(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ī)制,建議將圖片保存下來直接上傳(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)頁方式創(chuàng)建 vue項目
在 命令行界面 輸入 vue ui
機(jī)會打開網(wǎng)頁 具體操作與以差不多，可以自行嘗試
一些用用的指令：
重新更新模塊 npm install 查看當(dāng)前目錄下安裝的node包 npm list 引入 cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 運(yùn)行項目 npm run serve 打包項目 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)境安裝以及項目搭建的文章就介紹到這了,更多相關(guān)Vue3環(huán)境安裝項目搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在我們寫vue項目中肯定會用到各種圖片,那么如何更好的使用圖片資源呢?下面這篇文章主要給大家介紹了關(guān)于vue中引入圖片的方法,需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關(guān)于vue3?Props的用法(父傳子)的相關(guān)資料,在Vue3中Props用于組件間數(shù)據(jù)傳遞,允許類型檢查和默認(rèn)值設(shè)置,文中將用法介紹的非常詳細(xì),需要的朋友可以參考下2024-10-10
vue + echarts實(shí)現(xiàn)中國省份地圖點(diǎn)擊聯(lián)動
這篇文章主要介紹了vue + echarts實(shí)現(xiàn)中國地圖省份點(diǎn)擊聯(lián)動,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了vue實(shí)現(xiàn)微信獲取用戶信息的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
vue自定義插件封裝，實(shí)現(xiàn)簡易的elementUi的Message和MessageBox的示例
這篇文章主要介紹了vue自定義插件封裝，實(shí)現(xiàn)簡易的elementUi的Message和MessageBox的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11
Rsbuild,一個基于Rspack的高效Web構(gòu)建工具,將Rspack的強(qiáng)大功能與易用性相結(jié)合,是你項目搭建的不二之選,Rsbuild不僅提供了開箱即用的體驗(yàn),還引入了高性能的構(gòu)建機(jī)制,本文給大家介紹了Vue2遷移Rsbuild詳細(xì)步驟,需要的朋友可以參考下2024-10-10
本文主要介紹了vue中傳參params和data的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue中props的詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue中如何實(shí)現(xiàn)后臺管理系統(tǒng)的權(quán)限控制的方法示例
這篇文章主要介紹了vue中如何實(shí)現(xiàn)后臺管理系統(tǒng)的權(quán)限控制的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
解決ele ui 表格表頭太長問題的實(shí)現(xiàn)
這篇文章主要介紹了解決ele ui 表格表頭太長問題的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11