目錄
一、安裝node.js?
二、搭建vue環(huán)境
1、全局安裝@vue/cli模塊包
2、執(zhí)行命令
3、檢查是否安裝成功
三、創(chuàng)建vue項目
1、創(chuàng)建項目
?2、選擇模板和包管理器，等待項目創(chuàng)建完畢
四、啟動vue項目
1、執(zhí)行命令
2、瀏覽項目頁面
五、vue項目目錄文件含義和作用
六、修改端口號
七、清理歡迎界面
補充：解決App.vue 代碼是黑白色的方法
一、安裝node.js?
1、下載node.js
?下載地址：下載 | Node.js (nodejs.org)
?2、安裝
?
?
?
?
?
?3、檢查是否安裝成功
?打開cmd窗口檢查是否安裝成功：node -v（如果顯示出了版本號，那么說明安裝成功了）
二、搭建vue環(huán)境
1、全局安裝@vue/cli模塊包
vue官網：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)建完項目后，控制端頁面會如上圖所示，此時我們我們只要按上圖提示內容，執(zhí)行相關命令即可。
cd 項目名 // 進入到該項目的文件目錄下
npm run serve??// 啟動內置的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默認有很多內容，可以全部刪除留下template和script和style的框
補充：解決App.vue 代碼是黑白色的方法
下載一個vetur插件就可以了
?????????安裝vetur后代碼就可以顯示為彩色的了，同時還可以使用多種快捷鍵命令，比如在.vue文件中，直接輸入命令vue，就可以直接打出template和script和style的框。文章來源：http://www.zghlxwxcb.cn/news/detail-824033.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-824033.html
到了這里，關于怎樣創(chuàng)建一個VUE項目（超簡單）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
