.vue文件使用方法

在webpack中引入.vue文件

1.安装vue-loader和vue-template-compiler

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

2.修改webpack.config.js

定义常量：

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

在plugins中加入

new VueLoaderPlugin()

加入匹配规则

{test:/\.vue$/, use: 'vue-loader'}

webpack.config.js:

const path=require('path')

//这个配置文件，其实就是一个node文件，通过node中的模块操作，向外暴露了一个配置对象

//导入在内存中生成html的插件
//只要是插件都要放到plugins中去
const htmlWebpackPlugin=require('html-webpack-plugin')

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

module.exports={
  entry:path.join(__dirname,"./src/main.js"),//入口
  output:{//输出文件配置
    path:path.join(__dirname,"./dist"),
    filename:'bundle.js'//指定输出文件的名称
  },
  plugins: [
      new htmlWebpackPlugin({//创建一个在内存中生成html页面的插件
        template: path.join(__dirname,"./src/index.html"),//指定模板页面
        filename: "index.html"//指定生成的页面的名称
      }),
    new VueLoaderPlugin()
  ],
  module: {
    //这个结点用于配置所有的第三方模块加载器
    rules: [//所有第三方模块的匹配规则
      {test:/\.css$/,use:['style-loader','css-loader']},//配置处理css文件的第三方loader模块规则,test里面是正则表达式
      {test: /\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理less文件的规则
      {test: /\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理scss文件规则
      {test:/\.jpg|png|gif|bmp|jpeg$/,use:'url-loader?limit=6000&name=[hash:8]-[name].[ext]'},//配置处理url
      {test:/\.js$/,use:'babel-loader', exclude: /node_modules/},//配置bable转换高级的es语法
      {test:/\.vue$/, use: 'vue-loader'}
    ]
  },
  resolve: {
    alias: {//设置vue被导入时候的包路径
      // "vue$":"vue/dist/vue.js"
    }
  }

}

3.在main.js中导入login.vue组件

import login from './login.vue'

以及在vue实例中加入render

//如何在webpack创建的项目中使用vue


//注意：在webpack中， 使用import Vue from 'vue'导入的Vue构造函数，功能不完整，只提供了runtime-only的方式
//并没有提供网页中的使用方式

//这种方式可以
// import Vue from '../node_modules/vue/dist/vue.js'
import Vue from 'vue'

// let login={
//     template:'<h1>这是login组件，是使用网页中形式创建出来的组件</h1>'
// }


//1.导入login组件
import login from './login.vue'


let vm=new Vue({
    el:"#app",
    data:{
        msg:123
    },
    // components:{
    //     login
    // }
    render:function (createElements) {
                //在webpack中，如果想要通过 vue，把一个组件放到页面中去展示，vm实例中的render函数可以实现

        return createElements(login);
    }
})

   //在webpack中，如果想要通过 vue，把一个组件放到页面中去展示，vm实例中的render函数可以实现

    return createElements(login);
}

})