在webpack中配置.vue组件页面的解析(vue-loader)

在webpack中配置.vue组件页面的解析

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. new VueLoaderPlugin() 引入这个插件，必须的
   ps：注意 引入const VueLoaderPlugin = require(‘vue-loader/lib/plugin’) ———在之前的版本中好像不需要这个插件，再看教程的时候还是跟着官方文档来 vue-loader
5. 在webpack.config.js中，添加如下module规则：

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      // 它会应用到普通的 `.js` 文件
      // 以及 `.vue` 文件中的 `<script>` 块
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      // 它会应用到普通的 `.css` 文件
      // 以及 `.vue` 文件中的 `<style>` 块
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件来施展魔法
    new VueLoaderPlugin()
  ]
}

创建.vue 组件

<template>
    <div>
        <h1>使用.vue 定义出来的组件</h1>
    </div>
</template>

<script>
export default {
    
}
</script>


<style>

</style>

render的方式渲染组件

import login from './login.vue'
//默认 webpack 无法打包 .vue文件 要安装相关的loader  cnpm i vue-loader vue-template-compiler -D
var vm = new Vue({
    el: '#app',
    data: {
        msg: '123'
    },
    render:  (createElements, context) => createElements(login)
   
})

总结梳理

webpack 中如何使用 vue :

1. 安装vue的包： cnpm i vue -S
2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
3. 在 main.js 中，导入 vue 模块 import Vue from ‘vue’
4. 定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
5. 使用 import login from ‘./login.vue’ 导入这个组件
6. 创建 vm 的实例 var vm = new Vue({ el: ‘#app’, render: c => c(login) })
7. new VueLoaderPlugin() 引入这个插件，必须的
8. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；