parcel打包vue

2024年2月9日 169次阅读 来源: stick

新建文件夹parcel-vue

yarn init -y //初始化package.json

安装依赖

yarn add vue parcel-bundler vue-template-compiler

新建index.html

//index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="./src/index.js"></script>
</body>
</html>

新建文件夹src，src下新建index.js、app.vue

//index.js

import Vue from 'vue'
import App from './app.vue'

new Vue({
    el: '#root',
    render: h => h(App)
})
//app.vue
<template>
    <div class="vuedemo">{{demo}}</div>
</template>

<script>
export default {
    data () {
        return {
            demo:"you win"
        }
    }
}
</script>

<style>
.vuedemo{
    color: #333;
    font-size: 36px;
}
</style>

使用parcel打包

parcel index.html
    原文作者：stick
    原文地址: https://segmentfault.com/a/1190000014435154
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞