• webpack 中配置 vue 组件的加载器
    1. 运行 npm install vue-loader vue-template-compiler -D命令。
    2. 在 webpack.config.js 配置文件中，添加 vue-loader 的配置项如下：
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      const VueLoaderPlugin = require('vue-loader/lib/plugin')
      module.exports = {
        module: {
          rules: [
            //其他规则
            { test: /\.vue$/, loader: 'vue-loader' }
          ]
        },
        plugins: [
          //其他插件
          new VueLoaderPlugin() //请确保引入这个插件
        ]
      }
  • 在 webpack 项目中使用 vue
    1. 运行 npm install vue -S 安装 vue
    2. 在 src -> index.js 入口文件中，通过import Vue from 'vue'来导入 vue 构造函数
    3. 创建 vue 的实例对象，并指定要控制的 el 区域
    4. 通过 render 函数渲染 app 根组件
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      //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)
      })