parcel打包vue

stick發表於2018-04-17
Vue

新建資料夾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

相關文章