1. 傳統組件的問題和解決方案
問題：
- 字符串模板缺乏語法高亮，在 HTML 有多行的時候，需要用到丑陋的 \
- 不支持 CSS 意味著當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
- 沒有構建步驟限制，只能使用 HTML 和 ES5 JavaScript，而不能使用預處理器（如：Babel）
解決方案：針對傳統組件的問題，Vue 提供了一個解決方案 —— 使用 Vue 單文件組件。
2. Vue 單文件組件的基本結構
單文件組件的組成結構：
- template 組件的模板區域
- script 業務邏輯區域
- style 樣式區域
<template> <!-- 組件的模板區域 -->
</template>
<script> // 業務邏輯區域
export default { // 默認導出
data: () { return {} }, // 私有數據
methods: {} // 處理函數
// ... 其它業務邏輯
}
</script>
<style scoped> /* 樣式區域 */
/* 盡量都添加scoped指令，防止組件樣式的沖突 * /
</style>
3. webpack 中配置 vue 組件的加載器
在index.js文件中書寫如下代碼，導入vue單文件組件：
// 導入單文件組件
import App from './components/App.vue'
因為webpack默認解析不了.vue文件，我們在運行npm run dev會報錯解析不了.vue文件，所以我們需要配置loader進行解析和轉換，如下：
- 運行
npm i vue-loader vue-template-compiler -D命令，其中vue-template-compiler是vue-loader的內置依賴項（在 vue3 中，使用@vue/compiler-sfc代替了vue-template-compiler）。 - 在 webpack.config.js 配置文件中，添加 vue-loader 的配置項如下：
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它規則
{ test: /\.vue$/, loader: 'vue-loader' }
]
},
plugins: [
// ... 其它插件
new VueLoaderPlugin() // 請確保引入這個插件！
]
}
然后重新執行 npm run dev 即可正常運行項目。
4. 在 webpack 項目中使用 vue
- 運行
npm i vue –S安裝 vue - 在 src -> index.js 入口文件中，通過
import Vue from 'vue'來導入 vue 構造函數 - 創建 vue 的實例對象，并指定要控制的 el 區域
- 通過 render 函數渲染 App 根組件
// index.js文件代碼：
// 1. 導入 Vue 構造函數
import Vue from 'vue'
// 2. 導入 App 根組件
import App from './components/App.vue'
const vm = new Vue({
// 3. 指定 vm 實例要控制的頁面區域
el: '#app',
// 4. 通過 render 函數，把指定的組件渲染到 el 區域中
render: h => h(App)
})
// 注意：在 webpack 項目中使用 vue，導入的Vue并不是最全的Vue，而是閹割版的Vue，只支持使用render渲染組件，就不要使用component或者template了。
執行 npm run dev 運行項目，可以發現，在index.html中，將來要被 vue 控制的區域（也就是<div id="app"></div>），會被App.vue渲染之后的內容給占據。
疑問：這里項目運行成功之后，報錯：[Vue warn]: Cannot find element: #app，但是實際 #app 這個 div 可以正常顯示，不知道為什么報錯，如下圖：
待解答：
5. 為什么有兩個id="app"
為什么 index.html 中的 id="app"，與 App.vue 中的 id="app" 不會沖突？
- 已檢查過生成的頁面代碼，只有一個
<div id="app"></div>，下面有一行注釋<-- built files will be auto injected —>，所以可以判斷，此段來自index.html，所以el:'#app'綁定的是index.html中的id="app"的元素 - 由于Vue組件必須有個根元素，所以
App.vue里面，根元素<div id="app"></div>與外層被注入框架index.html中的<div id="app"></div>是一致的，兩者在運行時指的是同一個DOM元素。 -
index.html中的<div id="app"></div>是指定綁定元素根路徑的，App.vue的<div id="app"></div>則是用于具體注入綁定元素的內容，他們作用不一樣。
6. webpack 打包發布
上線之前需要通過webpack將應用進行整體打包，可以通過 package.json 文件配置打包命令：
// 在package.json文件中配置 webpack 打包命令
"scripts": {
// 用于打包的命令 該命令默認加載項目根目錄中的 webpack.config.js 配置文件(比如會讀取入口文件是誰，出口文件是誰，對應了哪些規則等等)
"build": "webpack -p",
// 用于開發調試的命令
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000",
},
開發調試我們使用的指令是 npm run dev ，打包發布使用的指令是 npm run build （執行命令之后，就會默認加載項目根目錄中的 webpack.config.js 配置文件，比如會讀取入口文件是誰，出口文件是誰，對應了哪些規則等等）。
為了使項目更干凈，在打包之前可以先把dist文件夾給刪掉，因為執行 npm run build 指令還會生成dist文件夾，里面有以前我們生成的index.html和bundle.js文件，右鍵瀏覽器打開index.html文件也可以看到項目運行效果。打包完成之后，我們就可以把dist文件夾交給服務端讓他們發布了。
這里只是初步簡單的webpack打包發布，目的是體驗一下，真正的webpac打包發布比這個復雜多了，以后再學習，體驗代碼地址：https://github.com/iamkata/webpackstudy
