1. 運行`cnpm i vue -S`將vue安裝為運行依賴；
2. 運行`cnpm i vue-loader vue-template-compiler -D`將解析轉換vue的包安裝為開發依賴；
3. 運行`cnpm i style-loader css-loader -D`將解析轉換CSS的包安裝為開發依賴，因為.vue文件中會寫CSS樣式；
4. 在`webpack.config.js`中，添加如下`module`規則：
```
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.vue$/, use: 'vue-loader' }
]
}
```
5. 創建`App.js`組件頁面：
```
<template>
<!-- 注意：在 .vue 的組件中，template 中必須有且只有唯一的根元素進行包裹，一般都用 div 當作唯一的根元素 -->
<div>
<h1>這是APP組件 - {{msg}}</h1>
<h3>我是h3</h3>
</div>
</template>
<script>
// 注意：在 .vue 的組件中，通過 script 標簽來定義組件的行為，需要使用 ES6 中提供的 export default 方式，導出一個vue實例對象
export default {
data() {
return {
msg: 'OK'
}
}
}
</script>
<style scoped>
h1 {
color: red;
}
</style>
```
6. 創建`main.js`入口文件：
```
// 導入 Vue 組件
import Vue from 'vue'
// 導入 App組件
import App from './components/App.vue'
// 創建一個 Vue 實例，使用 render 函數，渲染指定的組件
var vm = new Vue({
el: '#app',
render: c => c(App)
});
```
## 在使用webpack構建的Vue項目中使用模板對象？
1. 在`webpack.config.js`中添加`resolve`屬性：
```
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
```