构建一个简单的Vue3+ts+vite的项目

简言

这次我们来使用vite构建一个简单的vue3项目。创建vue项目的前置条件是要下载安装node.js；建议下载使用nvm(node版本管理工具)来管理node。

话不多说,不玩虚的，let’s go！ ——ZSK666

项目构建

1.新建文件夹

首先，新建一个文件夹。然后打开命令行工具，输入 npm init vue@latest 后 回车 即可。我这里使用的是vscode内置的命令行工具。

2. 构建项目配置

构建时，项目名是basic-demo,我用了TypeScript(代替js),ESLint(代码检查),和Prettier（代码风格，可以不用）。vue-router和pinia后面再手动配置。

构建好后，按以下步骤即可启动

1. cd basic-demo 进入构建的项目下
2. npm install 安装依赖
3. npm run dev 启动项目

如果碰到报错，找不到什么巴拉巴拉的。大部分都是依赖包报错，删除项目下的node_modules和package-lock.json;重新npm install 。
如果还是不行，可能node版本过低导致，安装高版本node后在npm install。
运行成功后如下：

项目目录基本介绍

上图就是一个简单基本的项目目录。下面做简单介绍:

• .vscode ---- vscode编辑器的东西，没啥好介绍的。
• node_modules ---- 比较重要，下载的依赖和插件都会在这里面存放。
• public ---- 存放静态资源的文件夹。
• src ---- 非常重要 。存放代码和资源的文件夹。
• .eslintrc.cjs ---- eslint代码检查工具配置文件。
• .gitignore ---- git过滤文件，可配置不在git提交范围的文件。
• env.d.ts — ts中，env声明文件（ts声明文件要想生效，需要在tsconfig.json引入哈）。
• index.html ---- html页面。
• package-lock.json ---- 存放已安装依赖包的版本信息
• package.json ---- 项目配置文件，记录项目信息和依赖包版本，以及存放npm快捷命令
• README.md ----- 项目文档，可以记录项目信息和使用方法等等。
• tsconfig.config.json ---- ts配置文件
• tsconfig.json ---- ts配置文件 ，这俩相似，tsconfig.json引用了tsconfig.config.json文件（不知道为啥这样初始配置，写在一起不好么。。。）
• vite.config.ts ---- vite配置文件，重要。vite是类似与webpack的工程化构建工具。