Vite项目实践总结(一)：项目初始化

柜子动了
1,119 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

第一次发表文章，有点小紧张，虽然平时都会在本地搭建的博客上记笔记，但是一直都没有很正式的发表出来，所以就想着记录一下自己近一段时间的学习与实践，锻炼一下自己，如果有写的不对的地方，各位多多担待，欢迎各位大佬指正。

最近项目组要搭建一个新平台，前端使用的是Vue3全家桶，从最初的了解需求到技术选型、项目的搭建以及上线，前前后后一共花了大概2个月的时间，开发的过程遇到了不少的难题，尤其是第一次项目搭建，遇到了许多难题，好在最后都解决了，所以想着说分享出来，大家一起交流交流，顺便总结一下。

搭建一个平台，首先要了解该平台的作用，用户的需求。于是我就跑去问老大：需求？功能？老大回了一句：一个系统，功能暂时还没想好。😅，好家伙，合着你们都没想好呢(言外之意：你小子自己玩去吧)。然后我就开始放飞自我，就有了接下来的技术选型了。

技术选型

构建工具

由于受够了之前老项目的启动慢、打包慢、热更新也慢的困扰，所以选择了最近比较火的Vite，试了一下，发现确实启动够快，热更新也特别快。 引用一下来自Vite官网介绍，具体的可以看看官网的说明：vite

Vite 以原生ESM方式提供源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。 esm.3070012d.png

技术栈

然后在React和Vue之间又做了选择，选择了Vue，原因很简单就是React写多了(老项目使用React)，想试试Vue3，再加上Vue3已经是默认版本了。最后就选择了Vue3，搭配TypeScript(JavaScript的超集)。剩下的技术栈选择就不多赘述了，直接上结果：

  • UI组件库：ELement Plus （注意：Element Plus是有浏览器的兼容性要求的，如下图所示：） element-plus.png 对环境有要求的小伙伴，请谨慎选择。（当然我们的项目也对环境有要求，不过当时还不知道(巨坑啊)，😭😭，需要兼容低版本谷歌浏览器，大概需要兼容到Chrome 49左右，这个这篇文章就不过多描述了，以后会提到）
  • Vue-Router 4
  • Pinia
  • Axios 这边只是大概列了一下刚搭建时引入的库。

开始构建

使用Vite构建，先全局安装Vite，Vite是有兼容性要求的(兼容性注意Vite需要Node.js版本 >= 12.0.0),这里都只用yarn进行演示，其他的可查看Vite官网

yarn create vite

安装好Vite后，创建项目，使用附加的命令行选项直接指定项目名称和你想要使用的模板：

yarn create vite my-project-name --template vue-ts

构建好后，进入到项目文件夹下，安装依赖，安装好后就可以启动了：

cd my-project-name
yarn
yarn dev

目录结构解析

├── public               静态资源文件夹
├── src
│   ├── assets           资源文件
│   ├── components       组件
│   ├── App.vue          主页
│   ├── env.d.ts         全局的声明
│   └── main.ts          主入口
├── .gitignore           git忽略配置
├── index.html           模板html
├── package.json         依赖包/运行脚本配置文件
├── README.md            README介绍文件
├── tsconfig.json        typeScript配置文件
├── tsconfig.node.json   typeScript配置文件
└── vite.config.ts       Vite配置文件

修改vite.config.ts配置文件

vite.config.ts是vite的核心文件，有关vite的配置都在这里配置的。

import { defineConfig } from 'vite'; //引入 defineConfig 工具函数（不用 jsdoc 注解也可以获取类型提示）
import vue from '@vitejs/plugin-vue';
const path = require('path');

export default defineConfig({
  plugins: [vue()],
  publicDir: 'public', //静态资源服务的文件夹，默认就是public
  cleanScreen: false, //设置为false 可以避免Vite清屏而错过在终端中打印某些关键信息
  server: {
    port: 8080, //端口号
    open: true, //项目启动自动打开,
  },
  resolve: {
  //配置路径别名
    alias: {
      '@': path.resolve(__dirname, './src'),
    }
  },
})

这里产生了一个错误，配置别名用的path不存在，但是提示我们需要安装@types/node，这个包包含了Node的类型定义。

1、安装@types/node依赖 开发环境依赖加上-D

yarn add @types/node -D

但是安装了@types/node为什么还是提示错误，如果还是提示错误，需要修改tsconfig.json配置文件.

2、添加配置: 修改tsconfig.json

{
  "compilerOptions": {
    //...
    "types": ["node"]
  }
  //...
}

加上上面的配置就可以使用别名了，通过@就可以访问到src目录了.

至此初始化项目的工作就做好了，文章中可能有描述不当的地方，请各位多多包含，谢谢观看😁。

avatar
文章
阅读
粉丝