LOLstyle-ui组件开发实战（一）——项目搭建 | 8月更文挑战

在找实习没人要后，准备本身写一个 LOLstyle 的 vue2.x 的组件库来提高一下本身，便在掘金上记录一下，来督促本身以避免半途而废，也但愿能够帮到一样有想写组件库却无从下手的朋友，咱们共同进步！！

一.项目初始化

使用vue-cli脚手架快速建立一个vue项目

vue create lolstyle-ui

根据本身的习惯来选择一些初始化配置

首先选择 Manually select features 来手动选择配置

这里选择 Choose Vue version，Babel，CSS Pre-processors，Linter / Formatter 由于是vue2的组件的版本因此选择vue2

而后CSS预处理器我这里选择第一个 Sass/SCSS（with dart-sass） Eslint风格根据本身的喜爱选择，我这里选择ESlint + standard config(没有分号)

这里检测代码，建议新手两个都选上 我这里将配置文件单独存放方便处理 稍等片刻后，出现下图，即安装完成

二.项目目录

经常使用的3个文件为 src下的

components 用来存放组件
 App.vue加载使用展现组件
 main.js 注册组件
复制代码

Wod

首先将components下默认的HellowWorld.vue删除 将App.vue里的默认代码修改成

<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>
复制代码

这样就获得了一个最干净的脚手架 在控制台里将项目跑起来 yarn serve

接下来就会和你们一块儿封装一些经常使用的组件

end

respect by myself