【Webpack】在webpack中使用Vue
尝试在 webpack 中使用 Vue
注意：在 webpack 中使用 import Vue from 'vue' 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的方式
- 默认 webpack 无法打包.vue 文件，需要安装相关的 loader
npm i vue-loader vue-template-compiler -D - 在 webpack.config.js 配置文件中新增 loader 配置项
{ test:/\.vue$/,use:'vue-loader' } - 在 webpack 中，如果想要通过 vue 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
总结梳理
- 安装 vue 的包：
npm i vue -S - 由于在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以需要安装能解析这种文件的 loader
npm i vue-loader vue-template-complier -D - 在 main.js 中，导入 vue 模块
import Vue form 'vue'（获取到的是一个构造函数，首字母最好大写） - 定义一个 .vue 结尾的组件，其中组件由三部分组成:
<template>
</template>
<script>
</script>
<style>
</style>
- 使用 import 导入这个组件
import login from './login.vue' - 创建 vm 的实例
let vm = new Vue({el:"#app",render:c=>c(login)}) - 在页面中创建一个 id 为 app 的 div 元素作为我们的 vm 实例要控制的区域
包的查找规则
- 找项目根目录中有没有 node_modules 的文件夹
- 在 node_modules 中根据包名找对应的 vue 文件夹
- 在 vue 文件夹中找一个叫做 package.json 的包配置文件
- 在 package.json 文件中查找一个 main 属性（main 属性指定了这个包在被加载时候的入口文件）
