webpack-03-webpack与vue的结合

使用vue实例的render方法渲染组件

var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        
      },
      components: {
        
      },
      render: function (createElements) {
        return createElements(login)
      }
    })

会被login完全覆盖（有点类似于v-text）

区分webpack中导入vue和普通网页中引入vue.js的区别

import Vue from ‘vue’ 会带来如下操作：

先去node_modules文件夹中找vue模块

然后去package.json中找vue模块的main属性，但main指向的时vue-runtime-only.js

这样不行，我们要的是vue.js

所以可以这么做：

1、更改main的值为vue.js或vue.min.js

2、import Vue from ‘../node_modules/vue/dist/vue.js’

3、配置webpack.config.js文件

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

使用export default和export向外暴露成员

export default 只能有一个

export default {
  name: 'zhangsan',
  age: 20
}

可以自定义变量名称接收接收

1	import person from './person.js'

export 可以写多个

1 2	export var name = 'lisi' export var age = 21

必须使用{原名, 原名}接收但也可以用as改名

1	import { name, age as myCallAge } from './person.js'

webpack使用vue-router

1
2
3

import VueRouter from 'vue-router'

Vue.use(VueRouter)

组件中style标签的lang属性和scoped属性

<style lang="scss" scoped>
  body {
    div {
      font-size: italic;
    }
  }
</style>
//lang设置用css、scss、less等哪种语言写
//scoped设置样式是组件的，如果不设置就会变成全局的

# webpack, 基础知识

微信