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. 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；

代码部分 webpack使用vue的几种代码方式

回顾包的查找规则

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

//如何在webpack

//在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_mudules的文件夹
  2. 在node_modules中根据包名， 找对应的vue文件夹
  3. 在vue文件夹中找一个package.json的包配置文件查找main属性【main属性制定了这个包在被加载的时候的入口文件】
*/
import login from './login.vue'
// 默认 webpack无法打包vue文件， 需要安装相关的loader
// cnpm i vue-loader vue-template-compiler -D



// var login = {
//   template: '
这是login组件，是用网页中的形式创建出来的
'
// }
var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  methods: {

  },
  // components: {
  //   login
  // }
  /*
  render: function(createElements){
    //在webpack中如果想要通过vue把一个组件放到页面中展示， vm实例中render函数可以实现
    return createElements(login)
  }
  */
  render: c => c(login) //简写形式
})