使用vite从0开始搭建vue项目

使用Vite从0开始创建vue项目

第一步:创建项目目录

mkdir vue-demo -创建目录

cd vue-demo --进入项目

npm init -y --生成package.json文件

第二步:安装vite、typescript--ts、vue、@vitejs/plugin-vue--对单文件组件、热重载、生产优化的支持

pnpm add vue typescript

pnpm add vite @vitejs/plugin-vue -D

第三步:安装部分插件

pnpm add vue-tsc -D --vue里面做ts检查

pnpm add @types/node --ts文件里面引入node插件

pnpm add vite-plugin-html --动态显示页面的title

第四步:在根目录下面创建index.html和vite.config.ts、tsconfig.json文件

tsconfig.json是ts配置的,内容如下:

index.html是项目入口,内容如下:

vite.config.ts是配置项目标准,内容如下:

第五步:在根目录创建build目录

Build/readEnv.ts文件主要减少vite.config.ts的代码,也方便定义各个环境的配置文件

第六步:在根目录新增src文件夹,下面新增vite-env.d.ts、main.ts、App.vue

vite-env.ts是项目中使用import导入插件时不报错,能够让ts找到其对应的类型

main.ts项目入口

App.vue

第七步:在package.json里面配置对应的命令,之后运行命令

对pinia、vue-router@4、sass、eslint等配置,下载对应的插件配置好就行了,这里就不做介绍了...

最近更新

  1. TCP协议是安全的吗?

    2024-06-10 08:42:01       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-10 08:42:01       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-10 08:42:01       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-10 08:42:01       18 阅读

热门阅读

  1. Linux C/C++ 进程控制

    2024-06-10 08:42:01       7 阅读
  2. 使用Kotlin编写一个Http服务器

    2024-06-10 08:42:01       10 阅读
  3. Python怎么编辑前端:深度探索与实践

    2024-06-10 08:42:01       11 阅读
  4. Oracle和Random Oracle

    2024-06-10 08:42:01       9 阅读
  5. Next.js初始化和一些配置

    2024-06-10 08:42:01       8 阅读
  6. HTML5 新的语义化标签

    2024-06-10 08:42:01       9 阅读
  7. 什么是幂等问题?

    2024-06-10 08:42:01       10 阅读
  8. kmp算法c++

    2024-06-10 08:42:01       7 阅读
  9. 树莓派 ubuntu linux 去除蓝牙历史配对信息

    2024-06-10 08:42:01       11 阅读
  10. 从零手写实现 nginx-13-nginx.conf 是 HOCON 的格式吗?

    2024-06-10 08:42:01       10 阅读
  11. 使用cython将现有c/c++库移植为python模块

    2024-06-10 08:42:01       12 阅读
  12. 【冲刺秋招,许愿offer】第 二 天

    2024-06-10 08:42:01       7 阅读