czl0325的专栏

以下是我摸索的步骤，但是不是完美的，不知道有没有人有更完美的步骤呢？可以指点下，我的qq是2951839171.新建项目vue create 项目名 新建一个工程，选择vue3和typescript2.创建组件在components文件夹下创建组件，用vue3+ts的写法，这个我具体不写了。同时创建一个index.ts文件作为入口文件2.1 扩展知识点我这个库依赖了vant的库，我们可以npm i vant@next -D安装vant注意是-D不是-S，就是打包的时候不打包.

Vue 3.2 版本包括许多重要的新功能和性能改进，但并不包含重大更改。新的单文件组件功能： `<script setup>`是一种编译时语法糖，可在 SFC 内使用 Composition API 时极大地提升工作效率。 `<style> v-bind`在 SFC 标签中启用组件状态驱动的动态 CSS 值。`<style>` 一起使用这两个新功能的示例组件：<scriptsetup>import...

telport的使用telport传送门，把你的组件代码传送到你设定id的组件上。首先先创建一个toast的结构。<template> <teleport to="#toast"> <div class="alert text-center w-50 fixed-bottom mb-5 mx-auto" v-if="isVisible" :class="classObject"> {{message}} </div>

vue-router的使用导入vue-routernpm install vue-router@next --save编写router.ts文件import {createRouter, createWebHistory} from 'vue-router'import Login from "@/pages/Login.vue";const routerHistory = createWebHistory()const router = createRouter({ h

1.子组件双向数据绑定创建一个子组件，里面包含一个input输入框。目标实现input输入框的值和父组件之间双向绑定。首先要在子组件的props上创建一个modelValue变量。注意名字要写对modelValueprops: { rules: Array as PropType<RuleType[]>, title: String, modelValue: String, },将该值绑定到input属性中<template> &l

1. 创建dropdown组件<template> <div class="dropdown"> <a class="btn btn-outline-light dropdown-toggle my-2" @click.prevent="toggleOpen">{{ title }}</a> <ul class="dropdown-menu" v-if="isOpen" :style="{display: 'block'}">

样式库选择目前好用样式库有：tailwindcssBootstrap本项目使用bootstrap， npm install bootsharp@next --save 其中next表示最新版本新建组件ColumnList新建组件后，可以创建组件的interfaceexport interface ColumnProps { id: number; title: string; avatar: string; description: string;}创建

1. 创建项目首先先检查vue-cli版本，必须是4.5.0以上才可以创建vue3.0项目 `vue --version`创建项目命令 vue create zhihu 其中zhihu是项目名----- 选择 Manually select features （手动选择）----- 出现Check the features needed for your project:界面，勾选上TypeScript（采用空格勾选）。 （router和vuex暂时不添加。可以后续手...