likes
comments
collection
share

如何从无到有搭建一套完整的低代码平台（二）前端选型

作者站长头像
站长
· 阅读数 29

一. 介绍

上一篇文章我们重点介绍了一下项目的搭建，从整体的架构上去考虑一下项目如何创建。最终选择了pnpm + monorepo的方式。有兴趣的同学可以浏览一下我之前的文章，链接放到文章结尾。从这章开始，我重点开始一步一步实现前端核心也就是client部分的逻辑和代码。不多bb，让我们开始～～

二. 技术选型

结合目前比较火的前端框架和个人的习惯优先选择Vue3.0 + vite 现在我们开始搭建一下框架

进到client目录下 cd client:

1. 安装基本依赖

项目使用vue + typescript 样式方面我选用less。先安装这三个

    pnpm add vue@next typescript less -D -W

这里的vue@next指的是vue的最新版本， 这里要注意一下-w，-w是安装到根目录上的。这里可以加也可以不加。就是会影响到依赖安装到位置。因为考虑到单项目系统，我这里就没有加-w

执行一下：

    npx tsc --init // 生成基本的ts声明文件, 先生成，暂时不管

2. 安装打包工具

项目使用vite打包，但是在打包的同时要去识别一下vue文件。

如何从无到有搭建一套完整的低代码平台（二）前端选型

@vitejs/plugin-vue是可以识别vue单文件支持的。它可以让 Vite 可以解析 .vue 文件

安装一下：

    pnpm add vite @vitejs/plugin-vue -D

现在看一下client项目node_modules的基本目录：

如何从无到有搭建一套完整的低代码平台（二）前端选型

可以看出，依赖安装的没有问题。可以进行下一步。

3. 配置vite.config.ts文件

和webpack以及rollup一致，vite也需要配置一下自己的打包工具配置文件vite.config.ts

在client同级目录下创建vite.config.ts文件

    import { defineConfig } from 'vite';
    import vue from @vitejs/plugin-vue;
    export default defineConfig({
        plugins: [
            vue()
        ]
    })

这样就完成了一个基本的vite.config.ts文件的配置

4. 入口文件配置

页面需要指定一个入口的html文件，提供给@vitejs/plugin-vue插件去加载vue文件。 在根目录下新建一个index.html

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Document</title>
        </head>
        <body>
            <div id="app"></div>
            <script src="./src/main.ts" type="module"></script>
        </body>
    </html>
  • id="app"的dom元素，是vue的mount阶段挂载的元素
  • script的src是主文件的入口路径，因为要浏览器支持模块加载，所以type要指定是module。

然后我们配置一下main.ts:

在src下新建main.ts

import { createApp } from 'vue';
import App from './app.vue';

const app = createApp(App);
app.mount('#app');   // 挂载

在同级目录下新建app.vue:

    <template>
      <h1>lowCode</h1>
    </template>

ok！完成这些之后我们在package.json文件中启动一下：

    "serve": "vite"

pnpm run serve一下

如何从无到有搭建一套完整的低代码平台（二）前端选型

访问一下

如何从无到有搭建一套完整的低代码平台（二）前端选型

完成！

5. 无法识别.vue文件

在main.ts中可以看到一个报红

如何从无到有搭建一套完整的低代码平台（二）前端选型

找不到./app.vue模块，这是因为ts无法识别.vue文件，我们需要对.vue文件做个类型声明。在根目录下新建一个shim-vue.d.ts声明文件。

     // 匹配所有.vue结尾的文件
    declare module '*.vue' {
        //  从vue中导出DefineComponent类型
        import type { DefineComponent } from "vue";
        // 定义一个类型为DefineComponent的component常量
        const component: DefineComponent<{}, {}, any>;
        // 导出这个component，这样在使用的时候，ts会自动识别为.vue文件
        export default component;
    }

这样我们就解决了爆红的问题！

三. 结尾

基本选型差不多就是这样！ok！到这里基本就已经完成，我们只要按步骤一步一步来就好！

参考文章：

vite官网

往期文章：

转载自:https://juejin.cn/post/7270418486593323019
评论
请登录