parcel打包vue

最新推荐文章于 2025-08-15 09:01:53 发布

转载最新推荐文章于 2025-08-15 09:01:53 发布 · 203 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000014435154

文章标签：

#javascript #json #ViewUI

本文介绍如何使用Parcel构建工具快速搭建并运行一个简单的Vue.js应用程序。从初始化项目到编写基本的Vue组件，再到最终使用Parcel进行打包部署，文章提供了完整的步骤说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新建文件夹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打包