This is the second day of my participation in the August More text Challenge. For details, see: August More Text Challenge

1 overview

I believe that many front-end partners have written a lot of Vue components, which must have precipitated down the content

So how do you create your own Vue component?

Let’s start with a list of the tools necessary for this tutorial:

  • Vue CLI
  • pnpm
  • VuePress

2 Construction project

2.1 Creating a project using the Vue CLI

In my previous article, I explained how to use the graphical interface of the Vue CLI to create a Vue project and save a template

Those in need can read Vue to create projects using a visual interface

It will not be repeated here

2.2 Adjust project deconstruction

After the directory is created, the directory structure is as follows:

Unlike development projects, we need to include the following three directories:

  • Packages: Directory of component code
  • Examples: Examples project directory
  • Lib: compile directory

The adjustment process is not a hassle

Let’s create an empty directory for packages and lib

Next, rename the SRC directory to examples

Not yet, we need to modify vue.config.js(or create it if it doesn’t) and adjust the entry file to examples main.js:

constdebug = process.env.NODE_ENV ! = ='production';
module.exports = {
  pages: {
    index: {
      // Page entry
      entry: 'examples/main.js'.// Source of template
      template: 'pubilc/index.html'.// Output file name
      filename: 'index.html'}}}Copy the code

Now you can try PNPM Serve, vue’s sample project is accessible

3 Start coding

Once the project structure is adjusted, we can start writing code using the Packages directory as the home directory of the project

At the same time, references are made in examples, and the Vue project can be started for testing at development time

More on the details of writing component code later (I’m lazy)

4 compilation

Once the code is developed, we need to compile it

Modify package.json by adding the compile script command lib:

{
  "name": "test"."version": "0.1.0 from"."main": "packages/index.js"."scripts": {
    "lib": "vue-cli-service build --target lib --name test --dest lib packages/index.js". }}Copy the code

Test is the component name and can be replaced by yourself

5 document

A good component is always better documented

Using (VuePress) and Markdown, you can reproduce a great document that looks exactly like the official document

6 Publish to NPM

There are so many tutorials on the Internet, all you need is a free NPM account