位置: IT常识 - 正文

vue+ts+vite详细入门及实践(vue3+ts+vite)

发布时间：2024-01-10

vue+ts+vite详细入门及实践

推荐整理分享vue+ts+vite详细入门及实践(vue3+ts+vite)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue +ts,vue2.0 ts,vue.d.ts,vue-tsc,vue3+ts+vite,vue-tsc,vue3+ts+vite,vue +ts,内容如对您有帮助，希望把文章链接给更多的朋友！

vite是前端代码打包的一个工具，首先可以通过一张图来理解vite的打包构建方式

一、前置知识：npm 和yarn包管理器1、npm常用命令及说明// 查看npm版本npm -v// 初始化一个项目，会出现一个package.json配置文件，可以在后面加上-y ，快速跳过问答式界面npm init// 安装依赖包npm install // 根据项目中的package.json文件自动下载项目所需的全部依赖npm install 包名 --save-dev (npm install 包名 -D) // 安装的包只用于开发环境，不用于生产环境，会出现在package.json文件中的devDependencies属性中。npm install 包名 --save (npm install 包名 -S) // 安装的包需要发布到生产环境的，会出现在package.json文件中的dependencies属性中// 更新npm update 包名 // 更新指定包// 移除依赖包npm uninstall 包名 // 卸载指定包// 查看npm list // 查看当前目录下已安装的node包npm list -g // 查看全局已经安装过的node包npm info 指定包名 // 查看远程npm上指定包的所有版本信息npm config list // 查看配置信息npm ls 包名 // 查看本地安装的指定包及版本信息，没有显示emptynpm ls 包名 -g // 查看全局安装的指定包及版本信息，没有显示emptynpm root // 查看当前包的安装路径npm root -g // 查看全局的包的安装路径// 其他npm config set registry https://registry.npm.taobao.org // 修改包下载源，此处修改为了淘宝镜像npm --help // 查看npm帮助命令npm 指定命令 --help // 查看指定命令的帮助2、yarn常用命令及说明// 初始化一个新项目yarn init // 运行脚本yarn run // 用来执行在 package.json 中 scripts 属性下定义的脚本// 发布包yarn publish// 添加依赖包yarn add [package] // 会自动安装最新版本，会覆盖指定版本号yarn add [package] [package] [package] // 一次性添加多个包yarn add [package]@[version] // 添加指定版本的包yarn add [package]@[tag] // 安装某个tag（比如beta,next或者latest）// 将依赖项添加到不同依赖项类别，不添加则默认安装到package.json中的dependencies里yarn add [package] --dev 或 yarn add [package] -D // 加到 devDependenciesyarn add [package] --peer 或 yarn add [package] -P // 加到 peerDependenciesyarn add [package] --optional 或 yarn add [package] -O // 加到 optionalDependencies// 升级依赖包yarn upgrade [package] // 升级到最新版本yarn upgrade [package]@[version] // 升级到指定版本yarn upgrade [package]@[tag] // 升级到指定tag// 移除依赖包yarn remove [package] // 移除包// 安装package.json里的包依赖，并将包及它的所有依赖项保存进yarn.lockyarn 或 yarn install // 安装所有依赖yarn install --flat // 安装一个包的单一版本yarn install --force // 强制重新下载所有包yarn install --production // 只安装生产环境依赖// 显示某个包的信息yarn info [package] // 可以用来查看某个模块的最新版本信息// 缓存相关yarn cacheyarn cache list // 列出已缓存的每个包yarn cache dir // 返回全局缓存位置yarn cache clean // 清除缓存二、创建一个vite项目

确保node版本需要在12.0以上

1、安装vite官网最新版本npm init vite@latest // 安装最新版本的vite

本文展示基于vite最新版本及vue+ts搭建项目，并按照指示来，运行项目

cd "项目名称" // 进入项目目录npm instasll // 安装依赖包npm run dev // 运行项目

2、安装 vite1.x 版本

安装vite项目命令： yarn create vite-app "项目名称" 或 npm init vite-app + "项目名称" 如下：（不推荐）至此，就成功创建并运行了一个vite项目。

三、目录结构分析

vite+vue+ts项目目录初始结构如下：

1、.vscode

该目录下的文件extensions.json中记录了开发工具vscode相关的配置

2、node_modules

通过执行安装命令npm install或yarn自动生成的依赖包目录。

3、public

vite会把所有放在public文件夹下的文件都原封不动的复制到打包后的文件夹的根目录中。在使用public中的文件时需要注意点：1）应该一直使用根目录/来引用public文件夹的文件，如使用/favicon.ico来引用public/favicon.ico文件；2）public中的文件无法使用javascript来导入资源。

4、src

项目相关的资源代码存放位置。

1）assets

用来存放项目中所有的静态资源文件（css、fonts等）。

2）components

用来存放项目中所有的自定义组件。

3）App.vue

是项目的根组件。

4）main.ts

是整个项目的入口。

5）style.css

整个项目全局的基本样式文件表。