vue3组件开发详细教程（基于vue3.0从0-1搭建组件-环境搭建）
vue3组件开发详细教程（基于vue3.0从0-1搭建组件-环境搭建）我们直接使用 vue-cli 搭建项目框架，因为要用到 vue3 ，得先把 vue-cli 的版本升级到 vue-cli@4.5 以上。如果您感兴趣的话，欢迎给个 star 关注哈，后面计划把每个组件的实现原理都写出来，知其所以然。github地址：https://github.com/Bluestar123/day-ui文档github地址：https://github.com/Bluestar123/day-ui-docs文档在线访问：https://bluestar123.github.io/day-ui-docs/
初衷其实之前使用 vue2 的时候就想写个开源组件库，学习交流使用。如果公司有自己的需求也可以快速上手。开始想的是能在网上找到好的教程，环境搭建 - 组件编写 - 单元测试 - 文档编写 - 打包发布，但是没有很完善的，慕课网有个 react 组件库的教程，storybook 编写文档的，vue3 的有个组件库教程是写配置表单的。实在网上找不到资料了，没办法就自己写嘛，没有困难制造困难也要上。网上也是找了一些资料指导，再配合开源的 element-plus 和 element3 组件库，想把自己的学习经验和大家分享下，不一定全对，也会有一些问题，主要是和大家一起学习，大家有什么好的意见我也会融合进来，对自己也是提升。
day-ui目前就简单写了两个组件，样式没有自己写，使用的 element-plus 的 scss 文件。内部逻辑都是参考一点点写的，更好的理解组建的实现和 vue3 的语法，因为我在公司英文名叫 day，就叫 day-ui 了。
npm：https://www.npmjs.com/package/day-ui
（不知道为什么会有下载量，我的名难道误导别人了？）
github地址：https://github.com/Bluestar123/day-ui
文档github地址：https://github.com/Bluestar123/day-ui-docs
文档在线访问：https://bluestar123.github.io/day-ui-docs/
如果您感兴趣的话，欢迎给个 star 关注哈，后面计划把每个组件的实现原理都写出来，知其所以然。
环境搭建我们直接使用 vue-cli 搭建项目框架，因为要用到 vue3 ，得先把 vue-cli 的版本升级到 vue-cli@4.5 以上。
npm install -g @vue/cli
创建新项目
vue create xxx
为什么使用dart-scss(https://www.dart-china.org/t/topic/146)
按照提示可以启动项目，如果报依赖问题，可以删除 node_modules，重新安装
配置 prettier在项目根目录创建 .prettierrc.json 文件
{
"singleQuote": true // 使用单引号
"semi": false // 不用分号
"trailingComma": "none" // 最后一个元素不加逗号
}
我们打开 vscode 的设置，配置保存格式化。如果想 vscode 所有项目都有这个功能，可以选用户，我这里选择工作区，当前项目，不影响其他项目结构格式化
根目录会创建一个 .vscode/setting.json 文件
{
"editor.formatOnSave": true
"editor.defaultFormatter": "esbenp.prettier-vscode" // 添加
}
如果发现有如下异常：
参考文章
环境搭建- 我们不是做 vue 项目，可以把 src 目录删除，创建 examples 目录，用来测试写的组件；创建 packages 目录存放我们自己写的组件。
main.js 和 App.vue 代码和之前 src 目录下的一致
- 根目录新建 vue.config.js 修改配置
const path = require('path')
const join = path.join
function resolve(dir) {
return path.resolve(__dirname dir)
}
module.exports = {
pages: {
index: {
entry: 'examples/main.js' // 运行入口
template: 'public/index.html'
filename: 'index.html'
}
}
configureWebpack: {
resolve: {
extensions: ['.js' '.vue' '.json']
alias: {
packages: resolve('packages')
assets: resolve('examples/assets')
views: resolve('examples/views')
}
}
}
chainWebpack: (config) => {
config.module.rule('js').include.add('/packages').end()
}
}
npm run sreve 正常启动项目
- 引入全局样式文件 可以直接把 element-plus 的项目下载下来，样式文件放在 element-plus/packages/theme-chalk/src/ 目录下。在根目录创建 styles 目录，把样式文件拷贝进去。
因为我们组件库叫 day-ui，所以样式文件也是使用 d- 开头，修改 styles/mixins/config.scss
$namespace: 'd';
...
得到的目录结构如下：
- examples
- example // 组件使用demo
- button.vue
- App.vue
- main.js
- packages // 组件包源码
- button
- __tests__ 组件的单元测试
- button.spec.js
- src
- index.vue
- index.js // 单组件入口
- index.js // 入口
- styles // 组件样式
- typings // 组件的类型
文档初始化
开始想使用 vitepress 搭建文档，在 GitHub 找到了现成的脚手架工具 vitepress-for-component，地址（https://dewfall123.github.io/vitepress-for-component/） 大家也可以直接看官网快速上手
- 安装脚手架
yarn create vlib
- 安装依赖
npm i 或者 yarn
可能遇到以下问题
可能作者的开发平台不同，当然这个包对项目的启动，打包没有影响，所以我们可以忽略，在依赖中删除，在执行安装。
- 启动项目
- 使用 github 访问 在 github 上创建一个和文档项目名一致的仓库名，会有静态资源访问
把文档项目上传
仓库中找到 settings 菜单找到如下：
我们直接点击 choose a theme 选中随便一个主题，github 会自动创建 gh-pages 分支
配置网站
前面的换成你自己的名字，格式是 name.github.io/仓库名
点击网址成功打开
- 部署文档 打包npm run docs-build，生成的文件在 docs/dist 中
因为我们配置的访问 gh-pages 的 root 根目录，所以把 dist 下的文件传到 gh-pages 分支即可。
切换分支 git checkout gh-pages。把 dist 下的内容都放到根目录下，创建 .gitingore 文件不用的写上，上传
NICE!!!
- 提供了两个文件目录，也可以打包后直接放到 docs 里面，直接访问，不用移动文件，build 打包的时候改下地址
下一篇我们先写下简单的 button， icon 组件，快速的学习 vue3 的语法和打包配置，如果有问题的话欢迎指正!
如果文章对你有帮助，欢迎分享到朋友圈！谢谢阅读！
欢迎关注小编公众号：与前端沾边
