Vue & webpack

在webpack构建的项目中使用vue进行开发

在入口文件中 import Vue from 'vue' 导入的构造函数，功能不完整，只提供了runtime-only的方式，并没有提供网页中那样的使用方式

因为根据node_modules包的查找规则，会找到里面vue包下package.json，根据main字段加载文件，所以import加载的只是这个vue.runtime.common.js导出的Vue对象

而普通网页script标签导入的是vue.js，这个文件的功能才是最全的，才能实现我们的需求

正确导入vue.js的方式有三种

方式① 将main字段值改为vue.js，但这种改源文件的方式应该是不太好的

方式② import时使用文件路径 import Vue from '../node_modules/vue/dist/vue.js'

方式③ 入口文件的 import Vue from 'vue' 语句不变，而在webpack.config.js配置文件中添加resovle属性

resolve: {
    alias: {
        //修改vue被导入时包的路径.当import的文件是vue结尾时,将指向            vue/dist/vue.js
        'vue$': 'vue/dist/vue.js'
    }
}    

resolve属性在webpack.config.js中是和entry、output、plugins、module同级的

---

但若想使用runtime-only方式，该如何实现，需要vue文件和render配合使用

定义一个vue文件，这是个纯组件，由三部分构成：template+script+style（html模板，业务逻辑和样式）,vue文件和入口文件同级

<template>
    <div> <!--模板中根元素只能有一个-->
        <h1>这是用.vue组件渲染出来的页面</h1>
    </div>
</template>

<script>
</script>

<style>
</style>

webpack要打包.vue文件，需要加载器vue-loader，而vue-loader又依赖vue-template-compiler

npm i vue-loader vue-template-compiler -D

再在webpack.config中配置匹配条件

 {test:/\.vue$/,use:'vue-loader'} //处理vue文件的loader

由于vue-loader在15.*之后的版本需要用VueLoaderPlugin插件，否则报错

所以在webpack.config中加载插件

var path = require('path')
var vueLoaderPlugin = require('vue-loader/lib/plugin')

//通过Node中的模块操作,向外导出一个配置对象
module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, ',/dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new vueLoaderPlugin()
    ],
    //这个节点用于配置所有第三方模块加载器
    module: {
        //所有第三方模块的匹配规则
        rules: [
            {test:/\.vue$/,use:'vue-loader'} //处理vue文件的loader
        ]
    }
}

最后在入口文件使用render方法渲染

import Vue from 'vue'
import login from './login.vue'

new Vue({
    el:'#app',
    data:{
        msg:'Hi'
    },
    render:function (createElement) {
        return createElement(login)
    }
})

总结webpack中如何使用vue

❶ 装包，npm i vue

❷ 在webpack中定义组件推荐使用.vue模版文件，所以要安装能解析这种文件的loader

npm i vue-loader vue-template-compiler -D

❸ 入口文件加载vue模块，import Vue from 'vue'

❹ 定义.vue后缀的文件，由三部分组成：template+script+style

❺ 入口文件中加载.vue后缀文件，import login from './login.vue'

❻ 入口文件创建Vue实例，使用render方法进行渲染

❼ html中创建id为qpp的div元素，作为Vue实例中el控制的区域

有个坑，入口文件使用require引入vue和.vue文件，会报错，用important方式的话就没问题

---

export default 和 export

ES6中导入模块，使用import 模块名 from '模块标识符'

导出模块使用 export default 和 export

在一个模块中，export default 只允许向外暴露一次，接收时可使用任意变量名（但不能违反命名规则）

在一个模块中，可同时使用export default和export向外暴露成员，而且export可使用多次

<template>
    <div> <!--模板中根元素只能有一个-->
        <h1>这是用.vue组件渲染出来的页面</h1>
    </div>
</template>

<script>
    export default {
        id: 1,
        name: 'Sam'
    }

    export var num = '123'
</script>

<style>
</style>

在入口文件可得到导出对象

import Vue from 'vue'
import login,{ num } from './login.vue'

console.log(login)
console.log(num)

new Vue({
    el:'#app',
    render:function (createElement) {
        return createElement(login)
    }
})

使用export向外暴露成员只能使用 { } 的形式来接收，这种方式叫按需导出，不是说导出几个就要接收几个

export导出的成员必须严格按照导出时的名称，来使用 { } 接收，如果接收时想起别名，可使用as，{ num as n }

值得一提的是，vue文件中三部分（模板、逻辑、样式），通过webpack的打包，最终入口文件import得到的是三者结合的组件

如果想定义子组件中的data和methods，写法和以前是一样的（data必须是个方法并且要return个对象），区别在于data和method以往是直接写在模版对象里，

但这里是通过export default返回对象给webpack，让其将三者打包结合

---

结合webpack使用vue-router

如果在webpack中使用vue-router，就必须通过Vue.use()明确地安装路由功能

接下来步骤和往常一样，不同的是模板是通过import加载vue文件得来的

入口文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import index from './index.vue'
import login from './login.vue'
import register from './register.vue'

Vue.use(VueRouter)

var router = new VueRouter({
    routes: [
        { path: '/login', component: login },
        { path: '/register', component: register }
    ]
})

new Vue({
    el: '#app',
    render: function (createElement) {
        return createElement(index)
    },
    router: router
})

index.vue模板

<template>
    <div>
        <router-link to="/login">登录</router-link>
        <router-link to="/register">注册</router-link>
        <router-view></router-view>
    </div>
</template>

<script>

</script>

<style>
</style>

---

style标签的scoped和lang

在vue文件定义的样式默认是全局的，但只要加上scoped属性，该样式就只对当前vue文件有效

在style标签中只能写普通样式，如果想在里面写less或sass的话需要使用lang属性

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

<template>
</template>

<script>
</script>

<style scoped lang="less">
</style>

scoped是通过css属性选择器实现的，加了scoped后Vue会自动添加一个属性，然后通过属性选择器进行样式的添加

---

抽离路由模块

路由实例创建和路由组件的导入不应该写在入口文件中，应该抽取出来到router.js中，之后要 module export 创建好的路由对象，

再在入口文件中import该对象