vue-webpack开发

先配置webpack

• 配置vue

npm i vue -S
npm i vue-template-compiler -D
npm i vue-loader -D

• 配置vue-loader
  在webpack.config.js文件中：

const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
plugins:[
        new VueLoaderPlugin()
    ],

在webpack.config.js文件的rules中写入

{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader

• 创建app.vue文件

<template>
  <!--写模板【内容】-->
</template>

<script>
export default {   //向外暴露对象，放入data,methods,钩子函数等【行为】
  data() {
    return {
    ...
    };
  },
  methods: {
    ...
  },
...
};
</script>


<style>
  <!--写样式【样式】-->
</style>

• 在main.js中导入vue

import Vue from 'vue'
import app from './App.vue'

var vm = new Vue({
  el: '#app',
  render: c => c(app)
})

参考代码：https://github.com/I-am-so-cute/vue-webpack