vue3+ts项目-尚医通

要加油哦～

已于 2024-04-02 16:40:11 修改

阅读量1.2k

点赞数 22

分类专栏： vue项目文章标签： vue.js typescript react.js

于 2024-03-29 19:50:01 首次发布

本文链接：https://blog.csdn.net/weixin_42479421/article/details/136948307

版权

vue项目专栏收录该内容

45 篇文章 2 订阅

订阅专栏

路由滚动行为：如路由切换时滚动条回到顶部。

Layout 布局（el-row / el-col

清除默认样式

出现报错：

Preprocessor dependency "sass" not found. Did you install it? Try `pnpm add -D sass`.

解决方法：安装scss： pnpm i sass

引入全局组件

全局组件：①引入组件， ②应用实例.component('标签', 组件)

静态搭建和组件拆分

顶部和底部的固定部分拆分为单个组件，置于App.vue中

路由搭建

步骤：安装包vue-router -> 路由配置 -> 路由出口 -> 在入口文件引入并安装

① 安装包： pnpm i vue-router

② 路由配置：新建路由文件夹router、页面文件夹pages，在路由文件夹router中的 index.ts 进行以下路由配置

配置完毕，发现路由没有切换。原因：需指定路由组件展示区域 router-view

③ 配置路由出口 router-view，在上级路由中写路由出口

④ 在入口文件中，引入 vue-router 并安装

路由配置的代码，以及其他写法：

import { createRouter,createWebHistory } from 'vue-router';
import Home from '@/pages/home/index.vue'
import Hospital from '@/pages/hospital/index.vue'

// createRouter方法 ，用于创建路由器实例，可以管理多个路由
export default createRouter({
    history: createWebHistory(),       // 路由模式的设置
    routes:[                           // 管理路由
    // 法一：重定向写法
        // {
        //     path: '/home',
        //     component: () => import('@/pages/home/index.vue') 
        // },
        // {
        //     path: '/hospital',
        //     component: () => import('@/pages/hospital/index.vue')
        // },
        // {
        //     path: '/',
        //     redirect: '/home'   //重定向
        // }
    // 法二（推荐）：默认路由写法，缺省
        {
            path:'/',
            component: Home,
            children:[
                {
                    path:'/home',
                    component: Home
                }
            ]
        },
        {
            path: '/hospital',
            component: Hospital
        }
    ]
})

路由滚动行为：如路由切换时滚动条回到顶部。

首页的静态搭建

安装elementplus

①安装 element-plus：pnpm i element-plus，重新运行程序 pnpm run dev

② 按照官网 在路口文件main.ts中进行引入

轮播图：Carousel 走马灯

（可以拆成单个组件

form表单

el-autocomplete 自动补全输入框

效果图：

安装图标组件 icon

① pnpm i @element-plus/icons-vue，重新运行程序 pnpm run dev

② 引入图标 icon

深度选择器（修改原本样式）

>>>（原生css）
/deep/（lass中常用）
::v-deep（sass中常用）

格式如 ::v-deep .类名{}

注：scoped 让每个组件之间的样式相互不影响，不可或缺。

两种语法即可，::v-deep 可用 :deep(<inner-selector>)