Admin 项目实战（一）：初始化 Vite 环境¶

这是 Admin 练习项目的第一篇，练习如何从零开始搭建一个较为复杂项目的 Vite 环境。

基础配置¶

    mkdir admin
    cd admin
    pnpm init
    pnpm i vite
    pnpm i --save @types/node
    npx vite

加载主页¶

新建 index.html 内容如下：

    <!--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>
        <h1>Hello Vite !!!</h1>
      </body>
    </html>

启动项目可以看到页面正常加载：

加载 Typescript 脚本¶

新建 main.ts 脚本：

    // src/main.ts
    const s: string = "Hello Typescript !!!";
    console.log(s);

并且在 index.html 中加载：

    <body>
      <h1>Hello Vite !!!</h1>
      <script src="./src/main.ts" type="module"></script>
    </body>

可以看到 Typescript 脚本可以正确加载：

Vite 可以直接使用 typescript 开发。

注意：Typescript 加载时需要配置 type="module" 。

加载 DOM¶

在 HTML 中增加标签：

    <body>
      <div id="app"></div>
      <script src="./src/main.ts" type="module"></script>
    </body>

在 main.ts 中修改标签内容：

    import { add } from "~/add";
    document.getElementById("app")!.innerHTML = "Hello DOM !!!";

加载成功后，可以看到 HelloDOM。

配置 Vite.config¶

这是项目中的重要配置，通过配置 Vite 可以实现模块的别名支持：

    // vite.config.ts
    import { defineConfig } from "vite";
    import path from "path";

    export default defineConfig({
      resolve: {
        alias: {
          "~/": `${path.resolve(__dirname, "src")}/`,
        },
      },
    });

比如，增加一个 add 函数：

    // src/add.ts
    export const add = (a, b) => a + b;

修改 main.ts 并调用：

    import { add } from "~/add";
    console.log("add(3,3)=", add(3, 3));

由于配置了别名，所以 ~/add 能够正确调用。

vite-project-practice-initialize-environ_23Sep22172525583614_1.jpeg

Admin 项目实战（二）：Vue 全家桶

凡本网注明"来源：XXX "的文/图/视频等稿件，本网转载出于传递更多信息之目的，并不意味着赞同其观点或证实其内容的真实性。如涉及作品内容、版权和其它问题，请与本网联系，我们将在第一时间删除内容！
作者: 勃纳什
来源： https://zhuanlan.zhihu.com/p/644429755