备案控制台
开发者社区 开发与运维 文章 正文

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

2022-10-20 1136
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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


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

文章标签：
前端开发
资源调度
关键词：
element-plus VUE.js
vue3 element-plus VUE.js
样式VUE.js
vue3布局VUE.js
VUE.js vite
26fgfyxgmott4
目录
相关文章
demo123567
|
1天前
|
JavaScript API 开发者
Vue3自定义hooks
Vue3自定义hooks
demo123567
5 0
demo123567
|
1天前
|
JavaScript 编译器
Vue3之事件
Vue3之事件
demo123567
4 0
demo123567
|
1天前
|
JavaScript
Vue3之Props组件数据传递
Vue3之Props组件数据传递
demo123567
5 0
demo123567
|
1天前
|
JavaScript API
vue3组件注册
vue3组件注册
demo123567
5 0
demo123567
|
1天前
|
JavaScript API UED
Vue3中的Suspense组件有什么用？
Vue3中的Suspense组件有什么用？
demo123567
17 6
demo123567
|
1天前
|
JavaScript 前端开发 索引
Vue3基础之v-if条件与 v-for循环
Vue3基础之v-if条件与 v-for循环
demo123567
7 0
demo123567
|
1天前
|
JavaScript
Vue3基础之v-bind与v-on
Vue3基础之v-bind与v-on
demo123567
10 0
1529723250799936
|
1天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口
1529723250799936
15 1
宁波阿成.
|
1天前
|
JavaScript
vue里样式不起作用的方法，可以通过deep穿透的方式
vue里样式不起作用的方法，可以通过deep穿透的方式
宁波阿成.
14 0
1529723250799936
|
1天前
|
移动开发 JavaScript 应用服务中间件
vue打包部署问题
Vue项目`vue.config.js`中，`publicPath`设定为&quot;/h5/party/pc/&quot;，在线环境基于打包后的`dist`目录，而非Linux的`/root`。Nginx代理配置位于`/usr/local/nginx/nginx-1.13.7/conf`，包含两个相关配置图。
1529723250799936
16 1
vue打包部署问题

热门文章

最新文章

  • 1
    vue项目开发笔记记录（一）
  • 2
    vue项目实战：实战技巧总结（中）
  • 3
    vue项目开发笔记记录（二）
  • 4
    vue项目使用可选链操作符编译报错问题
  • 5
    vue项目开发笔记记录（四）
  • 6
    乾坤子应用配置(vue3+vite)
  • 7
    vue3+vite项目配置ESlint
  • 8
    vue3+threejs+koa可视化项目——实现登录注册（第三步）
  • 9
    Vue的路由管理：VueRouter的配置和使用
  • 10
    vue3+threejs可视化项目——搭建vue3+ts+antd路由布局（第一步）
  • 1
    在vue中，怎样理解 Vue 的单向数据流？
    24
  • 2
    在vue中，Class 与 Style 如何动态绑定？
    18
  • 3
    在vue中，v-show 与 v-if 有什么区别？
    25
  • 4
    在vue中，如何实现SPA单页面应用的路由管理？
    24
  • 5
    在vue中，说说你对 SPA 单页面的理解，它的优缺点分别是什么？
    43
  • 6
    解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
    81
  • 7
    Vue中el与data的两种写法
    19
  • 8
    Vue之数据绑定
    15
  • 9
    使用Vue.js、Vuetify和Netlify构建现代化的响应式网站
    47
  • 10
    初识Vue 输出Hello World 及注意事项
    24

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档
  • Node.js 入门教程文档
  • 前端开发CSS基础

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • HTML及前端框架
  • CSS基础教程
  • 搭建Node.js编程环境
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考