Vue3组件库的环境怎么配置-Vue.js-PHP中文网

首页

web前端

Vue.js

Vue3组件库的环境怎么配置

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 14, 2023 am 10:28 AM

因为我们是使用 Vite+Ts 开发的是 Vue3 组件库,所以我们需要安装 typescript、vue3,同时项目将采用 Less 进行组件库样式的管理

pnpm add vue@next typescript less -D -w

使用pnpm如果要安装在项目根目录下,则需要加-w

初始化 ts

在根目录执行npx tsc --init,然后就会自动生成 ts 的配置文件tsconfig.json,然后我们对其做一个更换

{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "preserve",
    "strict": true,
    "target": "ES2015",
    "module": "ESNext",
    "skipLibCheck": true,
    "esModuleInterop": true,
    "moduleResolution": "Node",
    "lib": ["esnext", "dom"]
  }
}

tsconfig.json暂时先做这样一个配置,后续可能会有一定的调整

搭建一个基于 vite 的 vue3 项目

因为我们要开发的是一个 Vue3 组件库,肯定需要一个 Vue3 项目来测试我们的组件库,所以这里将自己搭建一个基于 Vite 的 Vue3 项目来对组件进行调试。因此我们在根目录新建一个叫 play 的文件夹然后初始化pnpm init,后续的组件调试就在这个项目下进行。接下来我们就开始搭建一个 Vue3+Vite 的项目

安装插件

我们需要安装vite和vitejs/plugin-vue插件,@vitejs/plugin-vue插件是为了解析后缀为.vue文件的。在 play 目录下执行

pnpm add vite @vitejs/plugin-vue -D

配置 vite.config.ts

新建vite.config.ts配置文件

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [vue()],
});

新建入口 html 文件

@vitejs/plugin-vue会默认加载 play 下的 index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>play</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="main.ts" type="module"></script>
  </body>
</html>

因为 vite 是基于 esmodule 的,所以script标签中需要添加type="module"

app.vue

新建app.vue文件

<template>
  <div>启动测试</div>
</template>

入口 main.ts

新建main.ts

import { createApp } from "vue";
import App from "./app.vue";

const app = createApp(App);

app.mount("#app");

配置脚本启动项目

在package.json配置scripts脚本

{
  "name": "play",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.1.1"
  }
}

因为 play 项目需要测试本地的组件库,所以也需要将 play 和我们的组件库关联在一起。修改一下pnpm-workspace.yaml文件

packages:
  - "packages/**"
  - "play"

此时 play 项目便可以安装本地 packages 下的包了

最后执行pnpm run dev,便可启动我们的 play 项目

Vue3组件库的环境怎么配置

但是有一个问题就是 ts 无法识别*.vue文件,所以编译器会报红

Vue3组件库的环境怎么配置

此时我们需要新建一个声明文件vue-shim.d.ts,让 ts 认识*.vue的文件

declare module &#39;*.vue&#39; {
    import type { DefineComponent } from "vue";
    const component: DefineComponent<{}, {}, any>
}

此时报错便消失了。

以上是Vue3组件库的环境怎么配置的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：亿速云。如有侵权，请联系admin@php.cn删除

vue.js vs.反应：可伸缩性和可维护性May 10, 2025 am 12:24 AM

Vue.js和React在可扩展性和可维护性上的表现各有优势。1)Vue.js易于上手，适合小型项目，CompositionAPI提升了大型项目可维护性。2)React适用于大型复杂项目，Hooks和虚拟DOM提高了性能和可维护性，但学习曲线较陡峭。

vue.js和React的未来：趋势和预测May 09, 2025 am 12:12 AM

Vue.js和React的未来趋势和预测分别是：1)Vue.js将在企业级应用中广泛应用，并在服务端渲染和静态站点生成方面有突破；2)React将在服务器组件和数据获取方面创新，并进一步优化并发模式。

Netflix的前端：深入研究其技术堆栈May 08, 2025 am 12:11 AM

Netflix的前端技术栈主要基于React和Redux。1.React用于构建高性能的单页面应用，通过组件化开发提升代码重用性和维护性。2.Redux用于状态管理，确保状态变化可预测和可追踪。3.工具链包括Webpack、Babel、Jest和Enzyme，确保代码质量和性能。4.性能优化通过代码分割、懒加载和服务端渲染实现，提升用户体验。

vue.js和前端：构建交互式用户界面May 06, 2025 am 12:02 AM

Vue.js是一种渐进式框架，适用于构建交互性强的用户界面。其核心功能包括响应式系统、组件化开发和路由管理。1)响应式系统通过Object.defineProperty或Proxy实现数据监听，自动更新界面。2)组件化开发允许将界面拆分为可复用的模块。3)VueRouter支持单页面应用，提升用户体验。