# vue3-ui

**Repository Path**: liufeiran/vue3-ui

## Basic Information

- **Project Name**: vue3-ui
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-05-30
- **Last Updated**: 2025-06-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-ui

```
npm  install  lerna@4.0.0  –g 有冲突加--force
npm  init  –y
lerna  init

```

```
lerna.json
{
  "$schema": "node_modules/lerna/schemas/lerna-schema.json",删除
"packages": [
    "packages/*"
  ],
  "npmClient": "yarn",
  "version": "0.0.0",
  "useWorkspaces":true不要这项
}
```

```
package.json
{
  "name": "root",
  "private": true,
  "workspaces": [
    "packages/*"
  ],
  "dependencies": {},
  "devDependencies": {
    "lerna": "^4.0.0"
  }
}

```

```
yarn  install
lerna  create  button （创建一个目录并且初始化把它变成一个包，命名作用域包：@my-ui/button）
lerna  create  icon  (@my-ui/icon)
yarn  add  typescript@4.2.3  –W 
npx  tsc  --init

```

```
修改配置文件：
{
  "compilerOptions": {
    "target": "ESNext", // 打包的目标语法
    "module": "ESNext", // 模块转化后的格式
    "esModuleInterop": true, // 支持模块转化
    "skipLibCheck": true, // 跳过类库检测
    "forceConsistentCasingInFileNames": true, // 强制区分大小写
    "moduleResolution": "node", // 模块解析方式
    "jsx": "preserve", // 不转化jsx
    "declaration": true, // 生成声明文件
    "sourceMap": true // 生成映射文件
  }
}

```

```
yarn  add  vue@next  -W  选择版本3.5.16(3.0.7)
lerna  create  my-ui  创建总入口
yarn  install     生成node_modules里创建组件的软链
创建软链之前一定要修改组件文件夹下的package.json的"name": "@my-ui/***"

```

```
yarn add webpack@5.26.3 webpack-cli@4.10.0 webpack-dev-server@3.11.2 vue-loader@16.1.2 @vue/compiler-sfc@3.0.7 -D -W
yarn add babel-loader@8.2.2 @babel/core@7.13.10 @babel/preset-env@7.13.10 @babel/preset-typescript@7.13.0 url-loader@4.1.1 file-loader@6.2.0 html-webpack-plugin@5.3.1 css-loader@5.1.3 sass-loader@11.0.1 style-loader@2.0.0 sass@1.32.8 -D -W
babel-plugin-module-resolver

-W 安装到根下

npm  run  website-dev

```

```
报错：error:0308010C:digital envelope routines::unsupported
"scripts": {
    "website-dev": "SET NODE_OPTIONS=--openssl-legacy-provider && webpack serve --config ./website/webpack.config.js"
}


```

```
yarn add gulp@4.0.2 gulp-autoprefixer@7.0.1 gulp-cssmin@0.2.0 gulp-dart-sass@1.0.2 gulp-rename@2.0.0 -D –W
将文件中的@import "./icon.scss";改为@use "./icon.scss";
icon.scss中不识别$namespace，在顶部再添加一次$namespace:'my';

yarn add rollup@2.39.0 rollup-plugin-typescript2@0.36.0 @rollup/plugin-node-resolve@11.2.0 rollup-plugin-vue@6.0.0 -D –W

```

```
npm  run  website-dev
"scripts": {
    "website-dev": 页面预览,
    "build:theme": 打包样式,
"build": 打包组件库
"build:esm-bundle": 打包全量的
  }

```

```
yarn add @babel/plugin-transform-typescript@7.13.0 –W

对于创建外壳组件button外的button-group和col的row，需要删除button-group和row文件夹里的src（lib）并创建index.ts文件，将button-group和row创建在button和col的src文件夹下
一定要删除框架文件夹里没用的lib！！！
把一个数组格式化成对象用reduce
计算属性的值在使用时都要 .value

```