webpack8-Vue的runtime下渲染单文件组件

webpack8-Vue的runtime下渲染单文件组件


一、怎么在Vue的runtime下渲染单文件组件?

使用render来渲染单文件组件。

二、步骤

  1. 初始化npm

    npm init -y
    
  2. 安装

    npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D
    
  3. 安装Vue

    npm i vue -S
    
  4. 安装vue-loader,用来打包处理.vue文件

    npm i vue-loader vue-template-compiler -D
    
  5. 在package.json中添加

    "dev": "webpack-dev-server"
    
  6. 编写配置文件 webpack.config.js

    const path = require("path")
    const webpack = require("webpack")
    const htmlwebpackplugin = require("html-webpack-plugin")
    
    module.exports = {
        entry: path.join(__dirname, "./src/index.js"),
        output: {
            path: path.join(__dirname, "./dist"),
            filename: "index.js"
        },
        mode: "development",
        devServer: {
            open: true,
            port: 3000,
            contentBase: "src",
            hot: true
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new htmlwebpackplugin({
                template: "./src/index.html",
                filename: "index.html"
            })
        ],
        module: {
            rules: [
                {test: /\.vue$/, use: 'vue-loader'}
            ]
        }
    }
    
  7. 编写vue文件

    
    
    
    
    
    
  8. 编写html文件

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    head>
    <body>
    <div id="app">div>
    body>
    html>
    
  9. 编写入口文件index.js

    import Vue from "vue"
    import login from "./login.vue"
    
    var vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        render: element => element(login)
    })
    
  10. 运行

    npm run dev
    

    webpack8-Vue的runtime下渲染单文件组件_第1张图片


更新时间:2020-1-2

你可能感兴趣的:(Vue,webpack,vue,webpack)