一、將Vue例項內的template,data,methods抽離到一個app物件中

main.js程式碼如下：

import Vue from 'vue';
new Vue({
  el:'#app',
  template:`
    <div>
      <h2>{{message}}</h2>
      <button @click="btnClick">按鈕</button>
    </div>`,

  data:{
    message:'hello webpack'
  },
  methods:{
    btnClick(){
      console.log(
 
'button');
    }
  }
})

可以繼續將template，data，methods抽離出去

 1 import Vue from 'vue';
 2 
 3 const App = {
 4   template:`    
 5     <div>
 6       <h2>{{message}}</h2>
 7       <button @click="btnClick">按鈕</button>
 8     </div>`,
 9   data(){
10     return {
11       message:'hello webpack for vue'
12
 
     }
13   },
14   methods:{
15     btnClick(){
16       console.log('button');
17     }
18   }
19 }
20 new Vue({
21   el:'#app',
22   template:'<App/>',
23   components:{
24     App
25   }
26 })

二、main.js中將app物件抽離到一個app.js檔案中

./src/vue/app.js

程式碼如下：

 1 export default {
 2   template:`    
 3     <div>
 4
 
       <h2>{{message}}</h2>
 5       <button @click="btnClick">按鈕</button>
 6     </div>`,
 7   data(){
 8     return {
 9       message:'hello webpack for vue'
10     }
11   },
12   methods:{
13     btnClick(){
14       console.log('button');
15     }
16   }
17 }

./src/main.js檔案：

匯入import App from './vue/app.js'

1 import Vue from 'vue';
2 import App from './vue/App'
3 new Vue({
4   el:'#app',
5   template:'<App/>',
6   components:{
7     App
8   }
9 })

三、將app.js檔案的內容放置到App.vue中

1.將template的內容放到vue的template中

2.將data和methods放到 vue的script中

3.如果template中有樣式，將樣式放到vue的style中

建立App.vue，程式碼如下：

 1 <template>
 2   <div>
 3     <h2 class="title">{{ message }}</h2>
 4     <button @click="btnClick">按鈕</button>
 6   </div>
 7 </template>
 8 
 9 <script>
10 import Cpn from './Cpn'
11 export default {
12   name: "App",
13   data() {
14     return {
15       message: 'hello webpack for vue'
16     }
17   },
18   methods: {
19     btnClick() {
20       console.log('button');
21     }
22   },26 }
27 </script>
28 
29 <style scoped>
30 .title {
31   color: pink;
32 }
33 </style>

4.在main.js中引用App.vue，之前app.js去掉

 1 import Vue from 'vue';
 2 // import App from './vue/App'
 3 import App from './vue/App.vue'
 4 new Vue({
 5   el:'#app',
 6   template:'<App/>',
 7   components:{
 8     App
 9   }
10 })

5.編譯後:npm run build頁面報錯，需要vue-loader

安裝：npm install [email protected] vue-template-compiler --save-dev

備註：如果手動安裝vue-loader大於13.0.0，需要另外安裝一個外掛

6.webpack.config.js中配置

四、若App.vue有元件

1.建立子元件的vue檔案，Cpn.vue

 1 <template>
 2   <div>
 3     <h2>我是子元件</h2>
 4     <p>我是子元件的名稱{{name}}</p>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 export default {
10   name: "Cpn",
11   data() {
12     return {
13       name: '我是子元件的name'
14     }
15   }
16 }
17 </script>
18 
19 <style scoped>
20 
21 </style>

2.在App.vue中引用子元件vue檔案，且註冊子元件。

 1 <template>
 2   <div>
 3     <h2 class="title">{{ message }}</h2>
 4     <button @click="btnClick">按鈕</button>
 5     <Cpn/>
 6   </div>
 7 </template>
 8 
 9 <script>
10 import Cpn from './Cpn.vue'
11 export default {
12   name: "App",
13   data() {
14     return {
15       message: 'hello webpack for vue'
16     }
17   },
18   methods: {
19     btnClick() {
20       console.log('button');
21     }
22   },
23   components:{
24     Cpn
25   }
26 }
27 </script>
28 
29 <style scoped>
30 .title {
31   color: pink;
32 }
33 </style>

3.若引用Cpn.vue想省略檔案字尾需要取webpack.config.js中新增配置資訊

本文來自部落格園，作者：kaer_invoker，轉載請註明原文連結：https://www.cnblogs.com/invoker2021/p/14974269.html