Vue 框架-12-Vue 專案的詳細開發流程
首先，如果你還不瞭解 Vue 腳手架怎麼搭建？
預設的環境中有哪些檔案？
檔案大概是什麼作用？
那麼，您要先檢視之前的文章才有助於你理解本篇文章：
Vue 框架-10-搭建腳手架 CLI + 批處理快捷啟動
Vue 框架-11-介紹src檔案流程及根元件app+HBuilder 配置
（一）Vue 元件及環境依賴介紹
大家開啟 Vue 腳手架的環境，再開啟搭建的專案中的入口檔案 index.html 檔案，這樣：
其實，你會發現裡面 index.html 中就只有一行有用：
一個 div，id 為 app
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>first_pro</title>
</head>
<body>
<!-- id 為 app，具體定義在 main.js 中 -->
<div id="app"></div>
<!-- 內建檔案將自動注入 -->
</body>
</html>為啥連引入 js 都不需要呢？
這時候就會自然的想到我們 cmd 執行的一個環境，它是通過多個元件和元件之間的依賴組成的一個環境，不知道大家有沒有注意到，開啟環境的時候會有一箇中間介面：
它就是在構建一個我們的 Vue 的一個環境，使在環境中執行的 html 檔案擁有裡面的一些功能和內容：
簡單說一下他們之前的依賴關係，首先是：
（1）package.json 配置檔案，這裡面定義了 dev ，當我們開啟環境的時候不就是執行了一個 npm run dev 嗎，npm 就是 Node Package Manager，他就依賴這樣一個配置檔案搭建環境：
（2）然後它就會根據這個 dev 找到定義的 webpack.dev.conf.js 檔案，這裡面又有 index.html 檔案的說明：
（3）然後他就會找各個需要的元件檔案，最終搭建成功一個環境，build 目錄下的檔案大家想看可以去看，我就不多說了，因為對開發來說，不是很重要。
（4）最重要的都知道一點，main.js 是最先執行的主 js 檔案
（二）Vue 元件介紹及元件巢狀
下面，先要說的是 Vue 的元件，之前介紹的 Vue 預設的根元件 App.vue，字尾名是 .vue 的檔案就是 Vue 專案中的元件，預設環境中還有一個就是在 src/components 下的 HelloWorld.vue 元件
想要搞清楚這些元件之間的關係，就要看 main.js 檔案中，是怎麼的一個依賴關係，也就是所謂的元件巢狀，來看 main.js （看註釋）：
// 用 “import” 命令載入 Vue 構建版本
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//from 會去找同級目錄的 App.vue 根元件
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
//要獲取的 HTML 中 id 為 app 標籤
el: '#app',
//元件要在 components 註冊一下，這個 App 是上面 import 得到的一個 App
components: { App },
//預設的 template 模板（不可以隨便改）
template: '<App/>'
})
（三）Vue 專案的詳細開發流程
有人說了，我懂了他們之間的一個關係，那我還是不懂怎麼個開發流程
（1）先構建自己的元件 User.vue（強烈建議放在 HelloWord.vue 同級目錄），大家可以直接拷貝 App.vue 根元件的程式碼，作為一個框架，省事，易懂，再看一遍 App.vue 檔案，其中有三部分，也是瀏覽器頁面的三層（看註釋）：
<!--擴充一個面試小知識點：瀏覽器頁面的有哪幾層構成，分別是什麼？
三層構成：結構層，表示層，行為層
分別是：HTML，CSS，JavaScript
-->
<!--根元件都包含了-->
<!--1.結構層：html 模板-->
<template>
<!--注意：最外層只能是一對根標籤，不能和其他標籤並列-->
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<!--2.行為層：邏輯處理-->
<script>
// HelloWorld 是另外一個元件，需要在 components 裡註冊，下面有
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<!--3.表示層：css 樣式-->
<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>
（2）只建立元件 User.vue，實際是和專案分離的一個狀態，下面就有把我們自己定義元件加到專案中，有兩種方式：
- （1）全域性註冊自定義元件（一般用於多次使用的公共元素）：
開啟 main.js 檔案，import 再 components，請看截圖：
這時候就已經完成全域性註冊，我們就可以在使用了，
【注意】：直接把 user 當做標籤來使用
例如：開啟 App.vue 檔案，我們在他的結構層，就是最上面的 HTMl 模板程式碼塊中，加上，開啟環境，開啟瀏覽器，就可以看到 user 元件中的內容了
<user></user>- （2）區域性註冊元件：
如果嘗試了上面的全域性註冊，先在 main.js 文章註釋掉剛才加的內容，開啟 App.vue 元件，（注意程式碼位置在行為層）截圖：
原始碼：
<!--擴充一個面試小知識點：瀏覽器頁面的有哪幾層構成，分別是什麼？
三層構成：結構層，表示層，行為層
分別是：HTML，CSS，JavaScript
-->
<!--根元件都包含了-->
<!--1.結構層：html 模板-->
<template>
<!--注意：最外層只能是一對根標籤，不能和其他標籤並列-->
<div id="app">
<user></user>
</div>
</template>
<!--2.行為層：邏輯處理-->
<script>
//在根元件中 區域性註冊自定義元件
import User from './components/User'
// HelloWorld 是另外一個元件，需要在 components 裡註冊，下面有
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
"user":User
}
}
</script>
<!--3.表示層：css 樣式-->
<style>
</style>
然後大家就可以去瀏覽器檢視啦！！
上面就是整個一個開發流程