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