Vue Cli

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各類構建工具可以基於智能的默認配置便可平穩銜接，這樣你能夠專一在撰寫應用上，而沒必要花好幾天去糾結配置的問題。與此同時，它也爲每一個工具提供了調整配置的靈活性。

概念

通俗的說，Vue CLI是咱們建立大型項目時的腳手架，所謂腳手架，就是幫助咱們建設好了建造大廈的所需模板，建設者只需往模板裏面填入實質內容，便可完成大廈的建設，對於程序開發來講，腳手架使程序員只須要關注業務邏輯的實現上面，咱們不須要再關注兼容性問題，不須要再浪費時間在重複的工做上。

Vue Cli幫助咱們快速構建大型web應用，提高了咱們的開發效率，它基於webpack構建，並帶有合理的默認配置。

安裝

咱們使用npm安裝Vue Cli，Vue Cli 2和Vue Cli 3的安裝方式略有不一樣，由於Vue Cli 3將包名稱由vue-cli改爲了@vue/cli，下面咱們分別使用全局和本地的方式安裝Vue Cli2和版本3：

一、全局安裝

`// 版本2npm install -g vue-cli// 版本3npm install -g @vue/cli`

二、本地安裝

// 版本2
npm install vue-cli --save
// 版本3
npm install @vue/cli --save

構建咱們的項目

安裝好Vue Cli以後，下面咱們來搭建一個項目。本文測試採用的是全局安裝的Vue Cli 2版本。

進入項目環境，建立初始化項目:

• vue基於webpack構建項目
• mydemo是咱們的項目名稱

建立過程當中，會出現提示是否須要安裝VueRouter和單元測試等功能，根據你的項目實際須要輸入Y/N便可。

構建完成以後，在項目根目錄下會生成一個mydemo目錄，而後根據提示，進入mydemo項目，咱們的項目結構以下：

運行npm run dev, 出現以下提示後，在瀏覽器中訪問http://localhost:8080。

npm run dev

> mydemo@1.0.0 dev /Users/pizza/Downloads/vue-demo/mydemo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting                                                                        

 DONE  Compiled successfully in 2403ms                                                                                              

 Your application is running here: http://localhost:8080

瀏覽器中會出現Vue的歡迎頁面，以下圖所示：

至此，咱們的Vue項目構建完成了。下面解釋一下項目根目錄下的各目錄和文件的功能。

目錄結構說明

一、build目錄

build目錄中的文件主要是用來進行webpack配置。

其中最重要的就是webpack.base.conf.js, webpack.dev.conf.js, webpack.prod.conf.js三個文件，分別是基本webpack配置、開發環境webpack配置、生產環境webpack配置。

npm run build命令是用來構建生產環境的，而build.js文件就是該命令的入口配置文件，主要用於生產環境。

二、config目錄

config目錄中的文件是用來配置項目測試和運行環境的。

在index.js文件中有一個proxyTable屬性，該屬性的屬性值若是加上對應的後臺地址和端口，就能夠和後臺進行聯調。

三、static目錄

static目錄用來存儲項目的靜態文件。它是真正的靜態資源，徹底不被webpack處理。

四、src目錄

src目錄存放的是咱們項目的源文件，它是整個項目使用頻率最高的文件夾。

assets目錄存放的是公共的資源，會被webpack當成模塊資源處理；

components目錄存放的是咱們整個項目的全部組件；

router目錄則存放的是咱們整個項目的路由文件；

App.vue文件是全部vue文件的入口；

main.js對應App.vue 建立vue實例，也是入口文件，對應webpack.base.config.js裏的入口配置文件。

五、遷移咱們的項目

接下來，咱們將前面寫的路飛學城項目遷移到Vue Cli的結構中。

一、初始化一個luffycity項目

vue init webpack luffycity

初始化完成以後，在當前目錄下面會出現一個luffycity的目錄，目錄結構與上述項目是一致的。咱們即將項目填充進這個腳手架中。

二、準備內容

並將圖片存入static目錄下, 以下圖：

三、配置路由

以下圖：

四、使用組件

以下圖：

五、配置Vue實例

建立Vue實例，配置路由組件，同時安裝element-ui並導入，以下圖：

最後使用命令npm run dev運行項目。至此咱們已經將以前的項目完整的遷移到Vue Cli中。