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

最新推荐文章于 2023-07-19 11:17:27 发布

Leisure Tea

最新推荐文章于 2023-07-19 11:17:27 发布

阅读量265

点赞数

分类专栏： Vue webpack 文章标签： vue webpack

本文链接：https://blog.csdn.net/SevenSongyun/article/details/103806764

版权

Vue 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

webpack

11 篇文章 0 订阅

订阅专栏

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

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

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

二、步骤

初始化npm
```
npm init -y
```

安装

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

安装Vue
```
npm i vue -S
```
安装vue-loader，用来打包处理.vue文件
```
npm i vue-loader vue-template-compiler -D
```
在package.json中添加
```
"dev": "webpack-dev-server"
```

编写配置文件 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'}
        ]
    }
}

编写vue文件

<template>
    <div>
        <h1>登录组件</h1>
    </div>
</template>

<script></script>

<style></style>

编写html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

编写入口文件index.js

import Vue from "vue"
import login from "./login.vue"

var vm = new Vue({
    el: "#app",
    data: {},
    methods: {},
    render: element => element(login)
})

运行
```
npm run dev
```

更新时间：2020-1-2

Leisure Tea

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack8-Vue的runtime下渲染单文件组件

webpack8-Vue的read-only下渲染单文件组件一、怎么在Vue的read-only下渲染单文件组件？使用render来渲染单文件组件。二、步骤初始化npmnpm init -y安装npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D安装Vuenpm i vue -S...
复制链接

扫一扫