Vue3+vite个人博客网站从0-1(element-plus组件库引入+首页样式布局)

简介: Vue3+vite个人博客网站从0-1(element-plus组件库引入+首页样式布局)

接着上一节,这一章主要是将element-plus组件库引入到项目中,然后将咱们之前漏掉的css预处理器给安装上来,然后讲首页基本显示出来,如果没有从第一章开始的


安装element-plus

NPM

npm install element-plus --save

Yarn

yarn add element-plus


安装完成之后我们这边使用的是一个全局引入 在main.js中引入

ec4e59fefb53435d87bc9e87528609e6.png


import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
// 引入 router
import router from './router/index'
// 引入 store
import store from './store/index'
// 引入element-plus
import ElementPlus from 'element-plus'
import '../node_modules/element-plus/theme-chalk/index.css'
createApp(App).use(router).use(store).use(ElementPlus).mount('#app')


安装之后尝试在咱们的项目中运行看是否可以运行在home.js中运行

<template>
  <div class="block">
    <span class="demonstration"
      >Child options expand when clicked (default)</span
    >
    <el-cascader
      v-model="value"
      :options="options"
      @change="handleChange"
    ></el-cascader>
  </div>
  <div class="block">
    <span class="demonstration">Child options expand when hovered</span>
    <el-cascader
      v-model="value"
      :options="options"
      :props="props"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref([])
const props = {
  expandTrigger: 'hover',
}
const handleChange = (value) => {
  console.log(value)
}
const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
  {
    value: 'component',
    label: 'Component',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          {
            value: 'layout',
            label: 'Layout',
          },
          {
            value: 'button',
            label: 'Button',
          },
        ],
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          {
            value: 'radio',
            label: 'Radio',
          },
          {
            value: 'select',
            label: 'Select',
          },
          {
            value: 'cascader',
            label: 'Cascader',
          },
          {
            value: 'switch',
            label: 'Switch',
          },
          {
            value: 'slider',
            label: 'Slider',
          },
          {
            value: 'time-picker',
            label: 'TimePicker',
          },
          {
            value: 'date-picker',
            label: 'DatePicker',
          },
          {
            value: 'form',
            label: 'Form',
          },
        ],
      },
      {
        value: 'data',
        label: 'Data',
        children: [
          {
            value: 'table',
            label: 'Table',
          },
          {
            value: 'badge',
            label: 'Badge',
          },
        ],
      },
      {
        value: 'notice',
        label: 'Notice',
        children: [
          {
            value: 'alert',
            label: 'Alert',
          },
          {
            value: 'notification',
            label: 'Notification',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'menu',
            label: 'Menu',
          }
          },
        ],
      },
      {
        value: 'others',
        label: 'Others',
        children: [
          {
            value: 'dialog',
            label: 'Dialog',
          }
        ],
      },
    ],
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      {
        value: 'axure',
        label: 'Axure Components',
      },
      {
        value: 'sketch',
        label: 'Sketch Templates',
      },
      {
        value: 'docs',
        label: 'Design Documentation',
      },
    ],
  },
]
</script>
<style lang="scss" scoped>
.block {
  margin: 1rem;
}
.demonstration {
  margin: 1rem;
}
</style>


会发现报错

aac6286b9af24cb6a9cf1131e5378242.png


没有安装css预处理器


咱们这边项目使用less


在安装less之前如果没有安装淘宝镜像的记得先安装淘宝镜像


我们可运行先下面这条命令来查看,yarn的下载依赖包的仓库地址是否已经安装淘宝镜像


yarn config get registry


如果已经安装了可以忽略下面几个步骤


如果没有安装就需要安装一下淘宝镜像


yarn config set registry https://registry.npm.taobao.org -g

npm config set registry https://registry.npm.taobao.org


然后安装好之后就可以直接安装less


安装一下less


在vite中不再需要安装less-loader,只需要安装less就好了(血的教训)


npm i less -D


到这里安装less之后不要忙着运行项目 先把sass改成我们的less在运行项目

<template>
  <div class="block">
    <span class="demonstration"
      >Child options expand when clicked (default)</span
    >
    <el-cascader
      v-model="value"
      :options="options"
      @change="handleChange"
    ></el-cascader>
  </div>
  <div class="block">
    <span class="demonstration">Child options expand when hovered</span>
    <el-cascader
      v-model="value"
      :options="options"
      :props="props"
      @change="handleChange"
    ></el-cascader>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref([])
const props = {
  expandTrigger: 'hover',
}
const handleChange = (value) => {
  console.log(value)
}
const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
  {
    value: 'component',
    label: 'Component',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          {
            value: 'layout',
            label: 'Layout',
          },
          {
            value: 'button',
            label: 'Button',
          },
        ],
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          {
            value: 'radio',
            label: 'Radio',
          },
          {
            value: 'select',
            label: 'Select',
          },
          {
            value: 'cascader',
            label: 'Cascader',
          },
          {
            value: 'switch',
            label: 'Switch',
          },
          {
            value: 'slider',
            label: 'Slider',
          },
          {
            value: 'time-picker',
            label: 'TimePicker',
          },
          {
            value: 'date-picker',
            label: 'DatePicker',
          },
          {
            value: 'form',
            label: 'Form',
          },
        ],
      },
      {
        value: 'data',
        label: 'Data',
        children: [
          {
            value: 'table',
            label: 'Table',
          },
          {
            value: 'badge',
            label: 'Badge',
          },
        ],
      },
      {
        value: 'notice',
        label: 'Notice',
        children: [
          {
            value: 'alert',
            label: 'Alert',
          },
          {
            value: 'notification',
            label: 'Notification',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'menu',
            label: 'Menu',
          }
          },
        ],
      },
      {
        value: 'others',
        label: 'Others',
        children: [
          {
            value: 'dialog',
            label: 'Dialog',
          }
        ],
      },
    ],
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      {
        value: 'axure',
        label: 'Axure Components',
      },
      {
        value: 'sketch',
        label: 'Sketch Templates',
      },
      {
        value: 'docs',
        label: 'Design Documentation',
      },
    ],
  },
]
</script>
<style lang="less" scoped>
.block {
  margin: 1rem;
}
.demonstration {
  margin: 1rem;
}
</style>


如果到这里页面上显示出来就说明引入成功了


到这里咱们的element-puls和咱们的css预处理器就已经安装完成了


接下里就可以吧咱们的首页的静态页面完成。


创建公共头部

src/components/layout/nav-bar.vue

<template>
      <!--导航-->
  <div>
    <div class="animate__animated animate__fadeIn title"  :style="{'background-image': bgUrl}"></div>
    <el-header  class="animate__animated animate__fadeIn">
      <h2 class="animate__animated animate__swing logo" >haihai</h2>
      <div class="menu-expend">
        <i class="el-icon-menu"></i>
      </div>
      <div class="search_input">
        <el-input
                class="search"
                placeholder="请输入内容"
                prefix-icon="el-icon-search">
        </el-input>
      </div>
    </el-header>
  </div>
</template>
<script>
export default {
  data () {
    return {
      bgUrl:'url(http://img.haihaina.cn/Shinichi6.jpeg)'
    }
  }
}
</script>
<style>
  .search input.el-input__inner {
    background-color: rgba(0, 0, 0, 0.1);
    /*border-radius: 20px;*/
    color: #cccccc;
  }
</style>
<style scoped lang="less">
  .title {
    position: fixed;
    top: 0;
    width: 100%;
    height: 120vh;
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 3px solid #fff;
  }
  .el-header {
    transition: .2s;
  }
  .el-header:hover {
    opacity: 1 !important;
  }
  .el-menu {
    background-color: rgba(0, 0, 0, 0) !important;
  }
  .el-menu /deep/ .el-menu-item{
    background-color: rgba(0, 0, 0, 0) !important;
  }
  .el-menu /deep/ .el-menu-item i {
    color: rgba(255, 255, 255);
  }
  .el-menu /deep/ .el-menu-item:hover i {
    color: white;
  }
  .el-menu /deep/ .el-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.5) !important;
  }
  .search_input {
    position: relative;
    box-sizing: border-box;
  }
  .search_input ul {
    position: absolute;
    top: 30px;
    width: 100%;
    border: 1px solid #e5e9ef;
    margin-top: 1px;
    background: #fff;
    z-index: 10000;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(58, 118, 142, 0.16);
    padding: 10px 0;
    font-size: 14px;
    box-sizing: border-box;
  }
  .search_input ul li {
    padding: 0 16px;
    height: 32px;
    line-height: 32px;
    cursor: pointer;
    word-wrap: break-word;
    word-break: break-all;
    display: block;
    color: #222;
    position: relative;
    /*transition: .2 ease;*/
  }
  .search_input ul li:hover {
    background-color: #e8f3ff;
  }
  .search-blog {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    padding-left: 20px;
    padding-right: 20px;
  }
  .el-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: rgba(0, 0, 0, 0.2);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    > div {
      display: flex;
      align-items: center;
    }
    img {
      height: 40px;
    }
    span {
      margin-left: 15px;
    }
    button {
      opacity: 0.8;
    }
    .el-menu {
      flex-shrink: 0;
    }
    .logo {
      color: #ffd04b;
    }
    .logo:hover {
      cursor: pointer;
    }
  }
  .loginInfo {
    flex-shrink: 0;
    /*background-color: #545c64;*/
    color: white;
    height: 60px;
    border: none;
    width: 160px;
    position: relative;
    .el-avatar {
      width: 36px;
      height: 36px;
      margin: 0 auto;
      z-index: 200;
    }
    .user-option {
      position: absolute;
      top: 60px;
      width: 150px;
      left: 50%;
      transform: translate(-50%, 0);
      font-size: 14px;
      text-align: center;
      line-height: 30px;
      background-color: #fff;
      visibility: hidden;
      opacity: 0;
      color: #333;
      box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
      border: 1px solid #eee;
      border-radius: 5px;
    }
    .logout {
      margin: 10px auto;
      padding: 0;
      width: 100%;
    }
    .logout:hover {
      background-color: #eee;
    }
  }
  .loginInfo:hover {
    cursor: pointer;
    .el-avatar {
      transform: translate(0, 50%) scale(1.5);
      transition: .3s;
    }
    .user-option {
      visibility: visible;
      opacity: 1;
      transition: opacity .4s;
    }
  }
  .zZindex {
    margin-top: 300px;
    padding-top: 100px;
  }
  .menu-expend {
    display: none !important;
  }
  .el-menu-hidden {
    /*display: none;*/
    position: absolute;
    top: 60px;
    left: 0;
    border-top: 1px solid #ccc;
    border-right: none;
    width: 100%;
    .el-menu-item {
      border-bottom: 1px solid #ccc;
    }
  }
  @media screen and (max-width: 1000px) {
    .search_input {
      visibility: hidden;
    }
  }
  @media screen and (max-width: 768px) {
    .el-menu /deep/ .el-menu-item{
      background-color: rgba(0, 0, 0, 0.3) !important;
    }
    .el-menu-demo {
      display: none;
    }
    .title {
      width: 100%;
      background-position-x: center;
    }
    .menu-expend {
      display: block !important;
      position: fixed;
      top: 18px;
      left: 150px;
    }
    .menu-expend:hover {
      color: #ffd04b;
      cursor: pointer;
    }
    .title {
      background-position-y: 0;
    }
  }
</style>


首页

/src/view/home.vue

<template>
  <div>
      <navbar></navbar>
    <el-row style="height: 95vh">
      <el-col :span="24" style="height: 100%">
        <el-card shadow="none" class="welcome">
          <h1 class="tit">
            欢迎来到海海的小窝
            <div class="border"></div>
          </h1>
          <h2 class="intro">{{intro}}</h2>
      <!-- 进入主页 -->
          <div class="bounce down" @click="startRead">
            <i class="el-icon-arrow-down" style="color: white"></i>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import navbar from '../components/layout/nav-bar.vue'
export default {
  components: {
    navbar
  },
  setup(){
  let intro = '欢迎来到海海的小窝、这里会分享关于编程,开发以及其他方面的一些内容,希望可以对您有所帮助...';
  // 开始进入主页
   const  startRead = ()=>{
     console.log('进入主页')
    }
  return {startRead,intro}
  },
}
</script>
<style scoped lang="less">
  body {
    width: 100%;
  }
  .welcome {
    background-color: rgba(0, 0, 0, 0.1);
    border: none;
    height: 90%;
    position: relative;
    .border {
      width: 812px;
      height: 112px;
      position: absolute;
      top: -6px;
      left: -6px;
      border: 3px solid white;
      box-sizing: border-box;
      animation: clipMe 5s linear infinite;
    }
    .tit {
      box-sizing: border-box;
      position: relative;
      width: 800px;
      height: 100px;
      line-height: 100px;
      box-shadow: inset 0 0 0 1px white;
      margin: 40px auto;
      margin-top: 80px;
      color: white;
      text-align: center;
      font-size: 50px;
      font-weight: normal;
      letter-spacing: 10px;
    }
    .intro {
      letter-spacing: 5px;
      line-height: 50px;
      width: 80%;
      margin: 0 auto;
      text-align: center;
      font-weight: normal;
      color: white;
    }
    .down {
      animation: bounce 2s infinite;
      animation-duration: 3s;
      font-size: 25px;
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 2px solid #fff;
    }
    .down:hover {
      animation: none;
      cursor: pointer;
      box-shadow: 0 0 20px 0 white;
      transition: all .2s;
    }
  }
  @keyframes clipMe {
    0%,
    100% {
      clip: rect(0px, 806px, 6px, 0px);
    }
    25% {
      clip: rect(0px, 6px, 112px, 0px);
    }
    50% {
      clip: rect(112px, 812px, 112px, 0px);
    }
    75% {
      clip: rect(0px, 812px, 112px, 806px);
    }
  }
  @keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
      transform: translate(-50%, 0);
    }
    40% {
      transform: translate(-50%, -30px);
    }
    60% {
      transform: translate(-50%, -15px);
    }
  }
  ul {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 0;
    border-radius: 5px;
  }
  .el-pagination {
    padding-bottom: 20px;
  }
  .el-card /deep/ .el-card__body {
    padding: 0;
  }
  .right-item {
    margin-bottom: 20px;
    li:first-child {
      border-top: 1px solid rgba(179, 216, 255, 0.5);
    }
    li {
      border-bottom: 1px solid rgba(179, 216, 255, 0.5);
    }
    .more {
      text-align: center;
      color: #3a8ee6;
      padding: 8px;
    }
    .more:hover {
      cursor: pointer;
      color: #3a8ee6;
    }
    .blog-type:hover, .activeType {
      background-color: rgba(58, 142, 230, 0.3);
      cursor: pointer;
    }
    .tags {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      margin: 15px 13px 0;
      border-bottom: 1px solid rgba(179, 216, 255, 0.5);
    }
    .tag-item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-left: 5px;
      margin-right: 5px;
      margin-bottom: 10px;
      box-sizing: border-box;
      .tag {
        background-color: #ecf5ff;
        box-sizing: border-box;
        display: inline-block;
        height: 22px;
        padding: 0 10px;
        line-height: 22px;
        font-size: 10px;
        color: #409eff;
        border-radius: 4px;
        white-space: nowrap;
        border: 1px solid #409eff;
        transition: .2s;
      }
      .sjx-outer {
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #409eff;
        position: relative;
        transition: .2s;
      }
      .sjx-inner {
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #ecf5ff;
        top: -6px;
        left: 1px;
        position: absolute;
        transition: .2s;
      }
    }
    .tag-item:hover, .activeTag {
      box-sizing: border-box;
      .tag {
        color: white;
        background-color: #409eff;
        cursor: pointer;
      }
      .sjx-inner {
        border-right: 6px solid #409eff;
      }
    }
  }
  .blog-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    line-height: 40px;
  }
  .recommend-blog {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    padding-left: 20px;
    padding-right: 20px;
    a {
      border-bottom: 1px solid rgba(34, 36, 38, .15);
      line-height: 40px;
      display: block;
      text-decoration: none;
      color: black;
    }
    a:hover {
      color: #3a8ee6;
    }
  }
  .total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: larger;
    font-weight: bold;
    .title {
      display: flex;
      align-items: center;
      .el-icon-back {
        font-weight: bolder;
        color: #3a8ee6;
        margin-right: 10px;
      }
      .el-icon-back:hover {
        cursor: pointer;
      }
    }
  }
  .blog-content:hover {
    /*border-left: 5px solid #3a8ee6;*/
    /*border-right: 5px solid #3a8ee6;*/
    background-color: rgba(58, 142, 230, 0.3);
    cursor: pointer;
    .el-tag {
      color: white;
      background-color: #3a8ee6;
    }
  }
  .blog-content {
    padding: 10px;
    height: auto;
    border-bottom: 1px solid rgb(199, 163, 92);
    /*border-bottom: 1px solid rgba(34, 36, 38, .15);*/
    transition: .3s;
    .el-image {
      border-radius: 5px;
      box-sizing: border-box;
      flex-shrink: 0;
    }
    .blog-info {
      display: flex;
      align-items: center;
      color: rgba(0, 0, 0, .4);
      font-size: 10px;
      .user-info {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-right: 15px;
        .el-avatar {
          margin-right: 5px;
          width: 22px;
          height: 22px;
        }
        .header {
          text-decoration: none;
          color: #3a8ee6;
          font-weight: bold;
        }
      }
      .blog-date {
        margin-right: 15px;
      }
      .blog-type {
        margin-left: auto;
      }
    }
  }
  .description {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  }
  @media screen and (max-width: 768px) {
    .blog-date {
      display: none;
    }
    .welcome {
      width: 100%;
      .border {
        display: none;
      }
      .tit {
        font-size: 2rem;
        width: 100%;
        line-height: 50px;
        letter-spacing: 2px;
        height: auto;
      }
      .intro {
        font-size: 1rem;
        line-height: 30px;
      }
    }
    .el-pagination {
      width: 100%;
    }
  }
</style>


运行打开之后大概是这样image.png


本期的内容大概就是这样了,后续会接着更新。

相关文章
|
1天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
102 64
|
1天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
|
23天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
39 1
|
23天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
44 1
|
JavaScript 前端开发 测试技术
基于 vue3.0 从 0-1 搭建组件库(一)
基于 vue3 效仿 element-plus 从零实现组件库
933 0
基于 vue3.0 从 0-1 搭建组件库(一)
|
7天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
7天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
7天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
13天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
13天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
下一篇
无影云桌面