1. 项目介绍

1. 本项目搭建后台管理系统通用模板,采用全新技术,跟着搭建完成你能快速入手开发项目
2. 项目用到的各个版本

node:             16.14.2
pnpm:             6.32.3
vite":            3.0.9
vue:              3.2.37
vue-router:       4.1.3
pinia:            2.0.20
typescript:       4.8.2
element-plus:     2.2.15

2. 环境安装

node

node官网下载无脑下一步安装就行安装完成后打开cmd 运行以下命令

**然后安装pnpm或者yarn不需要我说了吧 npm i -g pnpm **

node管理工具有很多,我用的是Volta 很强大。我另一篇介绍 : Volta
开发工具我用的webstorm,vscode用不习惯根据个人情况

3. 开始进入正题

vite创建ts模板

访问" create-vite " 以获取每个模板的更多细节：vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。我们这里就使用vue-ts快速创建一个vuets的项目,大家可根据自己喜爱选择对应的创建项目
1. 打开项目存放的文件夹右键打开Git Bash Here

运行命令: pnpm create vite my-app -- --template vue-ts "my-app"是自己创建的项目名称,可根据自己情况随意修改。如果出现以下情况不要着急,运行pnpm setup 自动设置环境变量,然后关闭重新打开Git Bash重新执行创建项目的命令即可
用我们的编辑器打开项目,初始化目录显示如下
然后我们运行pnpm i安装项目的依赖完成之后运行vite或pnpm run dev启动项目
出现这个说明我们创建安装的依赖已经完成接下来开始安装我们项目所需要的依赖
运行命令pnpm install vue-router pinia axios -S pnpm install @types/node -D pnpm install element-plus -S分别出现以下就是安装成功。安装成功@types/node 会出现要求重新安装一些依赖放心安装即可
配置别名 @ 方便我们之后操作引入组件路径。
打开vite.config.ts 引入路径填写配置resolve
打开tsconfig.json 需要配置一下 paths: @
打开 main.ts 全局引入element-plus 不推荐使用
按需自动导入**推荐**您需要使用额外的插件来导入要使用的组件。
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件 pnpm install -D unplugin-vue-components unplugin-auto-import 然后把下列代码插入到你的 Vite.config.ts的配置文件中

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

src目录下新建 router/index.ts store/index.ts 分别如下然后再main.ts引入使用,app.vue里添加 <router-view/>标签路由跳转,之后我们就可以访问index页面了

之后我就疯狂的贴代码了

vite + vue3 + ts + vue router + pinia 项目集成

1. 项目介绍

2. 环境安装

node

3. 开始进入正题

vite创建ts模板

最近没空太忙了

vite

vite