《翻转组件库之init项目》

杨晓风-linda

已于 2022-03-17 15:45:15 修改

阅读量1k

点赞数

分类专栏：前端工程化文章标签： vue.js react.js 前端

于 2022-03-16 21:46:53 首次发布

本文链接：https://blog.csdn.net/yxf15732625262/article/details/123414055

版权

前端工程化专栏收录该内容

50 篇文章 7 订阅

订阅专栏

前言

背景：几乎所有大厂都会使用组件库，有的会开发自己的组件库

价值：提升开发效率，节省时间成本和人力成本

example：阿里巴巴-Antd Design；饿了么-Element

全流程

水到渠成

本次技术选型，选择vue框架，来剖析如何从零到一实现一个组件库

用脚手架vue-cli生成一个项目

1、官方文档地址：介绍 | Vue CLI

2、全局安装脚手架：（本地需要确保已经安装nodejs，注意nodejs的版本）

npm install -g @vue/cli

3、查看脚手架是否安装成功

vue --version

4、使用脚手架创建项目

vue create component-lib-vue-demo

此时会被提示选取一个 preset，本次示例按照默认提供的选择一路按下去即可

5、运行项目

cd component-lib-vue-demo // 进入到项目根目录
npm run serve // 运行项目

6、项目访问：http://localhost:8081 (控制台会输出项目访问地址)

修改目录结构

1、将components文件夹移动到项目根目录，放核心组件代码

2、将src文件夹重命名为examples

3、将无用代码删除

4、修改入口文件配置，新建vue.config.js

/*
 * @Descripttion: 
 * @version: v1.0
 * @Author: linda
 * @Date: 2022-03-02 17:21:19
 * @LastEditors: linda
 * @LastEditTime: 2022-03-02 17:24:25
 */
module.exports = {
  pages: {
   index: {
     entry: 'examples/main.js',
     template: 'public/index.html',
     filename: 'index.html'
   }
  }
}

使用vue create 项目名称命令创建项目，项目启动，默认入口文件为src/main.js, 对初始化的项目进行目录结构调整以后，需新建vue.config.js来重置项目启动入口

5、调整components 文件下目录结构

在mac下可使用brew包管理工具安装tree：brew install tree

使用tree查看目录结构：tree

使用tree --help可查看相关命令

6、从目录结构看，样式语言采用scss，此时需要安装：

npm i sass-loader -D

npm i node-sass -D

在安装sass-loader以后，运行项目，如果报错：

TypeError：this.getOptions is not a function

这个报错在于sass-loader版本可能过高，需要降低其版本

做如下操作：

npm uninstall sass-loader -D // 卸载安装的版本

npm i sass-loader@版本号 -D // 重新安装低版本（sass-loader@5）