在看本文之前,請確保電腦上已經裝了node,關於node的安裝和使用可參考node的安裝與使用專欄
1 . 利用Vue-CLI初始化構建Vue項目時,我們將會獲得一個初始的文件夾結構,如下所示:
2 . 安裝Vue-CLI
npm install -g @vue/cli
或
yarn global add @vue/cli
例:
3 . 使用vue --version
或vue -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
命令時
此時,會自動彈出如下界面(我們可根據提示導入自己的項目即可使用)