Vue——28——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结尾的文件,比如index.vue,其中,有三部分组成,template,script,style
5.使用在main.js中 import login from ‘./login.vue’导入这个.vue组件
6.创建vm的实例,var vm=new Vue({el:’#app’,render:c=>c(login)})
7.在页面中创建一个id为app的div元素,作为我们vm实例要控制的区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
    <login></login>
    </div>
</body>
</html>

//在webpack中使用vue
//注意：在webpack中，使用import Vue from 'vue'导入的Vue构造函数功能不完整，只提供了
//runtime-only的方式，并没有提供像网页中那样的使用方式
import Vue from '../node_modules/vue/dist/vue.js'
// import Vue from 'vue'
/*回顾包的查找规则
1.找项目根目录中有没有node_modules的文件夹
2.在node_modules中根据包名，找对应的vue文件夹
3.在vue文件夹中，找一个package.json的包配置文件
4.在package.json文件中，查找一个main属性【main属性指定了这个包在被加载时候的入口文件】
*/
// 1.导入login组件
import login from './login.vue'
//默认webpack无法打包.vue文件,需要安装相关的loader
//cnpm i vue-loader vue-template-compiler -D
//在配置文件中,新增loader配置项{test:/\.vue$/,use:'vue-loader}
var vm=new Vue({
    el:"#app",
    data:{
        msg:'123'
    },
  /*render:function(creatElements){//在webpack中,如果想要通过vue,把一个组件放到页面中去展示,vm实例中的render函数可以实现
      return creatElements(login)
  }*/
  //改写成箭头函数
  render:c =>c(login)
 
})

<template>
<div>
    <h1>这是登录组件,使用.vue文件定义出来的</h1>
</div>
</template>
    
<script>

</script>
<style >

</style>

var path=require('path')
const webpack=require('webpack')

module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:"bundle.js"
    },
    plugins:[
        new webpack.HotModuleReplacementPlugin(),//new一个热更新的模块对象,这是启用热更新的第三步npm
        ],
        module:{
            rules:[
                {test:/\.vue$/,use:'vue-loader}//处理.vue文件的loader
            ]
        }
        
    //   resolve:{
    //       alias:{
    //           'vue$':'vue/dist/vue.js'
    //       }
    //   }
}

Vue——28——webpack导入vue

猜你喜欢