美文网首页
Vue项目如何一步步创建一个界面并引入

Vue项目如何一步步创建一个界面并引入

作者: 三月木头 | 来源:发表于2020-09-16 15:26 被阅读0次

流程

  1. 写入的界面 三个对应的元素<template> <script lang="ts"> <style lang="scss" scoped> 要注意其中lang的写法。然后就是倒入的界面的父视图是Vue,所以要注意倒入import { Component, Prop, Vue } from "vue-property-decorator"; 这个倒入
<template>
    <div class="g-mask-view flex-center" @click.self="$emit('close')">
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
export default class CrossPositionTipApp extends Vue {
      private remain: boolean = true;
}
</script>

<style lang="scss" scoped>
.cross-modal__view {
    padding: 24px 28px 26px;
    width: 352px;
    background: #2d393d;
    border-radius: 8px;
    color: #9da3a6;
    font-size: 14px;
    background: red;
}
</style>
  1. 我们还要把一些组件写入到spring控制器进行管理。
@Component({
    components: {
        OrderInput
    }
})
  1. 展示倒入StopPnl.vue的时候,可以倒入<stop-pnl>形式或者<StopPnl>

相关文章