Vue CLI是個用來快速建置Vue專案的工具。目前已經推出第三版。如果你現在才開始學習使用Vue CLI的話，可以把腦容量省下來，直些參考官網說明使用Vue CLI 3來建置專案就好。萬一你是在去年開始接觸到Vue CLI的話，可能當時碰到的是Vue CLI 2的版本，這時可能感受到版本過渡的差異。到底Vue CLI 3跟以前的版本有什麼差別呢？
有別於上一個版本，Vue CLI 3提供GUI介面，降低使用者門檻，在圖形介面下點一點按鈕就可以做到Vue CLI 2相同的事。如果不習慣command line介面的話，可以使用GUI介面操作。
Vue CLI 是以 WEBPACK搭配相關套件SASS、 ESLint 、BABEL 編譯成可運行的版本。可以用ES6寫.js .Vue。
Vue Cli 3提供插件方式安裝，例如Type Script、SASS、 ESLint 、BABEL ，再透過以 WEBPACK編譯成可運行的版本。
安裝Vue CLI 2
安裝之前先確認一下是否已經安裝過Vue。
可以使用下面指令確認：
npm的網站上有vue cli2的安裝說明
(
https://www.npmjs.com/package/vue-cli)
順道一提的是，在安裝vue cli之前，必須先安裝
Node.js。至於如何安裝Node.js在這裡就不贅述了。
$ npm install -g vue-cli
你有六種Template可以安裝Vue CLI
Current available templates include:
- webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
- webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
- browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
- browserify-simple - A simple Browserify + vueify setup for quick prototyping.
- pwa - PWA template for vue-cli based on the webpack template
- simple - The simplest possible Vue setup in a single HTML file
建立專案
$ vue init <template-name> <project-name>
前面是template的名稱，後面是專案的名稱，例如：
$ vue init webpack my-project
請注意，在哪個目錄下輸入上面的指令，專案就會被建立在該目錄下。在建立專案之前，請先確認專案想要放在哪個目錄下。
接著按照步驟，一步一步的選擇安裝。
最後，先到目錄下面執行
$ cd 專案目錄
$ npm install
$ npm run dev
專案目錄的資料夾如下：
安裝Vue CLI 3
安裝之前先確認一下是否已經安裝過Vue。
可以使用下面指令確認：
$ vue -V
注意：V要大寫。
如果安裝過舊的版本，必須先刪除，刪除的方式為：
$ npm uninstall vue-cli -g
//或是
$ yarn global remove vue-cli
Node.js 的版本有要求，必須在8.9或更高版本。
可以使用 npm 或是 yarn 來安裝Vue CLI
$npm install -g @vue/cli
安裝後，輸入vue -V再次確認 Vue CLI 是否正常安裝。
建立Vue的新專案
透過Vue CLI 3 建立Vue專案有兩種方式，一個是使用傳統的在command line輸入指令的方式建立Vue專案，另一個是透過GUI圖形介面的引導來建立Vue專案。
command line建立
如果用command line建立的話，請用 vue create指令建立專案。
$ vue create myproject
首先可以選擇最基本的 Babel + ESLint 預設選項，也可以選擇Manually select features來進行手動安裝，之後甚至於可以將自己常安裝的設定儲存起來方便日後選擇。
- Babel：可以把ES6編譯成大部分瀏覽器可以運行的javascript
- TypeScript：是由 Microsoft 開發的 Open Source 程式語言
- Progressive Web App(PWA) Support：PWA網站使用
- Router：Vue Router
- Vuex：Vuex儲存
- CSS Pre-processors：預處理器，包含SCSS/SASS、LESS、Stylus等等
- Linter / Formatter: 關於.js的ESLint格式規範，對Javascript熟練者可以選，初學者不建議使用。
- Unit Testing：關於單元測試用
- E2E Testing：關於測試用
透過GUI來創建
Vue CLI 3 新增了GUI圖形化介面來方便管理與建制專案。透過Vue ui建置新的Vue專案。
可以透過在command line輸入vue ui 指令來執行這個圖形化的管理介面。
$ vue ui
接下來的畫面都是圖形化的操作介面了，對於command line有恐懼感的初學著來說，真是個福音。
啟動Vue運作
運行Vue的指令是：
$ npm run serve
注意：已經不是npm run dev
打包Vue檔案
$ npm run build
打包完畢後，會多一個dist資料夾
安裝預處理器
在大型專案下，如果知道使用 CSS Pre-Processors（預處理器）來撰寫CSS的話，可以事半功倍。一般常見的CSS預處理器有Sass、Less、Stylus等。由於 Vue CLI 3 預設不安裝任何的預處理器，需要使用到預處理器，可以自行挑選來使用。
# Sass
$ npm install -D sass-loader node-sass
# Less
$ npm install -D less-loader less
# Stylus
$ npm install -D stylus-loader stylus
舊版的Vue CLI
當安裝完Vue CLI 3之後，如果還想要執行舊版的 Vue CLI的話，由於新版已經覆蓋了舊版的Vue CLI，必須另外安裝@vue/cli-init 來執行舊的版本。
$ npm install -g @vue/cli-init
留言
張貼留言