使用Vue-CLI創建Vue項目

在看本文之前,請確保電腦上已經裝了node,關於node的安裝和使用可參考node的安裝與使用專欄

1 . 利用Vue-CLI初始化構建Vue項目時,我們將會獲得一個初始的文件夾結構,如下所示:
在這裏插入圖片描述
2 . 安裝Vue-CLI

npm install -g @vue/cli
或
yarn global add @vue/cli

例:
在這裏插入圖片描述
3 . 使用vue --versionvue -V指令,查看是否安裝成功

例:
在這裏插入圖片描述
4 . 創建項目

vue create [project](項目名稱)

例:使用vue create [project](項目名稱)命令時(選擇手動配置,鍵盤上下鍵即可切換,如果喜歡使用eslint可以選擇default默認)
在這裏插入圖片描述

5 .安裝CLI插件以及一些依賴項。 這可能需要一段時間…

如果是第一次安裝,過程中可能會出現如下頁面,可選擇Linter/Formatter,下一步選擇默認,在需要輸入(Y/N)的地方,選擇Y,回車即可
在這裏插入圖片描述
6 .創建完成
在這裏插入圖片描述
7 .根據提示輸入cd [ project ](項目名稱)

例:
在這裏插入圖片描述
8 .根據提示輸入運行命令npm run serve
在這裏插入圖片描述

9 .啓動完成,在瀏覽器網址欄輸入http://localhost:8080,此時就能看到我們初始化的Vue的項目了
在這裏插入圖片描述

10 .我們可以通過命令vue ui,使用vue的GUI界面來管理自己的項目

例:使用vue ui 命令時
在這裏插入圖片描述
此時,會自動彈出如下界面(我們可根據提示導入自己的項目即可使用)
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章