Vue-cli腳手架

關於如何去安裝vue-cli去訪問我的領一則部落格，會有詳細教程，這裡我們就直接從建立vue-cli專案開始

一、建立vue-cli專案

開啟終端，切換到自己要建立的檔案路徑，輸入vue init webpack 專案名，回車之後會下載資原始檔

Project name 專案名稱 只要專案名沒有大寫 就直接回車預設專案名稱

Project description 對專案進行描述 自己隨意描述

Author 作者 直接回車

Vue bulid 安裝檔案 選擇第一個就好（會載入很多需要的內容）

Install vue-router? 是否要安裝路由 選N(目前暫時不需要)

User ESLint to lint your code? 是否安裝測試 選N(裝了之後會非常的嚴謹)

Setup unit tests with Karma + Mocha? 選N

Setup e2e tests with Nightwatch? 選N

之後會提示你切換到自己的專案資料夾中，然後輸入指令

npm install 安裝專案資原始檔

npm run dev 執行

通過編輯器匯入專案，我們就得到了當前的專案，專案中有很多資料夾及專案資原始檔

build 構建了我們的客戶端及服務端，可以改變埠號

config 對應的一些配置檔案

src 原始碼檔案

static 可以放置靜態檔案

.gitignore 忽略的檔案

Index.html 入口檔案主頁面

Package.json 告訴我們現在所需要的一些東西

README.md 告訴我們一些對應的指令

讓自己的專案執行起來，終端中輸入npm run dev ,開啟一個8080埠，通過埠可以在瀏覽上展示我們專案的內容

二、深入學習vue-cli，建立一個空白模板

我們當前vue-cli的一個重要的檔案src,基本上我們所用到的東西都在裡面

assets 資料夾可以存放我們的圖片資源

components 存放的是我們對應的元件

app.vue 是專案的根元件

main.js 很重要，根index.html直接關聯

el -- vue要控制的容器，容器元素是什麼

template -- 模板 元件呼叫的標籤<App/>,可以自己修改，只要有一個根標籤就好了

components -- 元件 你要想讓自己的模板呼叫元件，你需要在components裡面去註冊

基本的過程： index.html --> main.js --> App.vue元件中

（index.html入口檔案會先執行main.js檔案，

Main.js會例項化我們的vue物件，接著會執行App.vue元件）

每個元件都會擁有的三個結構：模板、行為、樣式

注意一點template模板中有且只有一個根標籤

我們可以把元件理解為一個功能的頁面，可以是一個小功能，也可以是一個大功能，在開發中會實現多個元件去完成專案

要想要兩個元件之間實現關聯，必須要import … ,之後還需要components中註冊一下，就可以呼叫了

之後我們刪除掉一些沒有用的，留下一個乾淨的模板

三、Vue-cli的進階小知識

1、建立自己的第一個vue-cli專案介面

如果重新整理不了，記得來到終端 按回車重新整理專案，就可以訪問了

2、實現元件的巢狀

建立一個Users.vue的元件

將Users這個子元件巢狀到父元件（App.vue）中

方法一：全域性註冊元件，當有人呼叫users這個標籤的時候，就會執行Users.vue這個元件

在App.vue元件中應用我們註冊的全域性標籤users就可以了

方法二：區域性註冊元件--單獨在App.vue中使用

注意一點，取的標籤名不要跟系統的重複

3、Vue元件css域

當我們給App.vue元件新增樣式h1的顏色為紅色的時候，會發現元件中所有巢狀的元件h1標籤的全部應用樣式了，所以我們要將樣式設定為佈局樣式 scoped定義區域性樣式

四、實現Vue-cli專案，利用多個元件巢狀實現頁面

Header元件部分

Footer元件部分

Users元件部分

App.vue元件部分

最終成果介面