Vue3组件库

news/2024/12/23 0:43:03/

Vue3组件库

Vite+Vue3+Typescript+TSX

1、项目搭建

1.1、创建项目（yarn）

D:\WebstromProject>yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...success Installed "create-vite@4.4.1" with binaries:- create-vite- cva
√ Project name: ... chenxing
√ Select a framework: » Vue
√ Select a variant: » TypeScriptScaffolding project in D:\WebstromProject\chenxing...Done. Now run:cd chenxingyarnyarn devDone in 6.95s.

1.2、基础依赖

1、@types/node

# @types/node
yarn add -D @types/node

2、Jsx

# @vitejs/plugin-vue-jsx
yarn add -D @vitejs/plugin-vue-jsx

3、eslint

# eslint、vite-plugin-eslint（vite运行的时候自动检测eslint规范）
yarn add -D eslint
yarn add -D vite-plugin-eslint

4、prettier

# prettier、eslint-config-prettier（关掉所有和Prettier冲突的ESLint的配置）、eslint-plugin-prettier（将Prettier的rules以插件的形式加入到 ESLint里面）
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

5、sass

# sass
yarn add -D sass

1.3、项目配置

1、关闭Option Api

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({define: {// 关闭Vue Options Api__VUE_OPTIONS_API__: false},plugins: [vue()],
})

2、Jsx配置

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsxPlugin from "@vitejs/plugin-vue-jsx";// https://vitejs.dev/config/
export default defineConfig({define: {// 关闭Vue Options Api__VUE_OPTIONS_API__: false},plugins: [vue(),vueJsxPlugin({})],
})

3、路径别名

src修改为examples，新增examples同级文件夹packages作为UI组件位置

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueJsxPlugin from "@vitejs/plugin-vue-jsx";
import * as path from "path";// https://vitejs.dev/config/
export default defineConfig({base: "./",define: {// 关闭Vue Options Api__VUE_OPTIONS_API__: false,},plugins: [vue(), vueJsxPlugin({})],resolve: {// 配置路径别名alias: {"@": path.resolve(__dirname, "./examples"),},},
});

1.4、eslint

1、初始化eslint

PS D:\WebstromProject\chenxing> npx eslint --init
You can also run this command directly using 'npm init @eslint/config'.
? How would you like to use ESLint? ...To check syntax only
> To check syntax and find problems
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser, node
√ What format do you want your config file to be in? · JavaScript
The config that you've selected requires the following dependencies:@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · yarn
Installing @typescript-eslint/eslint-plugin@latest, eslint-plugin-vue@latest, @typescript-eslint/parser@latest

2、.eslintrc.cjs

module.exports = {"env": {"browser": true,"es2021": true,"node": true},"extends": ["eslint:recommended","plugin:@typescript-eslint/recommended","plugin:vue/vue3-essential"],"overrides": [{"env": {"node": true},"files": [".eslintrc.{js,cjs}"],"parserOptions": {"sourceType": "script"}}],"parserOptions": {"ecmaVersion": "latest","parser": "@typescript-eslint/parser","sourceType": "module"},"plugins": ["@typescript-eslint","vue"],"rules": {}
}

3、package.json

{"name": "chenxing","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview","lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix"},"dependencies": {"vue": "^3.3.4"},"devDependencies": {"@typescript-eslint/eslint-plugin": "^6.3.0","@typescript-eslint/parser": "^6.3.0","@vitejs/plugin-vue": "^4.2.3","@vitejs/plugin-vue-jsx": "^3.0.1","eslint": "^8.46.0","eslint-plugin-vue": "^9.17.0","typescript": "^5.0.2","vite": "^4.4.5","vite-plugin-eslint": "^1.8.1","vue-tsc": "^1.8.5"}
}

4、webstrom配置

在这里插入图片描述

1.5、prettier

1、.prettierrc.cjs

module.exports = {printWidth: 80, // 单行长度tabWidth: 2, // 缩进长度useTabs: false, // 使用空格代替tab缩进semi: true, // 句末使用分号singleQuote: false, // 使用单引号
}

2、.eslintrc.cjs

module.exports = {"env": {"browser": true,"es2021": true,"node": true},"extends": ["eslint:recommended","plugin:@typescript-eslint/recommended","plugin:vue/vue3-essential",'plugin:prettier/recommended','eslint-config-prettier'],"overrides": [{"env": {"node": true},"files": [".eslintrc.{js,cjs}"],"parserOptions": {"sourceType": "script"}}],"parserOptions": {"ecmaVersion": "latest","parser": "@typescript-eslint/parser","sourceType": "module"},"plugins": ["@typescript-eslint","vue"],"rules": {}
}

3、package.json

{"name": "chenxing","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview","lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx","prettier": "prettier --write ./**/*.{vue,ts,tsx,js,jsx,css,less,scss,json,md}"},"dependencies": {"vue": "^3.3.4"},"devDependencies": {"@types/node": "^20.4.10","@typescript-eslint/eslint-plugin": "^6.3.0","@typescript-eslint/parser": "^6.3.0","@vitejs/plugin-vue": "^4.2.3","@vitejs/plugin-vue-jsx": "^3.0.1","eslint": "^8.47.0","eslint-config-prettier": "^9.0.0","eslint-plugin-prettier": "^5.0.0","eslint-plugin-vue": "^9.17.0","prettier": "^3.0.1","sass": "^1.65.1","typescript": "^5.0.2","vite": "^4.4.5","vite-plugin-eslint": "^1.8.1","vue-tsc": "^1.8.5"}
}

4、webstrom配置

在这里插入图片描述

2、Button组件

在package下新建components目录，components下新建button目录，button下新建src目录和index.ts，src目录下新建button.tsx

2.1、button.tsx

import { defineComponent } from "vue";export default defineComponent({name: "XButton",setup() {return () => {return <div>Hello Button</div>;};},
});

2.2、index.ts

import XButton from "./src/button";
import { App } from "vue";export default {install(app: App) {app.component(XButton.name, XButton);},
};

2.3、使用

1、main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import XButton from "../packages/components/button";createApp(App).use(XButton).mount("#app");

2、App.vue

<script setup lang="ts">
import XButton from "../packages/components/button/src/button";
</script><template><XButton></XButton>
</template><style scoped></style>

3、组件统一注册

components下新建index.ts

3.1、index.ts

// 导入button组件
import { App } from "vue";
import XButton from "./button/src/button";// 组件列表
const components = [XButton];export default {install(app: App) {components.forEach((component) => {app.component(component.name, component);});},
};

3.2、使用

1、main.ts

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// import XButton from "../packages/components/button";
import Chenxing from "../packages/components";createApp(App).use(Chenxing).mount("#app");

2、App.vue

<script setup lang="ts">
import XButton from "../packages/components/button/src/button";
</script><template><XButton></XButton>
</template><style scoped></style>

http://www.ppmy.cn/news/1028107.html

相关文章

Vue 3.0中的Treeshaking？

Vue 3.0中的Treeshaking？

1.treeshaking是什么&#xff1f; Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术&#xff0c;专业术语叫 Dead code elimination 简单来讲&#xff0c;就是在保持代码运行结果不变的前提下&#xff0c;去除无用的代码 如果把代码打包比作制作蛋糕&#…
阅读更多...
QT qmake解析

QT qmake解析

阅读更多...
市面上最好用的4款免费ETL工具推荐

市面上最好用的4款免费ETL工具推荐

一、ETL介绍 ETL流程是数据仓库建设的核心环节&#xff0c;它涉及从各种数据源中抽取数据&#xff0c;经过清洗、转换和整合&#xff0c;最终加载到数据仓库中以供分析和决策。在数据仓库国产化的背景下&#xff0c;ETL流程扮演着重要的角色&#xff0c;今天我们就来讲讲ETL流…
阅读更多...
STM32 F103C8T6学习笔记7：双机无线串口通信

STM32 F103C8T6学习笔记7：双机无线串口通信

今日尝试配通俩个C8T6单片机之间的无线串口通信&#xff0c;文章提供原理&#xff0c;源码&#xff0c;测试效果图&#xff0c;测试工程下载&#xff1a; 目录 传输不规范问题&#xff1a; 串口通信资源&#xff1a; 单个串口资源理解&#xff1a; 单片机串口资源&#xf…
阅读更多...
Linux驱动-基于Buildroot构建系统镜像后实现基于QT项目开发之环境配置

Linux驱动-基于Buildroot构建系统镜像后实现基于QT项目开发之环境配置

Linux驱动-基于Buildroot构建系统镜像后实现基于QT项目开发之环境配置 需求BuildRootUboot的仓库地址和commit idKernel 的仓库地址和commit id BuildRoot已编译库在Windows上的Create上创建项目编译QT项目 需求 基于Build root编译整个镜像后&#xff0c;如何开发自己的基于Q…
阅读更多...
小米平板6Max14即将发布：自研G1 电池管理芯片，支持33W反向快充

小米平板6Max14即将发布：自研G1 电池管理芯片，支持33W反向快充

明天晚上7点&#xff08;8 月 14 日&#xff09;&#xff0c;雷军将进行年度演讲&#xff0c;重点探讨“成长”主题。与此同时&#xff0c;小米将推出一系列全新产品&#xff0c;其中包括备受瞩目的小米MIX Fold 3折叠屏手机和小米平板6 Max 14。近期&#xff0c;小米官方一直在…
阅读更多...
js 不使用递归，将树转为扁平数组

js 不使用递归，将树转为扁平数组

/*** 将树转为扁平数组* param {*} tree 需要转换的树*/const treeToArr tree > {let resArr [] //存储拆解完毕的nodelet nodeArr [...tree] //存储待拆解的nodewhile (nodeArr.length > 0) {let tempNodeArr [] //临时存储待拆解的nodenodeArr.forEach(item > {…
阅读更多...
运营商二要素认证API接口：提供手机号实名验证服务，确保用户信息的真实性

运营商二要素认证API接口：提供手机号实名验证服务，确保用户信息的真实性

随着互联网的快速发展&#xff0c;各行各业都需要用户进行实名认证。其中&#xff0c;涉及到用户个人信息的场景&#xff0c;如电商、游戏、直播、金融等需要用户实名认证的场景&#xff0c;必须要进行实名认证。然而&#xff0c;对于这些场景&#xff0c;用户的个人信息的真实…
阅读更多...
最新文章

Copyright @ 2022~2023