my-component-gallery
v0.1.0
Published
我的第一个个人组件库
Downloads
2
Readme
📦 My Component Gallery
这是一个基于 Vue3 和 Webpack5 的组件库,来自慕课:Vue 3.0 开发 UI 组件库
📝 项目介绍
本项目是一个组件库,使用了 Vue3 和 Webpack5。在项目中,我们会从头开始开发一个 UI 组件库,每个组件的开发和使用都会详细讲解,同时也会介绍一些常见的 UI 交互效果和组件的设计思路。
🚀 开始使用
- 克隆项目到本地
git clone https://github.com/yourusername/my-component-gallery.git
- 安装依赖
cd my-component-gallery
npm install
- 启动项目
npm run serve
- 打包项目
npm run build
🤔 问题总结
在开发过程中,我遇到了一些问题,总结如下:
1. 修改文件目录结构
首先,为了不混淆重点目标,将src
文件夹rename
为example
。但是在修改时会遇到一个错误:
Error: EPERM: operation not permitted, rename 'd:\my-component-gallery\src'
解决方法:
打开文件资源管理器,进入当前用户文件夹,点击属性,进入安全设置,将用户权限修改为完全控制,然后应用即可。
2. 写 SCSS 文件应用到组件上时,Cannot find module 'sass'
在项目目录下,运行以下命令:
npm install -g cnpm --registry==https://registry.npm.taobao.org
cnpm install node-sass
3. 配置vue.config.js
在使用 Vue3 时,需要使用app.use
而不是Vue.use
,同时需要修改vue.config.js
文件的配置。
配置后的内容如下:
// 开发环境配置
const devConfig = {
//...
pages: {
index: {
entry: "examples/main.js",
template: "public/index.html",
filename: "index.html",
},
},
configureWebpack: {
resolve: {
extensions: [".js", ".vue", ".json"],
alias: {
"@": resolve("packages"),
assets: resolve("examples/assets"),
views: resolve("examples/views"),
},
},
},
devServer: {
port: 8091, // 固定端口
hot: true, // 开启热更新
open: "Google Chrome", // 固定打开浏览器
},
};
const buildConfig = {
//...
};
module.exports =
process.env.NODE_ENV === "development" ? devConfig : buildConfig;
4. 安装依赖包
在开发过程中会用到很多依赖包,比如sass
、webpack
、webpack-cli
、vue-loader
、gulp
、gulp-sass
、gulp-minify-css
等等。由于版本问题,有时需要在引入gulp-sass
时加上(require('sass'))
。
// 加上(require('sass')) 在gulpfiles.js这个文件中
const sass = require("gulp-sass")(require("sass"));