04webpack与vue的结合使用

vue实例的render方法渲染组件

<div id="app">
    
</div>

var login = {
    template:'<h1>登录组件</h1>'
}
var vm = new Vue({
    el:'#app',
    data:{}，
    methods:{},
    render:function(createElements) { //createElement 是一个方法，把指定的组件模板渲染成HTML
        return createElements(login)
        //return 的结果，会替换页面中 el 指定的容器
    }
})

 

webpack中导入 vue 和 普通网页使用

npm i vue -S

import Vue from 'vue'
var vm = new Vue({
​
•   ...
​
})

包的查找规则：

1. 项目根目录中 node_modules 的文件夹，根据包名，找对应的 vue 文件夹

2. 在 vue 文件夹中，找叫 package.json 的包配置文件

3. 在 package.json 文件中，查找一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】

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

resolve:{
    alias:{
        'vue$':'vue/dist/vue.js' //设置导入需要的 vue 包，直接import 导入的包不全
    }
}

vue 中结合 render 函数渲染指定的组件

1. src 中创建 login.vue 组件

<template><div>组件</div></template>
<script></script>
<style></sytle>

2. main.js 中导入组件

import Vue from 'vue'
import login from './login.vue'
var vm = new Vue({
•   ...
    //components:{
    //  login
    //}
    render:function(createElements){  //在 webpack 中，如果想通过vue把组件渲染到页面，render可以实现 
        return createElements(login)
    }
    //render:c=>c(login)  //render的简写形式
})

3. 默认webpack 无法打包 .vue 文件，需要安装相关的loader插件 cnpm i vue-loader vue-template-comiler -D 在配置文件中，新增loader配置项 {test:/.vue$/,use:'vue-loader'}

export default 和 export 的使用方式

• login.vue

<template><div>组件</div></template>
<script>
    export default{
        data(){ //注意data必须是function
            return {}
        },
        methods:{
            show(){console.log('调用了 login.vue 中的show方法')}
        }
    }
</script>
<style></sytle>

1. 在 ES6 中使用 import 模块名 from '模块标识符' import '标识路径'

2. 在 ES6 中，使用 export default 和 export 向外暴露成员： 注意： export default 暴露的成员，可以使用任意的变量来接收；但 在一个模块中，只能暴露一次，不能多次调用 export var title = '小星星'： 此中暴露只能使用 {title as t} 来接收；也可以暴露多个；可以使用 as 起别名

结合webpack 使用 vue-router

cnmp i vue-router -S

• main.js :

import account form './main/Account.vue'
import goodslist form './main/GoodsList.vue'
var router = new VueRouter({
    routes:[
        {path:'/account',component:account},
        {path:'/goodslist',component:goodslist}
    ]
})
var vm = new Vue({
    el:"#app"
    router:c=>c(app),  //会吧 el 指定的容器中所有内容都清空
    router //将路由挂在到vm上
})

结合webpack 实现children 子路由

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

<style scoped></style>  //子组件中的样式不会影响到父组件

如果想要启用 scss 或 less，需要为 style 元素设置 lang 属性

<style lang="scss" scoped></style>  //子组件中的样式不会影响到父组件

只要style 标签在 vue 组件中定义的，那么推荐都为 style 开启 scoped 属性

抽离路由模块

• src 下 创建 router.js

• 将导入的组件 和路由写入到 router.js

• export default

•