开发日记10-基于vite搭建前端框架

wanzhong23332026-01-19 9:25

前置条件

安装Node.JS 版本在18以上

在项目根目录下，

复制代码

npm create vite@5.0.0 web --template vue

选择Vue和JavaScript

引入组件库

在web下，引入Ant design Vue 4.x

复制代码

npm install ant-design-vue@4.x --save

npm install --save @ant-design/icons-vue

引入路由组件

在web下，引入路由组件

复制代码

npm i vue-router

/data/wz/JavaProject/im-nls/web/src/router/index.js

复制代码

npm install --save @ant-design/icons-vue

使用路由

现在分析一下web项目

最外层，可视化的是html，所有web代码经过编译，最终都会形成html，最后被浏览器解析呈现。

但是我们写html并不会那么复杂，而是结构化的去层层封装逻辑

javascript 复制代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

所以我们的代码基本都是通过一些节点和逻辑进行展开，当我们使用Vue的时候，这个节点就是

javascript 复制代码

<div id="app"></div>

而逻辑就是

javascript 复制代码

<script type="module" src="/src/main.js"></script>

在main.js下，引入路由、组件库、图标库等，固定的写法，语言是ES6

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import * as Icons from '@ant-design/icons-vue'
import Antd from 'ant-design-vue'
import router from './router'
import './style.css'
import 'ant-design-vue/dist/reset.css'

const app = createApp(App);
app.use(Antd).use(router).mount('#app');

const icons = Icons
for (const i in icons) {
    app.component(i, icons[i])
}

这里面的App来自App.vue组件，它此时需要写成一个入口

html 复制代码

<template>
  <router-view></router-view>
</template>

里面的View标签会随着url路径的改变而切换并渲染成对应的内容，这个内容的mapping，在/data/wz/JavaProject/im-nls/web/src/router/index.js中定义

javascript 复制代码

import {createRouter, createWebHistory} from "vue-router"
import Home from "../view/Home.vue"

const routes = [{
    path: "/home",
    component: Home
}]

const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router