Naive UI使用案例 vue3 ts 个人中心页面（1）

已于 2022-10-14 15:30:00 修改
阅读量2.5k 收藏 5
点赞数
分类专栏： vue3 node 笔记 文章标签： vue.js 前端 javascript html
于 2022-10-13 17:59:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ccyynmb/article/details/127305204
版权
笔记 同时被 3 个专栏收录
11 篇文章 0 订阅
订阅专栏
vue3
3 篇文章 0 订阅
订阅专栏
node
3 篇文章 0 订阅
订阅专栏

今天的文章是关于nviewui的使用，结合案例。

但是我的是平板端的，nviewui没法兼容vw啊。所以我们不用组件，手写一个。大部分都是手写的，没办法，要兼容。

用的是flex来让他们的位置都处于一个比较合适的地方，直接上代码。

我的图片是上传到七牛云的，就不方便展示了~

css有变量，是在全局变量里定义了，要自己修改。

效果：

html

    <div class="header">

      <div class="info">

        <div class="avatar"></div>

        <div class="infoname">

          <div class="name">Ethan.</div>

          <div class="number">18757273610</div>

        </div>

      </div>

      <div class="edit">

        <img

          src="http://123.png"

          class="editimg"

        />

      </div>

css

.avatar {
  position: relative;
  left: 0.57321vw;
  top: 0vw;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background: v-bind('theme.background');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  border: 0.2vw solid @text-color-2;
}

.header {
  display: flex;
  justify-content: space-between;
  padding-top: 3vw;
  padding-left: 3vw;
}

.info {
  display: flex;
}
.infoname > div {
  margin-left: 5vw;
  margin-top: -1%;
}
.edit {
  border-radius: 50%;
  width: 3vw;
  height: 3vw;
  background-color: @text-color-4;
  // 图片水平居中
  text-align: center;
  box-sizing: border-box;
  margin-right: 3vw;
}

.editimg {
  box-sizing: border-box;
  margin-top: 18%;
}

.contant {
  background-image: linear-gradient(@text-color, white, white, white);
  width: 100%;
  height: 100%;
}

.name {
  color: @text-color-7;
  font-family: @font-family-2;
  font-size: 2vw;
  font-weight: 400;
}

.number {
  color: @text-color-3;
  font-family: @font-family-3;
  font-size: 1.4vw;
  font-weight: 400;
}

js

const theme = {
  background: 'url(123.png) no-repeat'
};

然后我们来写这个功能

这个功能比较普通。

html

    <div class="money">
      <div>
        <div class="number moneynumber">银行卡消费</div>
        <div class="name">￥2686</div>
      </div>
      <div>
        <div class="number moneynumber">可用余额</div>
        <div class="name">￥0.00</div>
      </div>
      <div>
        <div class="number moneynumber">累计服务</div>
        <div class="name">￥1196.33</div>
      </div>
    </div>

css

.money {
  display: flex;
}

.name {
  color: @text-color-7;
  font-family: @font-family-2;
  font-size: 2vw;
  font-weight: 400;
}

.number {
  color: @text-color-3;
  font-family: @font-family-3;
  font-size: 1.4vw;
  font-weight: 400;
}

.moneynumber {
  color: @text-color-5;
}

 然后来写这个功能。

 我先写一个对话框吧

发现css这个很常用，封装了全局css

.between{
  display: flex;
  justify-content: space-between;
}

 html

    <div class="use">
      <div class="div between">
        <div class="skinadress">
          <div class="skin">皮肤管理</div>
          <div class="adress">上研美丽+(万和城店)</div>
        </div>
        <div class="member">
          <div class="img">
            <img
              src="123.png"
            />
          </div>
          <div class="divs">普通会员</div>
        </div>
      </div>
    </div>

css

.div {
  width: 90%;
  height: 10vw;
  border: 0.2vw solid @text-color-2;
  position: relative;
  margin-left: 3vw;
  border-top-right-radius: 2vw;
  border-top-left-radius: 2vw;
  background-color: @background-7;
  margin-top: 3vw;
}
.div::before {
  content: '';
  width: 0;
  height: 0;
  border: 2vw solid;
  position: absolute;
  bottom: -4vw;
  left: 50%;
  border-color: @background-7 transparent transparent;
}
.skin {
  color: @text-color-8;
  font-family: @font-family-3;
  font-size: 1.4vw;
  font-weight: @font-weight-1;
}

.adress {
  color: @text-color-4;
  font-family: @font-family-2;
  font-size: 1.8vw;
  font-weight: @font-weight-1;
}

.member {
  color: @text-color-4;
  font-family: @font-family-3;
  font-size: 1.2vw;
  font-weight: @font-weight-1;
  background-color: @background-8;
  width: 8vw;
  height: 3vw;
  text-align: center;
  margin-top: 3vw;
  margin-right: 3vw;
  display: flex;
}

.member > .img {
  margin-top: 5%;
  margin-left: 0.5vw;
}
.member > .divs {
  margin-top: 7%;
  margin-left: 0.2vw;
}

.skinadress {
  margin-top: 2vw;
  margin-left: 3vw;
}

写完了，接下来我们写这个

也非常简单 - - 感觉在干重复的事情。

css

.module {
  display: flex;
  justify-content: space-between;
  margin-left: 5vw;
  margin-top: 5vw;
  margin-right: 7vw;
}

.modulenumber {
  color: @text-color-7;
  margin-left: -1vw;
}

 html

    <div class="module">
      <div>
        <div>
          <img src="htt1%E5%AF%B9%E6%AF%94.png" />
        </div>
        <div class="number modulenumber">肌肤变化</div>
      </div>
      <div>
        <div>
          <img src="h1A2%E6%9C%8D.png" />
        </div>
        <div class="number modulenumber">专属客服</div>
      </div>
      <div>
        <div>
          <img src="h1hd-b19F%E6%97%A5.png" />
        </div>
        <div class="number modulenumber">顾客生日</div>
      </div>
      <div>
        <div>
          <img src="ht1%E6%98%8E%E7%BB%86.png" />
        </div>
        <div class="number modulenumber">积分明细</div>
      </div>
    </div>

果然一直干活就会感觉累 应该干一小时摸鱼一会儿才效率最快。唉，可是正在赶进度呢，周五的时候做完吧。

下周新的ui要来了。

- - 先写个大概的静态页面，后面会增加功能的，还有提取数据。这篇文章讲的就是静态页面。之后再开个新的好了。

感觉ui切割的不行，不太会切，一会去学习一下好了。

html

    <div class="block between">
      <div class="child">
        <div class="name">预购&次卡</div>
        <div style="display: flex">
          <div class="font">4预购 ></div>
          <div class="underline">
            <n-divider vertical />
          </div>
          <div class="font">0次卡 ></div>
        </div>
      </div>
      <div class="child">
        <div class="name">可用积分</div>
        <div class="between">
          <div class="font">11.96</div>
          <div class="font">详情 ></div>
        </div>
      </div>
    </div>

css

.block {
  margin-left: 5vw;
  margin-right: 5vw;
  margin-top: 5vw;
}
.block > .child {
  background-color: @background-9;
  width: 40%;
  height: 8vw;
  margin-right: 4vw;
  box-sizing: border-box;
  padding-left: 5vw;
  padding-top: 1.5vw;
}

.font {
  color: @text-color-9;
  font-family: @font-family-3;
  font-size: 1.4vw;
  font-weight: @font-weight-1;
  margin-right: 3vw;
}

/deep/ .n-divider.n-divider--vertical {
  display: inline-block;
  height: 1.4vw;
  margin: 0.5vw 3vw 0 3vw;
  vertical-align: middle;
  width: 1px;
}
/deep/ .n-divider.n-divider--vertical {
  background-color: @text-color-9;
}

接下来要做这个

 - - 好累哦  加急把代码写完吧

主要是心累吧  精神上疲惫。

终于要用到组件了，但是和ui不太符合。那就deep修改一下吧。

 用到的是标签页的组件 - -

差不多样式就好了  之后ui还要修改呢

 html

    <div class="tab">
      <n-tabs type="segment" tab-style="--n-tab-color-segment: white;--n-tab-border-radius: 4vw;">
        <n-tab-pane name="chap1" tab="顾客行为记录"> 123 </n-tab-pane>
        <n-tab-pane name="chap2" tab="顾客消费记录"> 456 </n-tab-pane>
      </n-tabs>
    </div>

css

.tab {
  margin-left: 5vw;
  margin-right: 5vw;
  margin-top: 5vw;
}
/deep/ .n-tabs .n-tabs-rail {
  background-color: rgb(249, 242, 236);
  border-radius: 4vw;
}
/deep/ .n-tabs .n-tabs-nav {
  line-height: 3;
}

/deep/ .n-tabs .n-tabs-tab .n-tabs-tab__label {
  color: @text-color-7;
  font-family: @font-family-3;
  font-size: 1.5vw;
  font-weight: @font-weight-1;
}
/deep/ .n-tabs .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab.n-tabs-tab--active {
  box-shadow: 0px 2px 4px rgba(214, 150, 0, 0.36);
}

- - 难怪有的就是出不来 浏览器解析的阴影数据 看都没看直接复制，我也是个呆瓜，唉。根本不一样。

 接下来写这个功能吧 - -

用这个吧  emm快写完了  想休息 - -

html

  <n-timeline :icon-size="20">
              <n-timeline-item type="warning">
                <template #icon>
                  <img src="http://rjh8q4767.hd-bkt.clouddn.com/ty.png" />
                </template>
                <div class="name">2022年08月24日</div>
                <div>
                  <div class="number actives fontavtive">浏览了“6周年VIP回馈礼B"活动</div>
                  <div class="imgactive">
                    <img src="1111/imgpic.png" style="height: 90%" />
                  </div>
                </div>
              </n-timeline-item>
              <n-timeline-item type="warning">
                <template #icon>
                  <img src="111/ty.png" />
                </template>
                <div class="name">2022年08月24日</div>
                <div>
                  <div class="number actives fontavtive">浏览了“6周年VIP回馈礼B"活动</div>
                  <div>
                    <img src="111.png" style="height: 100%" />
                  </div>
                </div>
              </n-timeline-item>
            </n-timeline>

.imgactive {
  width: 30vw;
  height: 10vw;
  background-color: @background-9;
  text-align: center;
  padding-top: 1%;
}

.fontavtive {
  font-size: 1.4vw;
}
.actives {
  margin-top: 1vw;
  margin-bottom: 1vw;
}

 。。。。写完了  就说手机端转pc端设计看上去就很奇怪

发现nviewUI官网关于这个组件介绍，不是很正经。（吐槽）

全套ui

 

 

 

<template>
  <n-scrollbar style="max-height: 100%">
    <div class="contant">
      <div class="header between">
        <div class="info">
          <div class="avatar"></div>
          <div class="infoname">
            <div class="name">Ethan.</div>
            <div class="number">18757273610</div>
          </div>
        </div>
        <div class="edit">
          <img
            src="http://rjh8q4767.hd-bkt.clouddn.com/%E7%BC%96%E8%BE%91%E6%92%B0%E5%86%99_writing-fluently.png"
            class="editimg"
          />
        </div>
      </div>
      <div class="money">
        <div>
          <div class="number moneynumber">银行卡消费</div>
          <div class="name">￥2686</div>
        </div>
        <div>
          <div class="number moneynumber">可用余额</div>
          <div class="name">￥0.00</div>
        </div>
        <div>
          <div class="number moneynumber">累计服务</div>
          <div class="name">￥1196.33</div>
        </div>
      </div>
      <div class="use">
        <div class="div between">
          <div class="skinadress">
            <div class="skin">皮肤管理</div>
            <div class="adress">上研美丽+(万和城店)</div>
          </div>
          <div class="member">
            <div class="img">
              <img
                src="http://rjh8q4767.hd-bkt.clouddn.com/%E8%BD%BB%E4%BC%9A%E5%91%98_light-member%E5%A4%87%E4%BB%BD.png"
              />
            </div>
            <div class="divs">普通会员</div>
          </div>
        </div>
      </div>
      <div class="module">
        <div>
          <div>
            <img src="http://rjh8q4767.hd-bkt.clouddn.com/%E5%88%87%E7%89%87%E8%82%8C%E8%82%A4%E5%8F%98%E5%8C%96.png" />
          </div>
          <div class="number modulenumber">肌肤变化</div>
        </div>
        <div>
          <div>
            <img src="http://rjh8q4767.hd-bkt.clouddn.com/%E4%B8%93%E5%B1%9E%E5%AE%A2%E6%9C%8D%E5%88%87%E5%9B%BE.png" />
          </div>
          <div class="number modulenumber">专属客服</div>
        </div>
        <div>
          <div>
            <img src="http://rjh8q4767.hd-bkt.clouddn.com/%E9%A1%BE%E5%AE%A2%E7%94%9F%E6%97%A5%E5%88%87%E5%9B%BE.png" />
          </div>
          <div class="number modulenumber">顾客生日</div>
        </div>
        <div>
          <div>
            <img
              src="http://rjh8q4767.hd-bkt.clouddn.com/%E7%A7%AF%E5%88%86%E6%98%8E%E7%BB%86%E5%88%87%E5%9B%BE1.png"
            />
          </div>
          <div class="number modulenumber">积分明细</div>
        </div>
      </div>
      <div class="block between">
        <div class="child">
          <div class="name">预购&次卡</div>
          <div style="display: flex">
            <div class="font">4预购 ></div>
            <div class="underline">
              <n-divider vertical />
            </div>
            <div class="font">0次卡 ></div>
          </div>
        </div>
        <div class="child">
          <div class="name">可用积分</div>
          <div class="between">
            <div class="font">11.96</div>
            <div class="font">详情 ></div>
          </div>
        </div>
      </div>
      <div class="tab">
        <n-tabs type="segment" tab-style="--n-tab-color-segment: white;--n-tab-border-radius: 4vw;">
          <div style="width"></div>
          <n-tab-pane name="chap1" tab="顾客行为记录">
            <!-- 时间线 -->
            <n-timeline :icon-size="20">
              <n-timeline-item type="warning">
                <template #icon>
                  <img src="http://rjh8q4767.hd-bkt.clouddn.com/ty.png" />
                </template>
                <div class="name time fontavtive">2022年08月24日</div>
                <div class="fontavtive">
                  <div class="number actives">浏览了“6周年VIP回馈礼B"活动</div>
                  <div class="imgactive">
                    <img src="http://rjh8q4767.hd-bkt.clouddn.com/imgpic.png" style="height: 90%" />
                  </div>
                </div>
              </n-timeline-item>
              <n-timeline-item type="warning">
                <template #icon>
                  <img src="http://rjh8q4767.hd-bkt.clouddn.com/ty.png" />
                </template>
                <div class="name time fontavtive">2022年08月24日</div>
                <div class="fontavtive">
                  <div class="number actives">浏览了“6周年VIP回馈礼B"活动</div>
                  <div>
                    <img src="http://rjh8q4767.hd-bkt.clouddn.com/cfj.png" style="height: 100%" />
                  </div>
                </div>
              </n-timeline-item>
            </n-timeline>
          </n-tab-pane>
          <n-tab-pane name="chap2" tab="顾客消费记录"> 456 </n-tab-pane>
        </n-tabs>
      </div>
      <div class="drawer">
        <div style="display: flex">
          <n-button color="rgb(255,247,238)" class="service" style="margin-right: 3vw">
            <template #icon>
              <img src="http://rjh8q4767.hd-bkt.clouddn.com/%E6%96%87%E6%A1%A3%E6%88%90%E5%8A%9F_doc-success.png" />
            </template>

            <span class="font">服务开单</span>
          </n-button>
          <n-button color="rgb(255,247,238)" class="service">
            <template #icon>
              <img src="http://rjh8q4767.hd-bkt.clouddn.com/%E6%96%87%E6%A1%A3%E6%88%90%E5%8A%9F_doc-success.png" />
            </template>

            <span class="font">服务开单</span>
          </n-button>
        </div>
      </div>
    </div>
  </n-scrollbar>
</template>
<script setup lang="ts">
import { defineComponent, reactive, getCurrentInstance, provide, ref } from 'vue';
// define props & emit
// init & data
const theme = {
  background: 'url(http://rjh8q4767.hd-bkt.clouddn.com/%E4%BD%8D%E5%9B%BE.png) no-repeat'
};
const up = () => {};
</script>
<style lang="less" scoped>
.div {
  width: 90%;
  height: 10vw;
  border: 0.2vw solid @text-color-2;
  position: relative;
  margin-left: 3vw;
  border-top-right-radius: 2vw;
  border-top-left-radius: 2vw;
  background-color: @background-7;
  margin-top: 3vw;
}
.div::before {
  content: '';
  width: 0;
  height: 0;
  border: 2vw solid;
  position: absolute;
  bottom: -4vw;
  left: 50%;
  border-color: @background-7 transparent transparent;
}
.avatar {
  position: relative;
  left: 0.57321vw;
  top: 0vw;
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background: v-bind('theme.background');
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
  border: 0.2vw solid @text-color-2;
}

.header {
  padding-top: 3vw;
  padding-left: 3vw;
}

.money {
  display: flex;
}
.money > div {
  margin-left: 5vw;
  margin-top: 2vw;
}
.info {
  display: flex;
}
.infoname > div {
  margin-left: 5vw;
  margin-top: -1%;
}
.edit {
  border-radius: 50%;
  width: 3vw;
  height: 3vw;
  background-color: @text-color-4;
  // 图片水平居中
  text-align: center;
  box-sizing: border-box;
  margin-right: 3vw;
}

.editimg {
  box-sizing: border-box;
  margin-top: 18%;
}

.contant {
  background-image: linear-gradient(@text-color, white, white, white);
  width: 100%;
  height: 100%;
  margin-bottom: 10%;
}

.name {
  color: @text-color-7;
  font-family: @font-family-2;
  font-size: 2vw;
  font-weight: @font-weight-1;
}

.number {
  color: @text-color-3;
  font-family: @font-family-3;
  font-size: 1.4vw;
  font-weight: @font-weight-1;
}

.moneynumber {
  color: @text-color-5;
}

.skin {
  color: @text-color-8;
  font-family: @font-family-3;
  font-size: 1.4vw;
  font-weight: @font-weight-1;
}

.adress {
  color: @text-color-4;
  font-family: @font-family-2;
  font-size: 1.8vw;
  font-weight: @font-weight-1;
}

.member {
  color: @text-color-4;
  font-family: @font-family-3;
  font-size: 1.2vw;
  font-weight: @font-weight-1;
  background-color: @background-8;
  width: 8vw;
  height: 3vw;
  text-align: center;
  margin-top: 3vw;
  margin-right: 3vw;
  display: flex;
}

.member > .img {
  margin-top: 9%;
  margin-left: 0.5vw;
}
.member > .divs {
  margin-top: 7%;
  margin-left: 0.2vw;
}

.skinadress {
  margin-top: 2vw;
  margin-left: 3vw;
}

.module {
  display: flex;
  justify-content: space-between;
  margin-left: 5vw;
  margin-top: 5vw;
  margin-right: 7vw;
}

.modulenumber {
  color: @text-color-7;
  margin-left: -1vw;
}

.block {
  margin-left: 3vw;
  margin-right: 3vw;
  margin-top: 5vw;
}
.block > .child {
  background-color: @background-9;
  width: 40%;
  height: 8vw;
  margin-right: 4vw;
  box-sizing: border-box;
  padding-left: 5vw;
  padding-top: 1.5vw;
  border-radius: 1vw;
}

.font {
  color: @text-color-9;
  font-family: @font-family-3;
  font-size: 1.4vw;
  font-weight: @font-weight-1;
  margin-right: 3vw;
}

/deep/ .n-divider.n-divider--vertical {
  display: inline-block;
  height: 1.4vw;
  margin: 0.5vw 3vw 0 3vw;
  vertical-align: middle;
  width: 1px;
}
/deep/ .n-divider.n-divider--vertical {
  background-color: @text-color-9;
}

.tab {
  margin-left: 5vw;
  margin-right: 5vw;
  margin-top: 5vw;
}
/deep/ .n-tabs .n-tabs-rail {
  background-color: rgb(249, 242, 236);
  border-radius: 4vw;
}
/deep/ .n-tabs .n-tabs-nav {
  line-height: 3;
}

/deep/ .n-tabs .n-tabs-tab .n-tabs-tab__label {
  color: @text-color-7;
  font-family: @font-family-3;
  font-size: 1.5vw;
  font-weight: @font-weight-1;
}
/deep/ .n-tabs .n-tabs-rail .n-tabs-tab-wrapper .n-tabs-tab.n-tabs-tab--active {
  box-shadow: 0px 2px 4px rgba(214, 150, 0, 0.36);
}

.imgactive {
  width: 30vw;
  height: 10vw;
  background-color: @background-9;
  text-align: center;
  padding-top: 1%;
}

.fontavtive {
  font-size: 1.4vw;
  margin-left: 2vw;
}
.actives {
  margin-top: 1vw;
  margin-bottom: 1vw;
}

.time {
  font-size: 1.5vw;
}
.drawer {
  position: absolute;
  background-color: @background-4;
  left: 0vw;
  top: 38.5vw;
  height: 8.75455vw;
  width: 100%;
  background: @background-1;

  background-blend-mode: normal;
  box-shadow: 0vw -0.10422vw 0.20844vw rgba(0, 0, 0, 0.1);
  padding-top: 2vw;
  padding-left: 8vw;
}

.service {
  --n-width: 10vw !important;
  --n-height: 4vw !important;
}
</style>

20岁，已秃
关注
专栏目录
Vue实战开发二（个人中心实现）
`or 1 or 不正经の泡泡
11-25 1万+
文章目录前言效果预览项目结构个人页面框架总结 前言 本来是想要说一下那个如何整合那个vue的Markdown编辑器的，但是由于这个后端没有搭建起来，所以图片上传做不了，所以先不介绍，后面在介绍怎么搞，值得一提的是在vue里面使用Markdown是真的简单，后面vue的Markdown组件可以直接把Markdown文档变成html文件，后面我存到服务器然后(存路径数据库）然后给前端直接渲染就好了。不像那个Django里面，用MVT模式开发的时候，还要自己整合 edit.md 而且网上的教程垃圾的一批还是我自己
VUE：element ui组件应用之个人中心页面
qq_45722678的博客
04-29 1万+
element ui组件应用之个人中心页面 纯小白自己完成的页面 页面预览及源码 // 源码（版权所有）： <template> <div class="personalCenter"> <el-container> <el-header>个人中心</el-header> <el-container> <el-aside width="400px">
我的头条（vue项目实战）--个人中心页
Zwq8023520的博客
08-27 4960
项目实战 vue axios 文件上传
nvim-scrollbar 插件使用教程
最新发布
gitblog_00239的博客
08-16 279
nvim-scrollbar 插件使用教程 nvim-scrollbarExtensible Neovim Scrollbar项目地址:https://gitcode.com/gh_mirrors/nv/nvim-scrollbar 项目介绍 nvim-scrollbar 是一个为 Neovim 设计的插件，旨在为编辑器添加直观的滚动条。这个插件利用了 Neovim 的 Lua API 和树状视...
使用Vue3构建一个交互式个人信息展示页面
ScriptEcho的博客
06-25 1179
开发这段代码的过程让我对 Vue.js 的状态管理和动态渲染有了更深入的了解。我还学会了如何使用 HTML 和 CSS 创建一个干净、现代的用户界面。未来，该个人信息卡片功能可以扩展和优化：**添加验证：**验证用户输入的个人信息，确保其格式正确。**实现错误处理：**处理服务器更新请求的错误，并向用户提供反馈。**使用响应式设计：**使卡片在不同屏幕尺寸上自适应。**整合第三方服务：**集成第三方服务，如 Gravatar，用于获取用户头像。更多组件：获取更多Echos本文由。
vue2设置首页和个人信息页
Sebastien23的博客
06-30 6812
编辑： 编辑，添加以显示Home组件： 编辑，为Home配置路由： 设置个人信息页 编辑，为个人信息页面配置路由： 创建个人信息展示页面： 在中引入： 编辑，修改下拉菜单的方法：
基于Vue3+TS, 使用Naive UI组件库开发的后台管理系统.zip
01-04
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
cron定时任务表达式组件（vue3+ts+naiveUI）
09-30
vue3+ts+naive UI,有执行时间的中文解析，还有10次执行时间（需要后端写接口）. 1.将文件放在你想放的项目文件夹下，引入import vue3CronComponent from "xxxx";如果需要中文解析功能，同理引入即可。 3.需要传的值...
基于Vue3、Vite4、Typescript、pinia、Naive UI、Vue-Router的后台管理免费开源模板
04-04
Nova-admin一个基于Vue3、Vite4、Typescript、pinia、Naive UI、Vue-Router的后台管理免费开源模板，助力提高中后台开发效率。基于Vue3、Vite5、TypeScript、NaiveUI、Unocss等最新技术栈开发，基于alova封装和配置...
基于Nuxt3 + Vue3 + NaiveUI+ Vite实战开发在线教育SSR服务端渲染网站应用.zip
03-03
naive-ui： 基于Vue3的组件库。 Tailwind CSS： 是一个功能类优先的 CSS 框架。 Node.js：是一个基于 Chrome V8 引擎 的 JavaScript 运行时环境。（感谢打开前端开发者的秃头新世界/doge） 四、依赖安装 Install ...
从0到1，带你搭建Vite+Vue3+Pinia+Naive UI后台（一）前置篇
xxxzzzqqq_的博客
03-17 444
今年年初开源了一个基于 Vue3+Vite+Pinia+Naive UI 的轻量级后台管理模板，没想到得到很多朋友的青睐和关注，有很多朋友在github、邮箱和微信上表示很好用，并且帮助到了他们，这对于没有多少开源经验的我来说无疑是极大的激励，更促使我把这个开源项目做到更好。也有朋友表达了疑惑，比如“都2202年了，为什么还不用ts？
一个用vuejs20写的直播类应用web端个人中心
08-12
一个用vue.js(2.0)写的直播类应用web端个人中心
VUE DEMO之模拟登录个人中心页面之间数据传值实例
10-16
今天小编就为大家分享一篇VUE DEMO之模拟登录个人中心页面之间数据传值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue2项目实战：尚品汇（五）个人中心页面、导航守卫、懒加载、结束
DogEgg_001的博客
10-18 764
图片懒加载是指在网页中，当用户滚动页面时才加载图片的一种技术。相对于传统的图片加载方式，懒加载可以减少初始页面的加载时间，提高网站的响应速度。使用插件vue-lazyload实现图片懒加载下载插件：npm i vue-lazyload@1.3.3 -S。
Vue+element ui实现好看的个人中心
geejkse_seff的博客
07-31 1万+
目录 一、效果图 二、项目结构 三、界面效果和代码实现 1.路由注册 2.个人主页实现 3.编辑弹窗按钮实现 4.个人简介实现 5.发贴页实现 6.收藏页实现 7.关注和收藏页实现 四、总结 一、效果图 仿照原神社区的个人中心写了个个人中心界面，下图分别为原神社区个人中心主页和我画的个人中心的效果图： 原神社区个人中心效果图： 我画的个人中心效果图： 下面上代码 二、项目结构 router文件夹里的index.js为路由注册文件，person文件夹里Info文件为个人简介页，MyArt
使用vue+vant制作的一个个人信息展示页面
jakelihua
06-11 3696
本文讲解如何使用vue+vant制作一个个人信息展示的页面。
# vue# 【九】 个人中心的制作
ZHENGCHUNJUN的博客
07-07 8043
vue003个人中心的制作
使用VUE做的个人简历
热门推荐
FREE-FLY的博客
01-14 3万+
简单使用vue实现的单页面demo，希望对大家有帮助！ 连接查看地址：https://eight1302.github.io/my_resume/my_resume/view/resume.html html部分 &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="utf-8"&gt;  ...
Vue3+Vant开发：个人信息管理
程序员老茶的博客
04-18 1406
Vue3+Vant开发：个人信息管理
vue搭建个人中心页面
05-13
首先，你需要安装Vue.js和Vue CLI。如果你已经安装了Vue CLI，可以直接使用命令行创建一个新的Vue项目。如果没有安装，可以按照官方文档进行安装。 创建项目： ``` vue create myproject ``` 然后进入项目目录： ``` cd myproject ``` 接下来，创建一个新的组件来展示个人中心页面。可以在`/src/components`目录下创建一个名为`Profile.vue`的文件。在这个文件中，你可以使用Vue的模板语法来定义组件的结构和样式。 例如，以下是一个简单的个人中心页面的代码： ```html <template> <div> <h1>个人中心</h1> <div class="profile"> <img :src="avatar" alt="头像"> <div class="info"> <p>用户名：{{ username }}</p> <p>邮箱：{{ email }}</p> <p>性别：{{ gender }}</p> <p>生日：{{ birthday }}</p> </div> </div> </div> </template> <script> export default { data() { return { username: '小明', email: 'xiaoming@example.com', gender: '男', birthday: '1990-01-01', avatar: 'https://picsum.photos/200/200' } } } </script> <style scoped> .profile { display: flex; align-items: center; margin-top: 20px; } .profile img { width: 100px; height: 100px; border-radius: 50%; margin-right: 20px; } .profile .info { font-size: 16px; line-height: 1.5; } </style> ``` 在这个组件中，我们使用了一个包含个人信息的对象来展示用户的数据。我们还使用了一个图片来展示用户的头像。最后，我们使用了CSS样式来美化这个页面。 接下来，我们需要在主应用程序中使用这个组件。可以在`/src/App.vue`文件中进行修改，添加以下代码： ```html <template> <div id="app"> <Profile /> </div> </template> <script> import Profile from './components/Profile.vue' export default { name: 'App', components: { Profile } } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> ``` 在这里，我们使用了Vue的单文件组件来引入并使用`Profile`组件。 最后，我们需要在命令行中启动应用程序： ``` npm run serve ``` 现在，你可以在浏览器中访问`http://localhost:8080`，查看你的个人中心页面了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值