用vue做一个简单的button

项目准备

安装parcel

npm i -D parcel-bundler

-D的意思是给开发人员用的.

基本结构

index.html
src
    button.vue
    app.js 

在index.html中引入src/app.js, 而app.js中引入了vue和button.vue.

src下的app.js和button.vue

在src中写下button.vue, 这是一个单页应用

<template>
    <button class="g-button">按钮button>
template>
<script>
    export default {}
script>
<style lang="scss">
/*var后面的是变量, 在index.html中声明*/
    .g-button {
        font-size: var(--font-size);
        height: var(--button-height);
        padding: 0 1em;
        border-radius: var(--border-radius);
        border: 1px solid var(--border-color);
        background: var(--button-bg);
        &:hover {
            border-color: var(--border-color-hover);
        }
        &:active {
            background-color: var(--button-active-bg);
        }
        &:focus{
            outline: none;
        }
    }
style>

vue的单页应用有三个部分,