一、安裝node.js 

1、下載node.js

 下載地址：下載 | Node.js (nodejs.org) 或者點(diǎn)擊這里下載

 2、安裝

3、檢查是否安裝成功

 打開(kāi)cmd窗口檢查是否安裝成功：node -v（如果顯示出了版本號(hào)，那么說(shuō)明安裝成功了）

二、搭建vue環(huán)境

1、全局安裝@vue/cli模塊包

vue官網(wǎng)：https://cn.vuejs.org/

2、執(zhí)行命令

切換阿里云鏡像

npm config set registry https://registry.npm.taobao.org

安裝@vue/cli -g

npm install -g @vue/cli

3、檢查是否安裝成功

vue -V

三、創(chuàng)建vue項(xiàng)目

1、創(chuàng)建項(xiàng)目

選擇一個(gè)你想要?jiǎng)?chuàng)建項(xiàng)目的文件夾，打開(kāi)控制端執(zhí)行如下命令

vue create 項(xiàng)目名

注意：項(xiàng)目名不能有大寫字母，中文和特殊符號(hào)

 2、選擇模板和包管理器，等待項(xiàng)目創(chuàng)建完畢

（藍(lán)色字體表示當(dāng)前選中的，按鍵盤上下鍵即可選擇）

選擇模板后，等待項(xiàng)目創(chuàng)建完畢即可

四、啟動(dòng)vue項(xiàng)目

1、執(zhí)行命令

創(chuàng)建完項(xiàng)目后，控制端頁(yè)面會(huì)如上圖所示，此時(shí)我們我們只要按上圖提示內(nèi)容，執(zhí)行相關(guān)命令即可。

cd 項(xiàng)目名 // 進(jìn)入到該項(xiàng)目的文件目錄下

npm run serve  // 啟動(dòng)內(nèi)置的webback本地?zé)岣麻_(kāi)發(fā)服務(wù)器

2、瀏覽項(xiàng)目頁(yè)面

執(zhí)行上面的啟動(dòng)項(xiàng)目命令后，控制端頁(yè)面會(huì)如下所示：

 如果未自動(dòng)彈出瀏覽器，手動(dòng)復(fù)制輸入提示的域名+端口。在瀏覽器中訪問(wèn)即可

五、vue項(xiàng)目目錄文件含義和作用

六、修改端口號(hào)

項(xiàng)目中沒(méi)有webpack.config.js文件，因?yàn)関ue腳手架項(xiàng)目用的vue.config.js。

在src并列目錄中新建vue.config.js，填入如下配置，最后重啟服務(wù)器即可修改端口號(hào)

module.exports = {
    devServer: { // 自定義服務(wù)配置
    port: 3000, // 修改的端口號(hào)
    open: true
}

七、清理歡迎界面

對(duì)于我們自己開(kāi)發(fā)，創(chuàng)建新的vue項(xiàng)目目錄下有很多文件是不需要的，可以直接清理掉

assests和components文件夾下的一切都刪除掉（不要默認(rèn)的歡迎頁(yè)面）。

src/App.vue默認(rèn)有很多內(nèi)容，可以全部刪除留下template和script和style的框

補(bǔ)充：解決App.vue 代碼是黑白色的方法

下載一個(gè)vetur插件就可以了

安裝vetur后代碼就可以顯示為彩色的了，同時(shí)還可以使用多種快捷鍵命令，比如在.vue文件中，直接輸入命令vue，就可以直接打出template和script和style的框。

總結(jié)

到此這篇關(guān)于如何創(chuàng)建一個(gè)VUE項(xiàng)目的文章就介紹到這了,更多相關(guān)VUE項(xiàng)目創(chuàng)建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論