一、安裝node.js 

1、下載node.js

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

 2、安裝

3、檢查是否安裝成功

 打開cmd窗口檢查是否安裝成功：node -v（如果顯示出了版本號，那么說明安裝成功了）

二、搭建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項目

1、創(chuàng)建項目

選擇一個你想要創(chuàng)建項目的文件夾，打開控制端執(zhí)行如下命令

vue create 項目名

注意：項目名不能有大寫字母，中文和特殊符號

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

（藍色字體表示當前選中的，按鍵盤上下鍵即可選擇）

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

四、啟動vue項目

1、執(zhí)行命令

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

cd 項目名 // 進入到該項目的文件目錄下

npm run serve  // 啟動內(nèi)置的webback本地熱更新開發(fā)服務器

2、瀏覽項目頁面

執(zhí)行上面的啟動項目命令后，控制端頁面會如下所示：

 如果未自動彈出瀏覽器，手動復制輸入提示的域名+端口。在瀏覽器中訪問即可

五、vue項目目錄文件含義和作用

六、修改端口號

項目中沒有webpack.config.js文件，因為vue腳手架項目用的vue.config.js。

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

module.exports = {
    devServer: { // 自定義服務配置
    port: 3000, // 修改的端口號
    open: true
}

七、清理歡迎界面

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

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

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

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

下載一個vetur插件就可以了

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

總結(jié)

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

最新評論