手把手教你搭建一個(gè)vue項(xiàng)目的完整步驟
一、環(huán)境準(zhǔn)備
1、安裝node.js
下載地址:https://nodejs.org/zh-cn/
界面展示

2、檢查node.js版本
查看版本的兩種方式
- 1|node -v
- 2|node -version
出現(xiàn)版本號(hào)則說(shuō)明安裝成功(最新的以官網(wǎng)為準(zhǔn))

3、為了提高我們的效率,可以使用淘寶的鏡像源
- 輸入:npm install -g cnpm --registry=https://registry.npm.taobao.org 即可安裝npm鏡像源
- 以后再用到npm的地方直接用cnpm來(lái)代替就好了,因?yàn)闆](méi)有鏡像源的話,安裝速度比較慢

檢查是否安裝成功:cnpm -v

二、搭建vue環(huán)境
1、全局安裝vue-cli
這里注意:安裝vue-cli對(duì)node.js的版本是有要求的

裝的兩種方式:輸入cmd命令
- 1|npm install -g @vue/cli //這個(gè)是從國(guó)外下載的比較慢
- 2|cnpm install -g @vue/cli //這個(gè)是從鏡像源下載

查看安裝的版本(顯示版本號(hào)說(shuō)明安裝成功)
- 1|vue --version

如果你原來(lái)有版本或者版本比較低,可以升級(jí)
- 1|npm update -g @vue/cli
- 2|yarn global upgrade --latest @vue/cli
三、創(chuàng)建vue項(xiàng)目
1、用cmd命令創(chuàng)建項(xiàng)目
1.1創(chuàng)建文件
以管理員身份打開命令行界面,進(jìn)入任意一個(gè)想要?jiǎng)?chuàng)建項(xiàng)目的文件夾
輸入:vue create vue01

1.2選擇配置信息
通過(guò)上下方向鍵選擇對(duì)應(yīng)配置,然后回車

按空格鍵選擇要安裝的配置資源,帶 * 號(hào)說(shuō)明被選上了

1.3選擇版本
上下方向鍵選擇版本,這里我們選擇vue2,然后回車

1.4路徑模式選擇
這里可以不用管,直接輸入 no/n

1.5語(yǔ)法代碼格式檢查
代碼檢查,選標(biāo)準(zhǔn)的就行,方向鍵切換,空格鍵選擇然后回車

代碼檢查時(shí)間,方向鍵切換,空格鍵選擇然后回車

1.6第三方文件存在的方式
1.獨(dú)立的文件 2.綜合的

1.7是否保存本次配置信息(保存預(yù)設(shè))
這里如果選擇保存的話,就要輸入名字,默認(rèn)就是文件夾的名字,下次配置的時(shí)候就會(huì)顯示這個(gè)文件配置的選項(xiàng)就像上面的一樣,在配置的時(shí)候會(huì)多出來(lái)一個(gè)

1.8創(chuàng)建成功
Successfully created project vue01出現(xiàn)這個(gè)說(shuō)明創(chuàng)建成功

1.9運(yùn)行
cd到項(xiàng)目文件夾下面
cd vue01

輸入代碼運(yùn)行文件npm run serve

1.10啟動(dòng)
在瀏覽器輸入對(duì)應(yīng)的網(wǎng)址就可以看到界面啦
http://localhost:8080/

1.11停止服務(wù)
兩下Ctrl+C 或者Ctrl+C一下然后Y

2、用vue資源管理器創(chuàng)建
2.1進(jìn)入vue資源管理器界面(vue ui界面)
cmd命令,因?yàn)槭侨值?,所以在哪里打開都行,注意:運(yùn)行的時(shí)候不能關(guān)閉cmd窗口,不然就停止服務(wù)了,如果電腦太卡,可以直接在瀏覽器輸入:http://localhost:8000/vue ui


2.2創(chuàng)建文件
這里直接create 創(chuàng)建文件

2.3配置信息
和用cmd命令差不多,填完之后下一步

2.4配置預(yù)設(shè)
選擇預(yù)設(shè),或者自定義,然后下一步完成創(chuàng)建

2.5啟動(dòng)運(yùn)行項(xiàng)目
按步驟來(lái):任務(wù)>serve>運(yùn)行>啟動(dòng)


四、Vue-cli工程中每個(gè)文件夾和文件的用處
- dist 文件夾:默認(rèn) npm run build 命令打包生成的靜態(tài)資源文件,用于生產(chǎn)部署
- node_modules:存放npm命令下載的開發(fā)環(huán)境和生產(chǎn)環(huán)境的依賴包
- public:有的叫assets:存放項(xiàng)目中需要用到的資源文件,css、js、images以及index
- src文件夾:存放項(xiàng)目源碼及需要引用的資源文件
- src-api文件夾:放ajax相關(guān)操作的代碼文件:index.js(相關(guān)的接口),ajax.js(封裝的axios,攔截器)。有的叫service:自己配置的vue請(qǐng)求后臺(tái)接口方法
- src-common文件夾:stylus的混合文件.styl,不要寫到public也可以
- src-components文件夾:存放vue開發(fā)中抽離的一些公共組件
- src-mock文件夾:mock數(shù)據(jù)存放文件及mock模擬接口(沒(méi)有后臺(tái)接口或接口不完整情況下可以模擬后臺(tái)接口)
- src-pages文件夾:涉及到路由的組件
- src-router文件夾:vue-router,路由器及路由的配置
- src-store文件夾:存放 vue中的狀態(tài)數(shù)據(jù),用vuex集中管理
- App.vue文件:使用標(biāo)簽渲染整個(gè)工程的.vue組件
- main.js文件:vue-cli工程的入口文件
- package.json文件:用于 node_modules資源部 和 啟動(dòng)、打包項(xiàng)目的 npm 命令管理
- build 文件夾:用于存放 webpack 相關(guān)配置和腳本。開發(fā)中僅 偶爾使用 到此文件夾下 webpack.base.conf.js 用于配置 less、sass等css預(yù)編譯庫(kù),或者配置一下 UI 庫(kù)
- config 文件夾:主要存放配置文件,用于區(qū)分開發(fā)環(huán)境、線上環(huán)境的不同,常用到此文件夾下 config.js 配置開發(fā)環(huán)境的 端口號(hào)、是否開啟熱加載 或者 設(shè)置生產(chǎn)環(huán)境的靜態(tài)資源相對(duì)路徑、是否開啟gzip壓縮、npm run build 命令打包生成靜態(tài)資源的名稱和路徑等

總結(jié)
到此這篇關(guān)于手把手教你搭建一個(gè)vue項(xiàng)目的完整步驟的文章就介紹到這了,更多相關(guān)搭建vue項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3如何解決Element-plus不生效的問(wèn)題
這篇文章主要介紹了Vue3如何解決Element-plus不生效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決
這篇文章主要介紹了vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
VUE開發(fā)分布式醫(yī)療掛號(hào)系統(tǒng)后臺(tái)管理頁(yè)面步驟
本文從整體上介紹Vue框架的開發(fā)流程,結(jié)合具體的案例,使用Vue框架調(diào)用具體的后端接口,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-04-04
完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問(wèn)題
這篇文章主要介紹了完美解決element-ui的el-input設(shè)置number類型后的相關(guān)問(wèn)題,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-10-10
vue+Element-ui的el-table的多級(jí)內(nèi)容渲染問(wèn)題
這篇文章主要介紹了vue+Element-ui的el-table的多級(jí)內(nèi)容渲染問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue.js+express利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳
斷點(diǎn)續(xù)傳就是要從文件已經(jīng)下載的地方開始繼續(xù)下載,本文主要介紹了Vue.js+express利用切片實(shí)現(xiàn)大文件斷點(diǎn)續(xù)傳,具有一定的參考價(jià)值,感興趣的可以了解下2023-05-05
在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法
這篇文章主要給大家介紹了在Vue組件化中利用axios處理ajax請(qǐng)求的使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面跟著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-08-08

