create by db on 2019-1-10 16:28:10
Recently revised in 2019-1-15 11:46:47
Hello 小夥伴們，如果覺得本文還不錯，麻煩點個贊或者給個 star，你們的贊和 star 是我前進的動力！GitHub 地址
查閱網上諸多資料，並結合自己的學習經驗，寫下這篇Vue學習筆記，以記錄自己的學習心得。現分享給大家，以供參考。
作為一隻前端菜鳥，這是我掘金分享的第五篇文章。如有不足，還請多多指教，謝謝大家。
前言
在上一篇專案搭建文章中，我們已經下載安裝了node環境以及vue-cli，並且已經成功構建了一個vue-cli專案——見Vue小白課（一）——CLI搭建專案（Vue2.x）。那麼接下來，我們來梳理一下vue-cli專案的結構。
參考文獻：
正文
Vue專案結構一覽
├── build --------------------------------- 專案構建(webpack)相關配置檔案，配置引數什麼的，一般不用動
│ ├── build.js --------------------------webpack打包配置檔案
│ ├── check-versions.js ------------------------------ 檢查npm,nodejs版本
│ ├── dev-client.js ---------------------------------- 設定環境
│ ├── dev-server.js ---------------------------------- 建立express伺服器，配置中介軟體，啟動可熱過載的伺服器，用於開發專案
│ ├── utils.js --------------------------------------- 配置資源路徑，配置css載入器
│ ├── vue-loader.conf.js ----------------------------- 配置css載入器等
│ ├── webpack.base.conf.js --------------------------- webpack基本配置
│ ├── webpack.dev.conf.js ---------------------------- 用於開發的webpack設定
│ ├── webpack.prod.conf.js --------------------------- 用於打包的webpack設定
├── config ---------------------------------- 配置目錄，包括埠號等。我們初學可以使用預設的。
│ ├── dev.env.js -------------------------- 開發環境變數
│ ├── index.js ---------------------------- 專案配置檔案
│ ├── prod.env.js ------------------------- 生產環境變數
│ ├── test.env.js ------------------------- 測試環境變數
├── node_modules ---------------------------- npm 載入的專案依賴模組
├── src ------------------------------------- 我們要開發的目錄，基本上要做的事情都在這個目錄裡。
│ ├── assets ------------------------------ 靜態檔案，放置一些圖片，如logo等
│ ├── components -------------------------- 元件目錄，存放元件檔案，可以不用。
│ ├── main.js ----------------------------- 主js
│ ├── App.vue ----------------------------- 專案入口元件，我們也可以直接將元件寫這裡，而不使用 components 目錄。
│ ├── router ------------------------------ 路由
├── static ---------------------------- 靜態資源目錄，如圖片、字型等。
├── .babelrc--------------------------------- babel配置檔案
├── .editorconfig---------------------------- 編輯器配置
├── .gitignore------------------------------- 配置git可忽略的檔案
├── index.html ------------------------------ 首頁入口檔案，你可以新增一些 meta 資訊或統計程式碼啥的。
├── package.json ---------------------------- node配置檔案，記載著一些命令和依賴還有簡要的專案描述資訊
├── .README.md------------------------------- 專案的說明文件，markdown 格式。想怎麼寫怎麼寫，不會寫就參照github上star多的專案，看人家怎麼寫的
複製程式碼 在webpack的配置檔案裡，設定了main.js是入口檔案，我們的專案預設訪問index.html，這個檔案裡面<div id="app"></div>和App.vue元件裡面的容器完美的重合了，也就是把元件掛載到了index頁面，然後我們只需要去建設其他元件就好了，在App元件中我們也可以引入，註冊，應用其他元件，可以通過路由將其他元件渲染在App元件，這樣我們就只需要去關注每個元件的功能完善。
就是說vue的預設頁面是index.html，index中的<div id="app"></div>掛載了App.vue這個大元件，然後所有的其他子元件（hello.vue等）都歸屬在App.vue這個主元件下。
主要檔案詳解
src——[專案核心檔案]
在vue-cli的專案中，其中src資料夾是必須要掌握的，因為基本上要做的事情都在這個目錄裡。
index.html——[主頁]
index.html如其他html一樣，但一般只定義一個空的根節點，在main.js裡面定義的例項將掛載在根節點下，內容都通過vue元件來填充
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vuedemo</title>
</head>
<body>
<!-- 定義的vue例項將掛載在#app節點下 -->
<div id="app"></div>
</body>
</html>
複製程式碼App.vue——[根元件]
一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)
<!-- 模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<!-- script -->
<script>
export default {
name: 'app'
}
</script>
<!-- 樣式 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
複製程式碼【template】
其中模板只能包含一個父節點，也就是說頂層的div只能有一個（例如上面程式碼，父節點為#app的div，其沒有兄弟節點）
<router-view></router-view>是子路由檢視，後面的路由頁面都顯示在此處
打一個比喻吧,<router-view>類似於一個插槽，跳轉某個路由時，該路由下的頁面就插在這個插槽中渲染顯示
【script】
vue通常用es6來寫，用export default匯出，其下面可以包含資料data，生命週期(mounted等)，方法(methods)等，具體語法請看vue.js文件。
【style】
樣式通過style標籤包裹，預設是影響全域性的，如需定義作用域只在該元件下起作用，需在標籤上加scoped.
<style scoped></style>
如要引入外部css檔案，首先需給專案安裝css-loader依賴包，開啟cmd，進入專案目錄，輸入npm install css-loader,回車。
安裝完成後，就可以在style標籤下import所需的css檔案，例如：
<style>
import './assets/css/public.css'
</style>
複製程式碼main.js——[入口檔案]
main.js主要是引入vue框架，根元件及路由設定，並且定義vue例項，下面的
components:{App}就是引入的根元件App.vue
後期還可以引入外掛，當然首先得安裝外掛。
/*引入vue框架*/
import Vue from 'vue'
/*引入根元件*/
import App from './App'
/*引入路由設定*/
import router from './router'
/*關閉生產模式下給出的提示*/
Vue.config.productionTip = false
/*定義例項*/
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
複製程式碼router——[路由配置]
vue-router是Vue.js官方的路由外掛，它和vue.js是深度整合的，適合用於構建單頁面應用。vue的單頁面應用是基於路由和元件的，路由用於設定訪問路徑，並將路徑和元件對映起來。
router資料夾下，有一個index.js，即為路由配置檔案。
/*引入vue框架*/
import Vue from 'vue'
/*引入路由依賴*/
import Router from 'vue-router'
/*引入頁面元件，命名為Hello*/
import Hello from '@/components/Hello'
/*使用路由依賴*/
Vue.use(Router)
/*定義路由*/
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
複製程式碼這裡定義了路徑為'/'的路由，該路由對應的頁面是Hello元件，所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello元件
類似的，我們可以設定多個路由，‘/index’,'/list'之類的，當然首先得引入該元件，再為該元件設定路由。
其他配置檔案
主要包括webpack的配置，專案配置，專案依賴等等。
詳情可參考以下文章：
vue 模板檔案
這是我自己做的一個vue模板檔案，符合Eslint規則
<!-- -->
<template>
<div/>
</template>
<script>
// 這裡可以匯入其他檔案（比如：元件，工具js，第三方外掛js，json檔案，圖片檔案等等）
// 例如：import 《元件名稱》 from '《元件路徑》'
export default {
// import引入的元件需要注入到物件中才能使用
components: {},
data() {
// 這裡存放資料
return {
}
},
// 監聽屬性 類似於data概念
computed: {},
// 監控data中的資料變化
watch: {},
// 生命週期 - 建立完成（可以訪問當前this例項）
created() {
},
// 生命週期 - 掛載完成（可以訪問DOM元素）
mounted() {
},
beforeCreate() {}, // 生命週期 - 建立之前
beforeMount() {}, // 生命週期 - 掛載之前
beforeUpdate() {}, // 生命週期 - 更新之前
updated() {}, // 生命週期 - 更新之後
beforeDestroy() {}, // 生命週期 - 銷燬之前
destroyed() {}, // 生命週期 - 銷燬完成
activated() {}, // 如果頁面有keep-alive快取功能，這個函式會觸發
// 方法集合
methods: {
}
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css類
</style>
複製程式碼總結
vue-cli給建立vue專案提供了很大的便利。但是同時大量的第三方庫的使用，會讓打包後的js變的很大，所以還是要熟悉配置,熟悉第三方外掛的使用，才可以開發更高效的開發web應用。這裡把vue-cli的一些相關內容給自己做一個總結，便於以後查閱。也是希望對其他開發者有幫助。有不足之處請指正。
路漫漫其修遠兮，與諸君共勉。
祝大家2019更上一層樓！
後記：Hello 小夥伴們，如果覺得本文還不錯，記得點個贊或者給個 star，你們的贊和 star 是我編寫更多更豐富文章的動力！GitHub 地址
db 的文件庫 由 db 採用 知識共享 署名-非商業性使用-相同方式共享 4.0 國際 許可協議進行許可。
基於github.com/danygitgit上的作品創作。
本許可協議授權之外的使用許可權可以從 creativecommons.org/licenses/by… 處獲得。
