配置UI组件库本地服务

站长

2023年03月17日 18:54 · 阅读数 15

前言

步骤

1. 新增web文件夹

里面放置html模板、入口文件、webpack的配置信息等。

配置UI组件库本地服务

2. 配置App.vue

使用之前全局注册好的button组件和icon组件

// App.vue
<template>
    <div>
        <Ai-Button></Ai-Button>
        <Ai-Icon></Ai-Icon>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
    name: 'App'
})
</script>

3. 配置入口文件main.ts

目前先不考虑局部注册问题, 先进行全局注册使用查看组件效果

import { createApp } from 'vue';
import AiUi from 'ai-ui';
import App from './App.vue';

// 组件进行全局注册
createApp(App).use(AiUi).mount('#app');

4. 配置App组件挂载模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UI</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

5. 安装webpack所有依赖

注意安装的时候还要带上 -W表示安装到根目录

yarn add webpack webpack-cli webpack-dev-server vue-loader@next @vue/compiler-sfc -D -W
yarn add babel-loader @babel/core @babel/preset-env @babel/preset-typescript babel-plugin-module-resolver url-loader file-loader html-webpack-plugin css-loader sass-loader style-loader sass -D -W

6. 配置webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader')
const path = require('path');


module.exports = {
    mode: 'development',
    devtool: 'source-map',
    entry: path.resolve(__dirname, 'main.ts'),
    output: {
        path: path.resolve(__dirname, '../webpage-dist'),
        filename: 'bundle.js'
    },
    resolve: {
        // 1. 解析哪些模块对应的扩展名有哪些, 处理import时候按照顺序解析优先使用ts 
        extensions: ['.ts', '.tsx', '.js', '.vue']
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                // webpack5换成了use来解析loader
                // babel-loader需要配置babel.config.js文件来进行解析
                use: 'babel-loader'
            },
            {
                test: /\.vue$/,
                use: 'vue-loader' // 解析还需要配合VueLoaderPlugin插件
            },
            {
                test: /\.(svg|ttf|woff|eot|gif|png)$/,
                use: 'url-loader'
            },
            {
                test: /\.(scss|css)\$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            }
        ]
    },
    plugins: [
        // 配合使用vue-loader解析使用
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'template.html')
        })
    ]
}

7. babel.config.js

放置到根目录即可

module.exports = {
    presets: [
        '@babel/preset-env',
        // 解析顺序从下往上, 先解析ts语法然后转为预设语法
        // 然后将高级语法转化为低级语法
        '@babel/preset-typescript' 
    ],
    overrides: [{
        test: /\.vue$/,
        plugins: [
            '@babel/transform-typescript'
        ]
    }]
}

8. 配置启动脚本

"scripts": {
  "web-dev": "webpack serve --config ./web/webpack.config.js"
}

启动脚本查看

可以看到button组件以及出来了, 因为icon组件没有任何配置所以没有展示

配置UI组件库本地服务

结语

以上就是配置了UI库的本地服务调试, 后面将会进入到重点样式包配置和打包处理。项目github地址: github.com/underFyh/AI…