my-component-gallery v0.1.0

📦 My Component Gallery

这是一个基于 Vue3 和 Webpack5 的组件库，来自慕课：Vue 3.0 开发 UI 组件库

📝 项目介绍

本项目是一个组件库，使用了 Vue3 和 Webpack5。在项目中，我们会从头开始开发一个 UI 组件库，每个组件的开发和使用都会详细讲解，同时也会介绍一些常见的 UI 交互效果和组件的设计思路。

🚀 开始使用

1. 克隆项目到本地

git clone https://github.com/yourusername/my-component-gallery.git

2. 安装依赖

cd my-component-gallery
npm install

3. 启动项目

npm run serve

4. 打包项目

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"));