用vue做一个简单的button

版权声明： https://blog.csdn.net/Helloyongwei/article/details/81835841

项目准备

安装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的单页应用有三个部分, <template>, <script>和<style>.
注意style中我们用的时sass语法.

在app.js中我们需要引入vue和button.vue. 并将button组件命名为g-button, 这样就可以在index.html中世界使用g-button了(当然index.html需要引入)

import Vue from 'vue'
import Button from './button'

Vue.component('g-button', Button)

var app = new Vue({
    el: '#app'
})

index.html

最后在index.html中引入app.js

<div id="app">
    <g-button></g-button>
</div>
<script src="./src/app.js"></script>

不要忘了给其样式, 这个样式有button.vue中要用到的变量

:root{
    --font-size: 14px;
    --button-height: 32px;
    --button-bg: white;
    --button-active-bg: #eee;
    --border-radius: 4px;
    --color: #333;
    --border-color: #999;
    --border-color-hover: #666;
}
* {margin: 0; padding: 0; box-sizing: border-box;}
#app {
    margin: 20px;
}
body {
    font-size: var(--font-size);
}

执行

我们已经安装了parcel, 那么我们就可以了使用她来构建我们的应用.

./node_modules/.bin/parcel --no--cache index.html 

执行上面的代码, 按照提示打开浏览器, 我们就可以了看到按钮了.

--no-cache是为了不使用缓存.
./node_modules/.bin/parcel 也可以是引用npx parcel来代替.

最后的执行结果如图:

源代码可以在这里查看:
https://github.com/helloyongwei/vue-example-wheels