webpack整合Vue

最新推荐文章于 2024-06-07 17:03:35 发布

斜月!三星

最新推荐文章于 2024-06-07 17:03:35 发布

阅读量375

点赞数

分类专栏： Vue.js 组件化框架前端文章标签： vue.js

本文链接：https://blog.csdn.net/qq_45248344/article/details/108858236

版权

前端同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

Vue.js

7 篇文章 0 订阅

订阅专栏

组件化框架

7 篇文章 0 订阅

订阅专栏

文章目录

webpack整合Vue

webpack整合Vue

页面渲染组件

在页面中通过render函数渲染组件

在Vue实例中使用render属性指定渲染函数
渲染函数可带参数createElements
- createElements是一个方法，调用之后能将组件模板渲染为html结构
- createElements函数可带参数，参数是所要渲染的组件模板对象
- render函数的返回结果即为通过调用createElements方法得到的html结构
- render函数的返回结果会替换Vue实例中el属性指定的html元素

webpack整合Vue

使用npm install vue -S命令将Vue安装到本地生产环境依赖

导入完整的Vue

在js的入口文件中使用import Vue from 'vue'语句导入Vue包
- 此时导入的包并非完整的Vue包，并不提供<script>导入包的使用方式
- 若要使用方式是<script>导入包的使用方式，则将导包的路径修改即可
  - 修改导包路径，可将导包的语句修改为import Vue from '../node_modules/vue/dist/vue.js'
- 或者通常在webpack.config.js配置文件的导出配置对象中使用resolve属性指定在导包时进行别名处理的对象
  - 在该对象中使用alias属性进行配置需要使用别名的所有包的别名配置对象
  - 配置时，将原包名作为对象的属性使用" "包含，其属性值即为别名包
    例如：

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname,'./src/index.html'),
            filename: "index.html"
        })
    ],
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader','css-loader']},
            {test: /\.less$/, use: ['style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
            {test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ['url-loader?limit=2739&name=./images/[hash:8]-[name].[ext]']}
        ]
    },
    resolve: {
        alias: {
            "vue$" : "vue/dist/vue"
        }
    }
}

导入Vue包之后，即可通过new Vue()的构造函数实例Vue对象

导入不完整的Vue

当使用import Vue from 'vue'语句导入不完整Vue包时，可以在js入口文件外部引入Vue组件进行使用
在src目录下，即js入口文件同目录，新建一个以.vue结尾的vue组件文件
- 组件文件中包含三部分：
  - <template> : 该元素中包含组件的html模板
  - <script> : 该元素中包含组件的逻辑代码
  - <style> : 该元素中包含组件中会用到的样式
在js入口文件中使用import 组件名 from '组件文件名'将组件导入js文件
在js入口文件中使用new Vue()构造函数构造Vue实例，并将导入的组件通过Vue实例对象的render函数渲染到页面上
此时webpack还需使用vue-loader、vue-template-compiler对组件文件进行打包编译
- 使用cnpm install vue-loader vue-template-compiler -D命令进行相关loader的下载
- 在webpack.config.js配置文件中新增一个匹配规则：{test:/\.vue$/,use:'vue-loader'}
- 新版本需要的包有：vue-style-loader，并将其加入到处理.less文件的loader中
- 为了确保 JS 的转译应用到node_modules的Vue单文件组件，你需要通过使用一个排除函数将它们加入白名单：
```
{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: file => (
        /node_modules/.test(file) &&
        !/\.vue\.js/.test(file)
    )
}
```
在新版本中可能还要进行以下配置：
- 将定义过的其它规则复制并应用到.vue文件里相应语言元素的块
- 可以使用vue-loader/lib/plugin包的插件进行规则的复制及应用
- 通过使用const VueLoaderPlugin = require('vue-loader/lib/plugin')语句将插件导入到webpack.conf.js配置文件中
- 并在webpack.conf.js配置文件导出配置对象的plugins属性指定的插件数组中新增该插件
- 通过构造函数实例插件并添加到插件数组中
  示例如下：

// webpack.conf.js
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const vueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
    entry: path.join(__dirname,'./src/index.js'),
    output: {
        path: path.join(__dirname,'./dist'),
        filename: 'bundle.js'
    },
    plugins: [
        new htmlWebpackPlugin({
            template: path.join(__dirname,'./src/index.html'),
            filename: "index.html"
        }),
        new vueLoaderPlugin()
    ],
    module: {
        rules: [
            {test: /\.css$/, use: ['style-loader','css-loader']},
            {test: /\.less$/, use: ['vue-style-loader','css-loader','less-loader']},
            {test: /\.scss$/, use: ['style-loader','css-loader','sass-loader']},
            {
                test: /\.js$/,
                use: ['babel-loader'],
                exclude: file => (
                    /node_modules/.test(file) &&
                    !/\.vue\.js/.test(file)
                )
            },
            {test: /\.vue$/, use: 'vue-loader'},
            {test: /\.(jpg|png|gif|bmp|jpeg)$/, use: ['url-loader?limit=2739&name=./images/[hash:8]-[name].[ext]']}
        ]
    },
    resolve: {
        alias: {
            // "vue$" : "vue/dist/vue"
        }
    }
}

// index.js
import Vue from 'vue'
import './css/index.css'
import './css/index.less'
import './css/index.scss'
import login from './login.vue'
var vm = new Vue({
    el : '#app',
    data : {
        msg : 'Hello World!!!'
    },
    methods : {

    },
    render:function (createElement) {
        return createElement(login)
    }
})
class S{
    static info = {name:'name',age:5}
    S(){

    }
}
console.log(S.info)

<!-- login.vue -->
<template>
    <div>
        <h1>登录组件</h1>
    </div>
</template>
<script>

</script>
<style>

</style>

组件实例

在组件文件中的<script>元素中，使用export default{ }将组件的Vue实例向外导出，便于在js的入口文件中导入
- module.export = {}是node中导出模块的方式
- export default{}在一个文件中仅能用一次
- 在一个文件中既可以使用export default{}也可以同时使用export向外导出，如：export var title = 'Title'
  - 但使用export在导入时需使用导出的变量名接收，并且该变量名使用{ }包含，
  - 由于export可以在一个文件中多次使用，故可按需导出
  - 导出多个时，只是将其导出时的变量名添加到{ }中，且与其他变量名使用,分隔
  - 虽然export导入时只能按导出的变量名接收，但可以使用as将其取别名，然后使用别名接收，如：import {title sa t,content}
    例如：

<template>
    <div>
        <h1 @click="show">登录组件 - - - {{ msg }} </h1>
    </div>
</template>
<script>
    export default {
        data(){return {msg:'Hello World!!!'}},
        methods:{
            show(){
                console.log('run show()')
            }
        }
    }
</script>
<style>

</style>

webpack整合Vue路由

使用cnpm insatll vue-router -S命令进行本地生产环境依赖安装
在js入口文件中通过import vueRouter from 'vue-router'将其导入
使用Vue.use(vueRouter)启用安装路由到Vue上
- 通过<script>形式的使用则可不用此步
创建.vue组件文件，并导入到js入口文件中
创建路由对象，并设置路由匹配规则然后放入js入口文件的Vue实例对象中
在通过render函数渲染到页面的组件对应的组件文件中，通过在<template>元素中设置路由链接以及路由视图，达到路由的功能实现
例如：

import Vue from 'vue'
import vueRouter from 'vue-router'
import './css/index.css'
import './css/index.less'
import './css/index.scss'
import login from './login.vue'
import Account from "./components/Account.vue";
import Home from "./components/Home.vue";
Vue.use(vueRouter)
var router = new vueRouter({
    routes:[
        { path:'/Account' , component : Account },
        { path: '/Home' , component: Home}
    ]
})
var vm = new Vue({
    el : '#app',
    data : {
        msg : 'Hello World!!!'
    },
    methods : {

    },
    render:function (createElement) {
        return createElement(login)
    },
    router
})
class S{
    static info = {name:'name',age:5}
    S(){

    }
}
console.log(S.info)

<template>
    <div>
        <h1 @click="show">登录组件 - - - {{ msg }} </h1>
        <router-link to="/Account">Account</router-link>
        <router-link to="/Home">Home</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){return {msg:'Hello World!!!'}},
        methods:{
            show(){
                console.log('run show()')
            }
        }
    }
</script>
<style>

</style>

路由嵌套

在父路由的匹配规则中使用children属性指定子路由匹配规则的数组
例如：

import Vue from 'vue'
import vueRouter from 'vue-router'
import './css/index.css'
import './css/index.less'
import './css/index.scss'
import login from './login.vue'
import sublogin from './subcomponents/login.vue'
import Account from "./components/Account.vue";
import Home from "./components/Home.vue";
import register from "./subcomponents/register.vue";
Vue.use(vueRouter)
var router = new vueRouter({
    routes:[
        {
            path:'/Account' ,
            component : Account,
            children : [
                { path : 'login', component : sublogin },
                { path: 'register' , component: register}
            ]
        },
        { path: '/Home' , component: Home}
    ]
})
var vm = new Vue({
    el : '#app',
    data : {
        msg : 'Hello World!!!'
    },
    methods : {

    },
    render:function (createElement) {
        return createElement(login)
    },
    router
})
class S{
    static info = {name:'name',age:5}
    S(){

    }
}
console.log(S.info)

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

<script>
    export default {
        name: "Account"
    }
</script>

<style scoped>

</style>

webpack中Vue的样式

在组件文件中的style元素上添加scoped属性表示组件文件中定义的样式仅能是组件模板自己使用
- scope属性的使用范围还包括其子组件
style元素默认只支持普通样式，若要启用scss或less还需要再style属性上添加lang属性指定类型

抽离路由

将与路由相关的代码抽离js入口文件，封装到router.js文件中，并将router.js文件导入到js入口文件中
例如：

// index.js
import Vue from 'vue'

import './css/index.css'
import './css/index.less'
import './css/index.scss'
import login from './login.vue'
import router from "./router.js";
var vm = new Vue({
    el : '#app',
    data : {
        msg : 'Hello World!!!'
    },
    methods : {

    },
    render:function (createElement) {
        return createElement(login)
    },
    router
})
class S{
    static info = {name:'name',age:5}
    S(){

    }
}
console.log(S.info)


// router.js
import Vue from 'vue'

import vueRouter from 'vue-router'
import sublogin from './subcomponents/login.vue'
import Account from "./components/Account.vue";
import Home from "./components/Home.vue";
import register from "./subcomponents/register.vue";
Vue.use(vueRouter)
var router = new vueRouter({
    routes:[
        {
            path:'/Account' ,
            component : Account,
            children : [
                { path : 'login', component : sublogin },
                { path: 'register' , component: register}
            ]
        },
        { path: '/Home' , component: Home}
    ]
})
export default router