vite创建vue3+ts项目

vite创建vue3+ts项目
为何选择vite:
vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它做到了本地快速开发启动:

快速的冷启动,不需要等待打包操作;
即时的热模块更新,替换性能和模块数量的解耦让更新飞起;
真正的按需编译,不再等待整个应用编译完成,这是一个巨大的改变。(平均一秒run)

本文技术栈是vue3+vue-router+ts+vite+element-plus+pinia

一、创建项目

第一步

创建一个文件夹 cmd指定到该文件夹路径

 

 

 第二步

填写项目名称

 

 

第三步

选择vue

 

 

第四步

选择TypeScript

 

 

到这一步就是已经创建成功了

 

 

二、安装依赖

1.先cd 到项目路径

cd vite-project

 

 2.安装默认依赖

 nmp install 

 

 3.运行项目

nmp run dev

 

 

这样就是运行成功了

 

 

三、配置

 

npm install @types/node --save-dev

 

 

 

 

1.安装路由

npm install vue-router@4

 

 

 

  2.router 文件夹下的 index.ts内容

 

3. 在main.ts 引用router

 

 4.配置ts文件采用@方式导入

在tsconfig.json文件中添加配置  可以自己定义 :全部配置的链接  https://www.cnblogs.com/vant-xie/p/16744406.html

 

 5.css 预处理器 sass

npm install -D sass sass-loader

在需要的页面style使用 

 

 

6.安装element-plus
  element-plus是vue3目前大流行组件库,用法基本和element ui一样

npm install element-plus --save

  

  (1)在main.ts中引用

    

 

   (2)使用

    

 

 7.安装pinia

  为啥推荐pinia呢,因为Pinia 是 Vue 的存储库,它允许您跨组件/页面共享状态,组件通信

  

npm install pinia

  在main.ts中引用

  

 

 

到这里基本的vue项目创建成功了。

posted @   偷熊计划  阅读(1277)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
历史上的今天:
2020-10-07 GitHub常用命令及使用
点击右上角即可分享
微信分享提示