使用webpack渲染vue

1.使用.vue后缀的文件定义组件

结构

<template>
    <div>
    
    </div>
</template>
<script>
export default {

};
</script>
<style lang="">

</style>

template：只有一个根节点
script : export default {}是一个对象
之前构造vue组件的一些属性
style
写样式
通过lang可以指定语法（less、sass）
通过scoped，当 <style>标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

2.终端下载Vue

npm i vue
注意name不要重复

3.main.js中引入对应文件并实例化一个Vue

import Vue from 'vue';
import app from './App.vue';
var vm = new Vue({
    el: '#app',
    render: function (createElement) {
     // 引入的是运行时的Vue，所以需要用render导入返回的内容就会放在el控制的这个区域里
        return createElement(app);
    }
    // 简写形式
    // render:c=>c(app)  
})

4.安装对应的loader

npm install -D vue-loader vue-template-compiler

5.配置loader

在webpack.config.js文件中

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

注意其他前面有关webpack的配置
详见webpack使用