使用webpack使用vue

1、导入vue.js的方法

安装vue的包： cnpm i vue -S
包的查找规则：

1. 找 项目根目录中有没有 node_modules 的文件夹
2. 在 node_modules 中 根据包名，找对应的 vue 文件夹
3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】

我们有三种方法引入：

1、在入口文件（main.js）中引入vue.并在配置文件中修改文件路径

import Vue from 'vue'

将main后面改为vue.js的路径

2、直接进入vue.js路径

 import Vue from '../node_modules/vue/dist/vue.js'

3、在webpack.config.js中添加resolve属性

main.js中

import Vue from 'vue'

 resolve: {
    alias: { // 修改 Vue 被导入时候的包的路径
    "vue$": "vue/dist/vue.js"
    }
  }

注意，每次修改都需要重新启动

二、引入.vue文件

1、.vue文件模板

<template>
<!-- html模板 -->
  <div>
    <h1>这是登录组件</h1>
  </div>
</template>
<script>
// 业务逻辑
</script>
<style>
/* 样式 */
</style>

2、在webpack使用vue

import Vue from '../node_modules/vue/dist/vue.js'
// 1. 导入 login 组件到main入口文件中：
import login from './login.vue' 
var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
   /* render: function (createElements) { 
    return createElements(login)
  } */
   render: c => c(login)
})
  

/在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
默认，webpack 无法打包 .vue 文件，需要安装 相关的loader：
cnpm i vue-loader vue-template-compiler -D
在配置文件中，新增loader哦配置项 { test:/.vue$/, use: ‘vue-loader’ }
在webpack.config.js中配置引包
const { VueLoaderPlugin } = require(‘vue-loader’);
plugins:[
new VueLoaderPlugin()
]
这样就能将组件渲染到页面中了
总结
总结梳理： webpack 中如何使用 vue :

1. 安装vue的包： cnpm i vue -S
2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
   在webpack.config.js中配置引包
   const { VueLoaderPlugin } = require(‘vue-loader’);
   plugins:[
   new VueLoaderPlugin()
   ]
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. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；