After looking for an internship no one wanted, I prepared to write a LOLstyle vue2. X component library to improve myself, I will record it on the nuggets, to urge myself to avoid halfway, also hope to help the friends who also want to write component library but have no way to start, we make progress together!!

I. Project initialization

Use vuE-CLI scaffolding to quickly create a VUE project

vue create lolstyle-ui

Choose some initial configurations based on your own habits

First chooseManually select featuresTo manually select the configuration

Choose hereChoose Vue version, Babel, CSS pre-processors, Linter/Formatter Vue2 was chosen because it is a component version of VUe2

And then the CSS preprocessor let me pick the first one hereSass/SCSS (with Dart-SASS) Eslint styles will be chosen according to your preferences, so I’ll choose them hereESlint + standard config(No semicolons)

Check the code here, it is recommended that novices choose bothI’ll store the configuration file separately for convenienceAfter a few moments, the following image appears, indicating that the installation is complete

Ii. Project Catalog

The three commonly used files are those under SRC

Components are used to store the component app. vue loading using the display component main.js registered componentCopy the code

Wod

First remove the default hellowWorld.vue from components and change the default code in app.vue to

<template>
  <div id="app">
    <h1>LOLstyle-ui</h1>
  </div>
</template>

<script>

export default{}</script>

<style lang="scss">
body {
  background-color: #0D1E28
}

h1 {
  color: #CDBE91
}
</style>
Copy the code

This gets the cleanest scaffolding in the console to run the project yarn serve

I’ll encapsulate some common components with you

end

respect by myself