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>
然后大家就可以去瀏覽器查看啦！！
上面就是整個一個開發流程