尚医通(vue3+ts) 跟练--------首页静态搭建banner(超详细版)

安装 element-plus

npm i element-plus

main.ts

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)

新建轮播图组件 Home/Carousel/index.vue

<template>
  <div>
    <!-- 首页轮播图 -->
    <el-carousel height="350px">
      <el-carousel-item v-for="item in 4" :key="item">
        <img src="@/assets/images/web-banner-1.png" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
    img{
        width: 100%;
        height: 100%;
    }
</style>

新建搜索框组件 Home/Search/index.vue

<template>
  <div class="search">
    <el-autocomplete
      v-model="state1"
      :fetch-suggestions="querySearch"
      clearable
      class="inline-input w-50"
      placeholder="Please Input"
      @select="handleSelect"
    />
    <el-button type="primary">搜索</el-button>
  </div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="scss">
.search{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin:10px 0;
}
</style>

Home/index.vue

<template>
  <div>
    <!-- 首页轮播图 -->
    <Carousel/>
    <!-- 首页搜索医院搜索框 -->
    <Search/>
  </div>
  
</template>
<script setup lang="ts">
//引入首页轮播图组件
import Carousel from './Carousel/index.vue'
import Search from './Search/index.vue'
</script>
<style scoped>
</style>

下载 element-plus/icons-vue

npm i @element-plus/icons-vue

在Search/index.vue引入

import { Search } from '@element-plus/icons-vue'

• 可能会有报错

Cannot find module '@element-plus/icons-vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

解决办法：将tsconfig.json文件里的"moduleResolution": "bundler"改成"moduleResolution": "node"

• Home/index.vue也可能还有报错：

import Search from './Search/index.vue'

components/details/index.vue"has no default export

报错原因：

使用vetur这个插件

解决办法: 禁用vetur插件，启用Volar这个插件

• 在Search/index.vue里修改搜索框的样式会发现不起作用，

把scoped删掉或者使用深度选择器

.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
  ::v-deep(.el-input__wrapper) {
    width: 600px;
    margin-right: 10px;
  }
}

！！！代码详情在上一节

完成🦌