在vue中結合render函數渲染指定的組件到容器中

時間 2019-11-11

標籤 vue 結合 render 函數渲染指定組件容器简体版

原文原文鏈接

一、demojavascript

項目結構：css

　　index.htmlhtml

<!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.jsvue

// 這是項目的入口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);
    }

});

<template>
    <h1>註冊組件</h1>
</template>

<script>
</script>

<style>
</style>

　　package.jsonnode

{
  "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.jsjquery

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()
             ],
};

二、遇到的問題webpack

　　2.一、webpack版本是3.6.0，與css-loader不兼容web

　　2.二、下載安裝vue-loader之後，報錯缺乏相關插件 include VueLoaderPlugin in your webpack config
       const { VueLoaderPlugin } = require('vue-loader');
       ……
       plugins: [
               new VueLoaderPlugin(),
           ],npm

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。