Begin to build

Start by installing a global library vuE-SFC-rollup

npm install -g vue-sfc-rollup 
Copy the code

After the installation is complete, go to the directory where you want to save the project file in the command line window and run the following command to initialize the project

sfc-init 
Copy the code

Select the following options in the prompt:

  • Is this a single component or a library? Library
  • What is the npm name of your library? (Names must be unique in NPM, I’m using amme-lib here)
  • Will this library be written in JavaScript or TypeScript? JavaScript (feel free to choose TypeScript, as long as you know your options)
  • Enter a location to save the library files: (The project folder name, default is the NPM name set in the previous step, so you can directly press Enter to take the default value.)

run

Once setup is complete, go to the project directory and execute NPM install

cd amme-lib
npm install
Copy the code

Run NPM run serve and visit http://localhost:8080/ to see the results, as shown below

Published to the NPM

Since this is the first release of our component library, it is recommended to set the version number to 0.0.1 in the package.json file before executing the build command, and then package it

npm run build
Copy the code

Next add your NPM account to terminal tips: Please make sure you have an NPM account

npm adduser
Copy the code

I met a little problem in the 403 Forbidden – PUT https://registry.npmjs.org/amme-lib – who goes by

After verification, NPM image can not be taobao image

Along with the following switching method and view mode

npm config set registry  https://registry.npmjs.org/  
npm config get registry   
Copy the code

CNPM is recommended if you need to use Taobao image

npm install -g cnpm --registry=https://registry.npm.taobao.org 
Copy the code

release

npm publish
Copy the code

Visit the NPM website to view the released packages

Install the published NPM package

npm install amme-lib
Copy the code