1、demo

项目结构：

　　

　　index.html

<!DOCTYPE html>

<html>

<head>

    <title>标题</title>

    <meta charset="utf-8">

</head>

<body>

    <h3 class="blue">h3标签内的文本</h3>

    <ul>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

        <li>这是一个li标签</li>

    </ul>

    <div class="img"></div>

    <div id="app">

        <h3> {{ msg }} </h3>

        <login></login>

    </div>

    <script type="text/javascript" src="../dist/bundle.js"></script>

</body>

</html>

　　main.js

// 这是项目的入口js文件

// 导入jquery, 这是ES6中导入模块的语法

import $ from 'jquery';

import './css/common.css';

// 注意：在webpack中，使用下面这句导入vue，功能不完整，只提供runtime-only的方式，并没没有提供向网页中那样的使用方式

//import Vue from 'vue';

// 导入完整的vue

import Vue from '../node_modules/vue/dist/vue.js';

// 导入register组件

import register from './components/register.vue';

// 默认webpack无法处理.vue文件，要安装第三方loader

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

$(function() {

    $('li:odd').css('backgroundColor','yellow');

    $('li:even').css('backgroundColor','#eee');

});

// 组件的模板对象

var login = {

    template: '<h1>登录组件</h1>'

};

var vm = new Vue({

    el: '#app',

    data: {

        msg: 'hello vue'

    },

    components: {

        login

    },
　　 // render：将register组件渲染到el指定的div#app中（div#app中其他内容被覆盖）
　　 // 简写render: c => c(register)

    render: function (createElements) {

        return createElements(register);

    }

});

　　register.vue

<template>

    <h1>注册组件</h1>

</template>

<script>

</script>

<style>

</style>

　　package.json

{

  "name": "webpack-study1",

  "version": "1.0.0",

  "description": "",

  "main": "index.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {

    "jquery": "^3.3.1",

    "vue": "^2.6.10"

  },

  "devDependencies": {

    "css-loader": "^0.28.0",

    "file-loader": "^1.1.11",

    "style-loader": "^0.21.0",

    "url-loader": "^1.0.1",

    "vue-loader": "^15.2.4",

    "vue-template-compiler": "^2.5.16",

    "webpack": "^3.6.0"

  }

}

　　webpack.config.js

var path = require('path');

const { VueLoaderPlugin } = require('vue-loader');

// 通过node的模块操作，向外暴露一个配置对象

module.exports = {

    entry: path.join(__dirname, './src/main.js'), // 入口，表示要使用webpack打包哪个文件

    output: {   // 出口

        path: path.join(__dirname, './dist'),

        filename: 'bundle.js'

    },

    module: {  //用于配置所有第三方模块加载器

        rules: [  //所有第三方模块的匹配规则

            // 首先安装loader: npm i style-loader css-loader -D, 然后配置

            { test:/\.css$/, use: ['style-loader','css-loader'] },

            // 首先安装loader: npm i url-loader file-loader -D, 然后配置

            {

                test:/\.(jpg|png|gif|bmp|jpeg)$/,

                use: ['url-loader']

                // limit单位byte，如果图片大于等于limit给定值，则不会被转为base64格式字符串

                // name=[name].[ext]:打包的图片原名相同

                // use: ['url-loader?limit=1000&name=[name].[ext]']

            },

            // 首先安装loader: npm i vue-loader vue-template-compiler -D, 然后配置

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

        ]

    },

    plugins: [

                new VueLoaderPlugin()

             ],

};

2、遇到的问题

　　2.1、webpack版本是3.6.0，与css-loader不兼容

　　

　　2.2、下载安装vue-loader以后，报错缺少相关插件 include VueLoaderPlugin in your webpack config
        const { VueLoaderPlugin } = require('vue-loader');
        ……
        plugins: [
                new VueLoaderPlugin(),
            ],

在vue中结合render函数渲染指定的组件到容器中的更多相关文章

  1. render 函数渲染表格的当前数据列使用

    columns7: [ { title: '编号', align: 'center', width: 90, key: 'No', render: (h, params) => { return ...

  2. iview table表中使用render函数props传值出现问题

    使用iview中的table表格时避免不了使用render函数渲染自定义内容,或者渲染组件.但是在正常使用时出现了props传值无法识别, 按照官网介绍使用props如下: render: (h, p ...

  3. 使用render函数渲染组件

    使用render函数渲染组件:https://www.jianshu.com/p/27ec4467a66b

  4. iview table中的render函数使用

    1.表格列数据内容过多可以用以下两个属性解决: ellipsis:"true', tooltip:true 使每个列的内容如果过多的话变为省略号 2.table中的render函数(实现根据 ...

  5. vue中的render函数介绍

    简介:对于不了解slot的用法(参考:大白话vue-slot的用法)又刚接触render函数的同学来说,官网的解释无疑一脸懵逼,这里就整理下个人对render函数的理解 问题: 1.render函数是 ...

  6. Vue中的render函数随笔

    使用vue-cli创建项目后,再main.js里面有这样一段代码: new Vue({ render:h => h(App) }).$mount('#app') render函数是渲染一个视图, ...

  7. Vue.js之render函数基础

    刚才翻了一下博客,才发现,距离自己写的第一篇Vue的博客vue.js之绑定class和style(2016-10-30)已经过去一年零两天.这一年里,自己从船厂的普通技术员,成为了一个微型不靠谱创业公 ...

  8. 19 使用Vue实例的render方法渲染组件

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Vue2.x中的Render函数

    Render函数是Vue2.x版本新增的一个函数:使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算.通过使用createElement(h)来创建dom节点.createElem ...

随机推荐

  1. Hand on Machine Learning第三章课后作业(1)：垃圾邮件分类

    import os import email import email.policy 1. 读取邮件数据 SPAM_PATH = os.path.join( "E:\\3.Study\\机器 ...

  2. 【神经网络与深度学习】在Windows8.1上用VS2013编译Caffe并训练和分类自己的图片

    最近想熟悉一下深度学习,体验了一下Caffe,简单写写训练和分类的过程: 1.下载Caffe VS2013工程:https://github.com/Microsoft/caffe 2. 解压并用VS ...

  3. 【神经网络与深度学习】【CUDA开发】【VS开发】Microsoft官方移植了Caffe配置过程说明

    想在Windows平台使用Caffe,吭哧吭哧下载了半天第三方库,后来忽然发现Microsoft官方移植了Caffe,配置起来简直太省心了- 1. 从Microsoft官方Github上下载Caffe ...

  4. 完全卸载oracle11g步骤（不可行，直接用oracle自用删除就行）

    完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->oracle - OraHome ...

  5. 头大！RabbitMQ 和 Kafka 到底怎么选？

    前言 开源社区有好多优秀的队列中间件,比如RabbitMQ和Kafka,每个队列都貌似有其特性,在进行工程选择时,往往眼花缭乱,不知所措. 对于RabbitMQ和Kafka,到底应该选哪个? Rabb ...

  6. C++中的单例类模板

    1,本节课讲述单例类模式,实现并抽取相关代码实现单例类模板,在以后开发工作 中,如果想要使用单例模式,那么直接使用今天开发的单例类模板就可以: 2,需求的提出: 1,在架构设计时,某些类在整个系统生命 ...

  7. vmware中的虚拟linux配置多块网卡

    在使用vm上运行多个linux系统,来模拟LVS负载均衡实验中.需要在lvs服务器中设置两块网卡,发现可以在vm给虚拟机添加任意多个网卡. 方法: 不要启动Linux,在上面的菜单项中选择: “VM— ...

  8. webpack入门学习手记（一）

    本人微信公众号:前端修炼之路,欢迎关注. 之前用过gulp.grunt,但是一直没有学习过webpack.这两天刚好有时间,学习了下webpack.webpack要想深入研究,配置的东西比较多,网上的 ...

  9. numpy.hstack(tup)

    numpy.hstack(tup) Stack arrays in sequence horizontally (column wise). Take a sequence of arrays and ...

  10. css实现两个div并排等高（一个div高度随另一个高度变化而变化）

    方法一.两个div都设置 display: table-cell; 方法二.父级div设置 display: -webkit-box;