parcel打包vue

時間 2019-12-07

標籤 parcel 打包 vue 简体版

原文原文鏈接

新建文件夾parcel-vuehtml

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

安裝依賴vue

yarn add vue parcel-bundler vue-template-compiler

新建index.htmljson

//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.vueapp

//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打包ui

parcel index.html

相關標籤/搜索