从零开始撸一个 Vue 组件库之——1：vue 创建项目

最新推荐文章于 2024-07-23 17:41:22 发布

Beblien

最新推荐文章于 2024-07-23 17:41:22 发布

阅读量400

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_50656154/article/details/125406983

本文介绍了如何从零开始创建一个基于Vue的组件库。首先使用`vue create`命令创建名为my-ui的项目，选择手动配置选项。接着，选择Vue 2.x版本，启用Babel进行ES6转译，CSS预处理器选择Sass/SCSS（dart-sass）。在设置中，选择保存时进行错误预防的ESLint检查，并将配置写入package.json。最后，通过`npm run serve`启动项目，在本地localhost:8080预览运行结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1:环境都准备好后，我们现在来创建一个vue项目。

接着在命令行输入：

vue create my-ui

my-ui 是你的项目名字。

2：安装选择，我们选最后一个手动配置。

Default ([Vue 2] babel, eslint)
Default ([Vue 3] babel, eslint)
> Manually select features 手动选择

按回车后继续：

光标移动到 CSS Pre-processors css ，按下空格选中后回车继续。

() Choose Vue version 选择vue版本
>() Babel 语法转换器把ES6转换成ES5
() TypeScript
( ) Progressive Web App (PWA) Support
() Router 路由管理器
() Vuex 状态管理库
(*) CSS Pre-processors css
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

版本选择2.0x

选第一个Sass/SCSS

Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less
Stylus Sass/SCSS (with dart-sass)

这一项目，我们选择保存时检查 >Lint on save

ESLint with error prevention only
ESLint + Airbnb co

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Beblien

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue.js 支付页面实例：超实用、新手友好，全功能代码教程」「从零开始，用 Vue.js 打造一个简洁的支付页面｜初学者必看」「一步步带你用 Vue.js 实现支付页面——倒计时和二维码支付功能

南北极之间

10-17

702

Vue.js 支付页面实例：超实用、新手友好，全功能代码教程」「从零开始，用 Vue.js 打造一个简洁的支付页面｜初学者必看」「一步步带你用 Vue.js 实现支付页面——倒计时和二维码支付功能」「超详细 Vue.js 支付页面教程：为你的项目添加实用交互功能」「新手必备！用 Vue.js 和 HTML/CSS 构建互动支付页面」「Vue.js 支付页面项目：实时倒计时和优惠计算全解析」「Vue.js 小白教程：轻松实现带倒计时的支付页面，全程手把手教学」「完整代码＋图解｜用 Vue.js

vue的组件库如何从0开始

发果叁

10-07

2545

对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率* Username 用户名* Password 密码* Email 邮箱收到的验证。

参与评论您还未登录，请先登录后发表或查看评论

从零开始撸一个Vue3.0组件库-并上传到NPM上

小帅的编程笔记

09-18

753

创建Vue3.0项目我们使用Vue-CLI来创建一个新的Vue项目，并起名为like-ui。 npm install -g @vue/cli vue create like-ui 项目的基础配置选择如下：Babel、CSS预处理器、ESLint。Vue版本选择3.0 在选择CSS预处理器版本时，我选择SCSS（dart-sass），因为node-sass是出奇的难装，有过经历的都知道。最后这是我的所有选择配置。编写组件可以看到项目的src/components文件夹下面已经有一个HelloW

【万字长文】从零配置一个vue组件库

sinat_33488770的博客

08-01

500

简介本文会从零开始配置一个monorepo类型的组件库，包括规范化配置、打包配置、组件库文档配置及开发一些提升效率的脚本等，monorepo不熟悉的话这里一句话介绍一下，就是在一个git仓库里包含多个独立发布的模块/包。 ps.本文涉及到的工具配置其实在平时开发中一般都不需要自己配置，我们使用的各种脚手架都帮我们搞定了，但是我们至少得大概知道都是什么意思以及为什么，说来惭愧，笔者作为一个三四年工龄的前端老人，基本没有自己动手配过，甚至没有去了解过，所以以下大部分工具都是笔者第一次使用，除了介绍如何配置也会

从零开始撸一个Vue2.0组件库-并上传到NPM上

weixin_42950333的博客

09-22

1233

创建Vue2.0项目我们使用Vue-CLI来创建一个新的Vue项目，并起名为yunpeng-ui。 vue create yunpeng-ui 最后这是我的所有选择配置编写组件可以看到项目的src/components文件夹下面已经有一个HelloWorld组件，让我们修改一下目录结构。把HelloWorld组件移入新创建的li-hello-world文件夹中并改名为index.vue。然后再写一个组件，新创建文件夹zyp-button，创建index.vue，简单写个按钮组件。 <tem

从零开始搭建自己的vue组件库——01创建

u014050961的博客

10-29

1744

从零开始搭建自己的vue组件库——01创建引言项目创建修改目录结构添加第一个组件以及样式文件夹引言因工作需要，要打造一套属于自己团队的组件库，本人也是第一次接到这种任务，虽然不着急，但是之前从来没做过，因此特意再此记录下过程，也希望自己能坚持下去，当然，过程中少不了查阅各种资料，也会再次记录下各种各样的问题，本组件库的开发基于vue2.0，主要用于pc端，会参考element-ui进行开发项目创建首先第一步是要创建一个vue工程 vue create xxxx 创建具体流程在这里不再详细说明，创建完

【vue】从零开发组件库并发布npm

Mr.J的博客

04-06

2157

前言在工作中，我们经常使用element-ui、iview等一系列组件库。久而久之，我自己也在想可不可以开发一个属于自己的组件库，并且到时候直接npm install xxx 之后就可以直接安装引入使用。本文旨在分享前端萌新自己的vue组件的搭建和发布到npm上的流程。如有错误，请大佬们指出，一起交流。 vue项目初始化 1. 创建vue项目 vue create project-name 2. 将项目目录修改成以下结构（参考了iview的目录结构） |-- project-name |

从零开始搭建自己的vue组件库——02测试发布

u014050961的博客

10-30

893

从零开始搭建自己的vue组件库——02测试发布引言历史导航本地测试本地打包发布官网查看代码库引言上一篇文章介绍了打造vue组件库的第一步创建项目，本章将继续介绍本地测试，以及发布到npm 历史导航前一篇：从零开始搭建自己的vue组件库——01创建本地测试首先本地测试需要在examples里编写代码，可以按照正常的vue项目去写，唯一区别就是原来的src目录变成了examples目录，其他一切正常，在examples的main.js里引入packages的button，为了方便测试，直接添加成全局

从零开始创建vue3项目——包含项目初始化、element-plus、eslint、axios、router、pinia、echarts

热门推荐

weixin_45031595的博客

08-17

1万+

vue-cli3提供了两种方式集成sass/scss 创建项目时选择预处理器sass 手动安装sass-loader 安装sass 方法一：创建vue项目时选择预处理器sass 使用vue-cli3创建vue项目 Vue CLI v4.5.15 ? Please pick a preset: Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) > Manually select features

日常开发记录--Sass/SCSS (with dart-sass)与Sass/SCSS (with node-sass)

machine_vision123的博客

05-30

434

Sass/SCSS (with dart-sass) // 更推荐使用 Sass/SCSS (with node-sass) // 已弃用创建项目下载时会报错

CSS, Sass, SCSS、Dart-Sass、Node-Sass 关系以及 SCSS语法

EmotionComputer

12-20

749

Sass(Syntactically Awesome Style Sheets) ,是一种css预处理器和一种语言, 它可以用来定义一套新的语法规则和函数，以加强和提升CSS. 它有很多很好的特性，但是它有类似Ruby的语法，没有花括号，没有分号，遵循严格的缩进它在书写规则，变量命名方面和CSS代码有着很大的区别。于是，后来官方在2010年推出了一个全新的语法，叫做SCSS, 意思是 Sassy...

Sass学习笔记 — 3. 深入学习

jiangbo110119的博客

01-30

1825

Sass (Syntactically Awesome StyleSheets) Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass

vue2 编写自己的组件库，并发布到npm

qq_42859450的博客

06-22

2148

vue2编写自己的组件库，并发布到npm

关于sass（scss）、less、postcss、stylus等的用法与区别

weixin_34162228的博客

03-27

1775

一. Sass/Scss、Less、stylus是什么?它们都是css预处理器。css预处理器的概念：CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题。比如说：Sass（SCSS）、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT...

SASS学习系列之(二)--------- SASS，SCSS环境搭建(node-sass)

WiFi_Uncle的专栏

09-18

1万+

SASS，SCSS环境搭建(Ruby) http://blog.csdn.net/wx11408115/article/details/78019576 前期准备 1. node 环境. (没有安装的同学戳这里 window 下安装node.js http://blog.csdn.net/wx11408115/article/details/76609889 来来来，开始了...

Vue组件库入门：创建和使用Vue组件库

通过本示例项目，开发者可以学习如何创建一个Vue组件库，包括项目的初始化、依赖项的配置、组件的编写与测试，以及文档的编写和发布。同时，理解组件库的构建对于提升开发效率和项目可维护性具有重要的实践意义。