前端学习(2268)vue造轮子之脚手架搭建

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>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box
    }
    
     :root {
        --button-height: 32px;
        --font-size: 14px;
        --font-size: white;
        --border-radius: 4px;
        --button-active-bg: #eee;
        --color: #333;
        --border-color: #999;
        --border-color-hover: #666;
        --button-bg: white;
    }
    
    #app {
        margin: 2px;
    }
    
    body {
        font-size: var(--font-size)
    }
</style>


<body>
    <div id="app">
        <g-button class="g-button"></g-button>
    </div>

    <script src="../src/main.js"></script>
    <script>
    </script>
</body>

</html>

main.js

import Vue from '../node_modules/vue/dist/vue'
import Button from "./components/HelloWorld";
Vue.component('g-button', Button)
new Vue({
    el: '#app'
})

helloworld.vue

<template>
  <button class="g-button">按钮</button>
</template>
<script>
export  default {


}
</script>
<style lang="scss">
.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);

}
.g-button:hover{
  border-color:var(--border-color-hover);
}
.g-button:active{
  background-color:var(--button-active-bg);
}
</style>

 

©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页