The original

In fact, when I used VUe2, I wanted to write an open source component library and learn how to use it. If the company has its own needs can also be quickly started. At first I thought I could find good tutorials on the Internet, such as environment building – component writing – unit testing – document writing – package publishing, but there was no perfect one. Mooc has a tutorial on react component library, storybook has a tutorial on document writing, vue3 has a component library tutorial on configuration form writing. Can’t find data on the net really, have no way to write oneself, make difficulty to also want to go up without difficulty. I also found some materials and guidance on the Internet, together with the open source Element-Plus and Element3 component libraries, and I want to share my learning experience with you. Not all of them are correct, but there are some problems. I mainly study with you.

day-ui

So far, I’ve simply written two components, styles not written by myself, using element-plus SCSS files. Internal logic is written in reference to a little bit, to better understand the implementation of the build and vuE3 syntax, because my English name in the company is Day, so it is called Day-UI.

NPM (don’t know why there are downloads 😂, my name is misleading?)

Making the address

Github address of document

Online access to documents

If you are interested, you are welcome to pay attention to star, and we plan to write out the implementation principle of each component to know why.

Environment set up

We directly use VUE-CLI to build the project framework, because to use VUe3, the vuE-CLI version must be upgraded to [email protected] or above.

npm install -g @vue/cli
Copy the code

Creating a new project

vue create xxx
Copy the code

Why dart- SCSS

You can start the project as prompted, and if a dependency problem is reported, remove node_modules and reinstall

configurationprettier

Create the.prettierrc.json file in the project root directory

{"singleQuote": true, // use single quotation marks "semi": false, // use semicolons "trailingComma": "None" // Use no commas on the last element}Copy the code

We open vscode Settings, configure save formatting. If you want vscode all projects to have this function, you can select the user, I select workspace, the current project, does not affect the structure of other projects formatting

The root directory creates one.vscode/setting.jsonFile,

{"editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" // add}Copy the code

If the following exceptions are found:

Refer to the article

Environment set up

  1. We’re not doingvueProject, can putsrcA directory is deleted and createdexamplesDirectory for testing written components; createpackagesThe directory houses components we write ourselves.

The main.js and app. vue code is the same as in the SRC directory

  1. Root Directory Creationvue.config.jsModify the configuration
const path = require('path') const join = path.join function resolve(dir) { return path.resolve(__dirname, } module.exports = {pages: {index: {entry: 'examples/main.js', // run the entry template: 'public/index.html', filename: {pages: {index: {entry: 'examples/main.js', // run the entry 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() } }Copy the code

You can download the elemental-Plus project directly. The style file is located in the elemental-plus /packages/theme-chalk/ SRC/directory. Create a styles directory in the root directory and copy the style file into it.

Because we call component library day – the UI, and so the style file is to use the d – beginning, modify the styles/mixins/config. The SCSS

$namespace: 'd'; .Copy the code

The resulting directory structure is as follows:

Use demo - button.vue-app.vue-main.js - packages - button-__tests__ unit test - Button.spec.js-src-index. vue-index. js // single component entry - index.js // entry - styles // component style - typings // Component typeCopy the code

Document initialization

Vitepress-for-component is a scaffolding tool that you can use on GitHub. You can also use vitepress-for-Component on GitHub

  1. Erection of scaffolding
yarn create vlib
Copy the code
  1. Install dependencies
NPM I or YARNCopy the code

You may encounter the following problemsMaybe the author’s development platform is different, of course this package has no impact on the project startup, packaging, so we can ignore, delete in the dependency, before performing installation.

  1. Start the project

  1. usegithubaccess

ingithubCreate a repository name consistent with the project name of the document. Static resource access will occurUpload the document projectFound in the warehousesettingsMenu found below:Let’s just clickchoose a themePick any topic,githubWill automatically creategh-pagesbranchConfigure your sitePut your own name on the front, in the formatName. Making. IO/warehouse Click the url to open it successfully5. Deploy document packagingnpm run docs-build, generated file indocs/dist 中

Since we configured to access the root directory of GH-Pages, we can transfer the files under dist to the gh-Pages branch.

Switch branchgit checkout gh-pages. thedistThe following contents are placed in the root directory, create.gitingoreFile if you don’t have to write, upload

NICE!!!

  1. There are two directories for files. You can also pack them and put them directly into docs. You don’t need to move the files

Next article we first write down simple button, icon components, quick learning vuE3 syntax and packaging configuration, if there is a problem welcome to correct!

If this article is helpful to you, please share it in moments! Thanks for reading!