VUE學習之腳手架（vue-cli）

孟小歡發表於2019-01-21

Vue

簡單介紹下VUE

Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。—— 官方
Vue是MVVM結構的，即model-view-viewmodel：資料影響試圖，同樣檢視也可以影響資料

瞭解vue-cli

官方如是說：Vue 提供了一個官方的 CLI，為單頁面應用 (SPA) 快速搭建繁雜的腳手架。CLI 工具假定使用者對 Node.js 和相關構建工具有一定程度的瞭解。
注意：假如你是新手，我們強烈建議先在不用構建工具的情況下通讀指南，在熟悉 Vue 本身之後再使用 CLI。

現在就假設已經不是新手，來搭建腳手架吧！

安裝node.js

從node官網下載最新的node.js

這裡有兩個版本：LTS和Current，一般我們會選擇LTS版本

LTS：長期支援版，成熟可靠

Current：穩定版，最新特性

然後點選安裝node.js，安裝完成之後檢視安裝的版本號，在命令視窗輸入

$ node -v 複製程式碼

我們需要用到的npm（node package manager）是整合在node中的，檢視npm的版本資訊可以在命令視窗輸入

$ npm -v 複製程式碼

安裝淘寶映象

因為npm安裝外掛是從國外伺服器下載，受網路影響大，可能出現異常，所以淘寶團隊推出了淘寶映象cnpm代替官方版本

安裝cnpm：在命令視窗輸入

$ npm install -g cnpm --registry=https://registry.npm.taobao.org複製程式碼

然後等待安裝完成，檢視cnpm的版本資訊可以在命令視窗輸入

$ cnpm -v複製程式碼

成功安裝cnpm之後，只要是用npm命令的時候改為cnpm即可

安裝VUE

官方：在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模組打包器配合使用。同時 Vue 也提供配套工具來開發單檔案元件。

只要在命令視窗輸入安裝命令即可

$ cnpm install vue複製程式碼

檢視安裝版本資訊

$ vue -V或$ vue --version複製程式碼

安裝vue-cli

全域性安裝

$ cnpm install --global vue-cli複製程式碼

建立webpack專案

首先我們要選定好目錄，然後在命令列中把目錄轉到選定的目錄，初始化專案

# my-project為專案名稱，可以自定義$ vue init webpack my-project複製程式碼

初始化時會有一些選項，按照自己的專案選擇即可

Project name (my-project) #專案名稱

Project description (A Vue.js project) #專案描述一個Vue.js 專案

Author (zuozhe) #作者

Vue build

Vue build (standalone)

Install vue-router? (Y/n) #是否安裝Vue路由，也就是以後是spa（但頁面應用需要的模組）

Use ESLint to lint your code? (Y/n) #使用 ESLint 到你的程式碼？（Y [ yes ] / N [ no ]）

Pick an ESLint preset (Use arrow keys) #選擇一個預置ESLint（使用箭頭鍵）

Setup unit tests (Y/n) #設定單元測？（Y/ N）

Pick a test runner

Setup e2e tests with Nightwatch? (Y/n) #設定端到端測試，Nightwatch？（Y/ N）

Should we run “npm install” for you after the project has been created? #建立專案之後我們是否可以通過“npm install”來執行