当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 荐 关于Vue.js的引入方式（页面引入与webpack构建引入）

荐 关于Vue.js的引入方式（页面引入与webpack构建引入）

2020年07月11日  | 移动技术网IT编程  | 我要评论

目录

 

一、页面引入方式：

组件的注册引入：

采用render函数来渲染组件：

二、webpack引入方式

vue的安装：         

1、组件的注册引入

2、render函数渲染方式

三、使用.vue自定义组件文件

一、页面引入方式：

组件的注册引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<script>
    $(function () {   //保证页面加载完后才加载js，不然#app会报错找不到
        //组件定义
        const login = {
            template:"<h2>vue的使用</h2>"
        }
        var vm = new Vue({
            el:"#app",
            data:{},
            components:{  //组件的注册
                login
            }
        })
    })
</script>
<body>
<div id="app">
 //组件的使用
 <login></login>
</div>
</body>
</html>

采用render函数来渲染组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
</head>
<script>
    $(function () {   //保证页面加载完后才加载js，不然#app会报错找不到
        //组件定义
        const login = {
            template:"<h2>vue的使用</h2>"
        }
        var vm = new Vue({
            el:"#app",
            data:{},
            render:function(createElements) { //render函数渲染组件并输出替换掉app容器
                return createElements(login);
            }
        })
    })
</script>
<body>
//render渲染方式此时会将app这个容器完全替换
<div id="app"></div>
</body>
</html>

两者的区别：render函数渲染会替换掉app容器，html源码中是没有div标签了，而组件注册方式会将组件放于容器中

二、webpack引入方式

vue的安装：         

cnpm i vue -D

1、组件的注册引入

     import Vue from  'vue'默认导入的是dist/vue.runtime.common.js这个js文件（vue/package.json中的“main"参数指定），此文件属于runtime-only模板，功能不全，因此我们需要指定其他的js:
1.  import Vue from  'vue/dist/vue.js'

2.  webpack.config.js中增加节点

     resolve: {
        alias: {   //vue导包别名
            'vue$':'vue/dist/vue.js'
        }
      }

3.修改vue包中的webpackage.json中的'main'字段

推荐第二种方式
import $ from 'jquery'
//vue模块的package.json的main字段默认为runtime（运行）模式， 指向了"dist/vue.runtime.common.js"位置。
//修改为compiler（模板）模式
import Vue from  'vue/dist/vue.js'

$(function () { //页面加载完后才会加载
    var login = {  //定义组件
        template:"<h2>vue的使用</h2>"
    }
    var vm = new Vue({
        el:"#app",
        data:{},
        method:{},
        components:{ //组件注册
            login
        }
    })
})

html中
<div id="app">
    <login></login>
</div>

此方式同前面一样，组件注册方式将组件插入到了容器中。

2、render函数渲染方式

import $ from 'jquery'
//vue模块的package.json的main字段默认为runtime（运行）模式， 指向了"dist/vue.runtime.common.js"位置。
//修改为compiler（模板）模式
import Vue from  'vue/dist/vue.js'

$(function () { //页面加载完后才会加载
    var login = {  //定义组件
        template:"<h2>vue的使用</h2>"
    }
    var vm = new Vue({
        el:"#app",
        data:{},
        method:{},
        render:function (createElements) { //组件渲染
            return createElements(login)
        }
    })
})

html中，此div会被组件完全替换
<div id="app">
   
</div>

此时，html中的app容器会被组件完全替换

三、使用.vue自定义组件文件

组件定义我们现在使用后缀为.vue的组件文件来定义，此时，由于webpack原生只支持.js，因此我们要使用第三方loader来支持.vue的解析。安装第三方loader:

cnpm i vue-loader vue-template-compiler -D

webpack.config.js中配置规则：

{ test: /\.vue$/, use: 'vue-loader'},

注：由于vue15.0之后需要手动添加plugin配置，webpack.config.js中

//配置VueLoaderPlugin插件
//注册const后的大括号
const {VueLoaderPlugin} = require('vue-loader')

module.exports = {
........
   plugins: [
      new VueLoaderPlugin()
    ]
}

定义组件文件login.vue

<template>
    <h1>这是vue自定义组件渲染</h1>
</template>

<script></script>

<style></style>

    main.js引入login.vue

import $ from 'jquery'
//vue模块的package.json的main字段默认为runtime（运行）模式， 指向了"dist/vue.runtime.common.js"位置。
//修改为compiler（模板）模式
import Vue from  'vue/dist/vue.js'

//引入自定义.vue组件文件
import login from './vue/login.vue'
$(function () {
    var vm = new Vue({
        el:"#app",
        data:{},
        method:{},
        components:{  //组件注册方式，添加到容器中
            login
        }
        //组件渲染方式，替换容器
        // render:function (createElements) {
        //     return createElements(login)
        // }
    })
})

 

本文地址：https://blog.csdn.net/u011573295/article/details/107249207

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网