【亲测免费】 VueAwesome 教程

1. 项目目录结构及介绍

VueAwesome 是一个用于创建图标集合的库，它基于 Feather icons 设计。以下是项目的基本目录结构：

.
├── dist                # 构建后的输出目录，包含 CSS 和 JS 文件
├── src                 # 源代码目录
│   ├── icons           # 存放所有图标组件的源码
│   └── index.js        # 主入口文件，集成所有图标
├── public              # 静态资源目录，如 favicon 等
├── package.json        # 项目配置文件
└── webpack.config.js   # Webpack 构建配置

• dist: 包含编译后的图标库文件。
• src/icons: 各个图标组件的源代码，每个图标通常对应一个 .vue 文件。
• src/index.js: 图标库的主要入口文件，聚合所有图标并导出。
• public: 项目中需要静态托管的资源。
• package.json: 项目依赖和脚本配置。
• webpack.config.js: 使用 Webpack 进行构建时的配置。

2. 项目的启动文件介绍

项目并没有传统的启动文件（如 server.js 或 main.js），但它使用了 Webpack 脚本来处理构建过程。你可以通过运行以下命令来启动开发服务器或进行打包：

# 安装项目依赖
npm install

# 开发模式下运行项目
npm run serve

# 打包发布
npm run build

这些命令定义在 package.json 中的 scripts 字段。例如，serve 命令调用了 webpack-dev-server 来启动一个本地服务器，提供热加载功能。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目元数据以及 npm 脚本。它主要关注的是 dependencies, devDependencies, 和 scripts 部分:

{
  "name": "vue-awesome",
  ...
  "dependencies": {
    "feather-icons": "^4.28.0"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.0.7",
    "autoprefixer": "^10.2.5",
    "copy-webpack-plugin": "^6.4.1",
    "css-loader": "^5.2.6",
    "mini-css-extract-plugin": "^1.6.0",
    "postcss-loader": "^4.2.0",
    "style-loader": "^3.2.1",
    "url-loader": "^4.1.1",
    "vue": "^3.0.7",
    "vue-loader": "^17.0.0-beta.5",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.37.0",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  },
  "scripts": {
    "serve": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  }
}

webpack.config.js

webpack.config.js 用于配置 Webpack 如何构建项目。主要包括设置输入输出路径、引入插件、加载器等。例如：

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'vue-feather.min.js',
    path: path.resolve(__dirname, 'dist'),
    library: 'VueFeather',
    libraryExport: 'default'
  },
  resolve: {
    extensions: ['.js', '.vue'],
    alias: {
      'vue': '@vue/runtime-dom'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.(svg|png)$/,
        use: ['url-loader?limit=10000&name=[name].[ext]']
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin({
      patterns: [{ from: 'public' }]
    })
  ],
  optimization: {
    minimizer: [
      new TerserPlugin()
    ]
  },
  externals: {
    vue: 'vue'
  }
};

这个配置文件告诉 Webpack 如何将源代码打包成可用于生产环境的文件，并且如何处理不同类型的文件（如 .vue、.js 和 .svg）。此外，还配置了复制公共文件到构建目录的插件。

总结，VueAwesome 的核心是图标组件的源码，通过 Webpack 进行构建和优化，输出为可直接在其他项目中使用的库。要了解更详细的使用方法，可以直接阅读项目文档或查看示例。