Vue-cli 腳手架搭建

一般我們平常做小練習的時候，可以引入vue.js使用vue，但是一般做專案的時候，我們大都會用到vue腳手架，腳手架也是vue裡重要的一部分，今天我們就來看看vue腳手架的相關：

1.環境搭建

1、安裝node.js（傻瓜式安裝，這裡不再描述）
2、安裝webpack 開啟命令列工具輸入npm install webpack -g,安裝成功後輸入webpack -v,會出現對應版本號，則表示安裝成功：

4、安裝vue-cli腳手架構建工具，在命令列輸入：npm installl vue-cli -g,安裝完成後輸入vue -V（vue檢視版本號用的是大寫的V！！！），出現對應的版本號，則安裝成功：

2. 用vue-cli構建專案

1、首先新建一個存放專案工程的資料夾，並在該目錄下開啟命令列。
2、vue init webpack myvuecli輸入安裝vue腳手架，注意這裡的“myvuecli”是專案的名字，可以說是隨便的起名，但是不能用中文！！！
下來會出現一些命令讓你選擇Y/N，下面大概列出來幾個：

$ vue init webpack myvuecli --------------------- 這個是那個安裝vue腳手架的命令
This will install Vue 2.x version of the template. ---------------------這裡說明將要建立一個vue 2.x版本的專案
For Vue 1.x use: vue init webpack#1.0 myvuecli
? Project name (myvuecli) ---------------------專案名稱
? Project description (A Vue.js project) ---------------------專案描述
? Author Datura --------------------- 專案建立者
? Install vue-router? (Y/n) --------------------- 是否安裝Vue路由，根據需要安裝
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否啟用eslint檢測規則，這裡個人建議選no，如果選擇則會對語法要求特別嚴格，
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "exprice".
To get started: --------------------- 這裡說明如何啟動這個服務
cd exprice
npm run dev

3、我們根據提示，進入建立的工程目錄，cd myvuecli，
4、安裝好以後，我們開啟專案資料夾，就會出現如下：

5、啟動專案npm run dev

服務啟動成功後開啟提示的地址會出現一個“歡迎頁面”，如下圖：

這裡提示一下：在專案進行時，命令列視窗不要關閉，視窗關閉後專案就不能在網頁顯示，還有，每次啟動專案只需要輸入npm run dev