Vue Cook 是一個幫助開發者快速創建Vue組件的生成器,可以幫助你生成標準的Vue組件模板。
首先,在全局安裝 Vue Cook
npm install -g vue-cook
之后,在終端運行以下命令創建新組件:
vue-cook component component-name
其中,component-name 是你想創建的組件名稱,這個命令將會在當前目錄下創建一個命名為 component-name 的文件夾,并且包含以下文件:
- index.vue
- style.scss
現在我們來看一下生成的組件文件:
-- component-name/ | |-- index.vue | |-- style.scss
我們可以使用以下命令創建完整的頁面:
vue-cook page page-name
其中,page-name 是你想創建的頁面名稱,這個命令將會在當前目錄下創建一個命名為 page-name 的文件夾,并且包含以下文件:
- index.vue
- style.scss
- router.js
現在我們來看一下生成的頁面文件:
-- page-name/ | |-- index.vue | |-- style.scss | |-- router.js
在創建完組件或者頁面之后,你可以在 .vue 文件中開始編寫你的組件或者頁面代碼。
最后,使用以下命令來啟動開發服務器:
npm run serve
這會在 http://localhost:8080/ 運行一個開發服務器。你可以通過訪問此URL來預覽你的組件或頁面。
此外,你還可以使用以下命令來創建一個 Vuex store:
vue-cook store store-name
其中,store-name 是你想創建的 store 名稱,這個命令將會在 store 目錄下創建一個命名為 store-name.js 的文件。
-- src/ |-- store/ | |-- store-name.js | |-- index.js
在 store-name.js 文件中,你可以編寫你的 Vuex store 代碼。
以上就是 Vue Cook 的使用方法,希望這篇文章對你有所幫助。