《翻转组件库之init项目》

Posted 2022-03-19 杨晓风-linda

目录

前言

全流程

水到渠成

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

修改目录结构

相关

《翻转组件库之卡片设计》_杨晓风-linda的博客-CSDN博客

---

前言

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

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

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） 

相关

《翻转组件库之卡片设计》_杨晓风-linda的博客-CSDN博客