菜菜菜的 Vue 30天 - Day21

好的在今天之前所寫的章節使用 Vue 的方式是引入 CDN 來做使用，但是這樣開發實在還是沒有這麼方便。

而有一個工具 Vue-cli 他整合了 webpack、babel...等工具，並使用 npm 做套件管理，讓開發者能夠更專注的在開發上。

後面就來介紹如何使用～

使用版本： 2.9.1 (因為還沒碰 3.0 哈哈)

vue-cli 安裝

安裝的方式有很多，這邊就介紹使用 npm 的方式執行安裝：

npm install -g vue-cli

建立專案

安裝後我們就可以來創建 Vue 專案了，那創建專案的方式如下：

vue init <template-name> <project-name>

//template-name: 創建的專案類型
//project-name： 專案的名稱

專案類型的部分能夠使用以下指令來查看：

vue list

那一般我們都是使用 webpack 版的來執行開發，若要開發 pwa 也能夠選擇 pwa 喲～

開始建立專案後會有幾個選項要選

1. project name //專案名稱
2. project description //專案描述
3. author //擁有者
4. vue build //compiler 的選擇
5. Install vue-router? //是否安裝 vue-router
6. Use ESLint to lint your code? //是否使用 ESLint
7. Set up unit tests //是否使用 unit test
8. Setup e2e tests with Nightwatch? //是否使用 e2e test
9. Should we run npm install for you after the project has been created? 可以選擇使用 npm or yarn 進行套件管理

專案架構

完成安裝之後就能夠到專案的目錄執行指令開啟本地伺服器

cd test             //切到專案目錄
npm install         //安裝 npm 套件，初始專案必須執行 npm install 安裝相依套件
npm run dev         //開啟本地伺服器

執行後就能夠在本地端的 8080 port 開啟本地的網頁