简言
这次我们来使用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后面再手动配置。
构建好后,按以下步骤即可启动
- cd basic-demo 进入构建的项目下
- npm install 安装依赖
- 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的工程化构建工具。