前言
当市面上主流的组件库不能满足我们业务需求的时候,那么我们就有必要开发一套属于自己团队的组件库。 以下用一个简单的组件来讲述基于Vue3.0 + TS的组件从开发到发布npm仓库的全过程(参考element-plus)
环境
这里列出本文所使用的环境版本
-
vue 3.0
-
vue/cli 4.5.9
-
nodeJs 14.15.1
-
npm 6.14.8
> vue --version
@vue/cli 4.5.9
> npm -v
6.14.8
> node -v
v14.15.1
步骤
1. 创建项目
使用 vue-cli 创建一个 vue3 项目,假设项目名为 nandit-vue-vant
> vue create nandit-vue-vant
选择自定义Manually select features,回车进入下一步
选中Choose Vue version、Babel 、TypeScript、 CSS Pre-processors 这4项,回车进入下一步
- Choose a version of Vue.js that you want to start the project with 选择 3.x (Preview)
- Use class-style component syntax? 输入n
- Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? 输入y
- Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default) 选择 Sass/SCSS (with dart-sass)
- Where do you prefer placing config for Babel, ESLint, etc.? 选择 In dedicated config files
- Save this as a preset for future projects? 输入y,回车后输入模板名保存模板
最后回车,等待项目创建完成
创建完成,目录结构如图
2. 规划目录
├─ build // 编辑打包脚本目录,用于存放脚本文件
│ ├─ rollup.config.js
├─ docs // 文档目录,用于生成 vuepress 文档页面
│ ├─ .vuepress
│ ├─ guide
│ ├─ README.md
├─ examples // 原 src 目录,改成 examples 用于示例展示
│ ├─ App.vue
│ ├─ main.ts
├─ packages // 新增 packages 目录,用于编写存放组件,如button
│ ├─ button
│ ├─ index.ts
├─ typings // 新增 typings 目录,用于存放 .d.ts 文件,把shims-vue.d.ts移到这里
│ ├─ shims-vue.d.ts
├─ .npmignore // 新增 .npmignore 配置文件
├─ vue.config.js // 新增 vue.config.js 配置文件
将 src
目录改为 examples
,并将里面的 assets
和 components
目录删除,移除 App.vue
里的组件引用。
调整后的目录结构如图
3. 项目配置
3.1 vue.config.js
新增 vue.config.js 配置文件,适配重新规划后的项目目录
const path = require('path')
module.exports = {
// 修改 pages 入口
pages: {
index: {
entry: "examples/main.ts", //入口
template: "public/index.html", //模板
filename: "index.html" //输出文件
}
},
// 扩展 webpack 配置
chainWebpack: (config) => {
// 新增一个 ~ 指向 packages 目录, 方便示例代码中使用
config.resolve.alias
.set('~', path.resolve('packages'))
}
}
3.2 .npmignore
新增 .npmignore 配置文件,组件发布到 npm 中,只有编译后的发布目录(例如lib)、package.json、README.md才是需要被发布的,所以我们需要设置忽略目录和文件
# 忽略目录
.idea
.vscode
build/
docs/
examples/
packages/
public/
node_modules/
typings/
# 忽略指定文件
babel.config.js
tsconfig.json
tslint.json
vue.config.js
.gitignore
.browserslistrc
*.map
3.3 tsconfig.json
修改 tsconfig.json 中 paths 的路径
"paths": {
"@/*": [
"src/*"
]
}
改为