准备工作

首先请确保你的node.js版本>=12.0.0

因为vite的兼容性，Vite 需要 Node.js 版本 >= 12.0.0。

如果你不知道你的node.js的版本是多少，请按照如下步骤

window+r

输入cmd，然后回车

然后输入node -v,就可以查看node.js版本啦

开始搭建

npm init vite@latest

如果出现下面的情况，是因为权限不够，你需要切换到管理员下运行

右键电脑左下角的windows，找到命令提示符（管理员）

cd切换到你需要搭建项目的目录，然后重新输入

npm init vite@latest

输入自己的项目名称

选择你熟悉的框架，回车，这里我选择的是vue

使用上下箭头，选择vue+ts，回车

然后方框里面的步骤执行

最后执行npm run dev，你就会得到这个页面啦啦啦啦啦啦

你以为这样就可以了？？？

不！不！不！

实际去开始项目，你还需要下载引入项目需要的vue-router，vuex，axios，element-plus等等依赖，这些根据自己项目的需求去搭建就好啦。

当然这里我就拿element-plus单独出来讲讲........是骡子是马，拉出来遛遛。。。。

1.下载element-plus

# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus

2.完整引入。在main.ts文件引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

根据官网的说法如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。

补充知识：vue3在vscode使用的插件是volar（vue2的是vetur），为什么呢？？

解答：因为写过vue2的人都知道，vue的template里，只能有一个根标签，使用多标签，vetur插件就会提示你有错误，但是vue3之后，去掉了这个限制，template标签里是允许有多个标签的，这是vue3.0的新功能，所以我们需要使用适合vue3的volar插件

// tsconfig.json
{"compilerOptions": {// ..."types": ["element-plus/global"]}
}

------------------------------------转折 -----------------------------------

就不对称，逼死强迫症！！！

完整引入一般是不推荐的，因为包面积太大了，对于性能不友好！！！！

一般推荐使用按需引入！！

2.按需引入，顾名思义，就是把你需要的组件一个个导入。当然官网很友好，推出了自动导入的。

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

#选择一个你喜欢的包管理器#NPM
# npm install -D unplugin-vue-components unplugin-auto-import#Yarn
$ yarn add -D unplugin-vue-components unplugin-auto-import

接着找到vite.configf.ts文件，插入以下代码

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default {plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}

直接在页面使用就好

效果如下

想更多的了解element-plus引入，欢迎去官网看文档设计 | Element Plus

需要特别注意的是：element-plus中icon的引入！！！！

如果你按照文档上面的做法，老老实实的去安装

# 选择一个你喜欢的包管理器# NPM
$ npm install @element-plus/icons-vue
# Yarn
$ yarn add @element-plus/icons-vue

然后直接使用

然后你就会得到。。一片空白？？？我的图标呢？？

正确的使用方法是，你还需要去引入一下图标

如果你走到这里，那么恭喜你，哈哈哈项目已经搭建好啦，可以开开心心的去开发啦！！

完结啦！！！小编就陪你到这了，剩下的路自己去走吧！

著作不易，喜欢的留下你的小脚丫。。

有不解的，请留言评论。。

手把手教你从0到1搭建vue3+ts+vite+element-plus简易后台管理系统相关推荐

Vue3+TS+Vite+Element Plus搭建后台管理系统
Vue3+TS+Vite+Element Plus搭建后台管理系统 1.简介 2.效果图 3.技术栈 4.项目目录 5.setting.js(全局配置文件) 6.路由router 7.状态管理stor ...
手把手教你从0到1搭建web ui自动化框架（python3+selenium3+pytest）
-前期准备 -环境 -实战: 从0开始前期准备为更好的学习自动化框架搭建,你需要提前了解以下知识: python基础知识 pytest单元测试框架 PO模式 selenium使用环境本次我们自 ...
手把手教你从0开始搭建一个vue项目（完结）
前言上一节webpack实战之(手把手教你从0开始搭建一个vue项目)最后我们完成了css样式的配置: webpack.config.js: const path = require("p ...
手把手教你从0到1进行Java项目实践
手把手教你从0到1进行Java项目实践虽说工作就是简单的事情重复做,但不是所有简单的事你都能有机会做的. 我们平日工作里,大部分时候都是在做修修补补的工作,而这也是非常重要的.做好修补工作,做好优化 ...
教你从0到1搭建秒杀系统-订单异步处理
前面几篇我们从限流角度,缓存角度来优化了用户下单的速度,减少了服务器和数据库的压力.这些处理对于一个秒杀系统都是非常重要的,并且效果立竿见影,那还有什么操作也能有立竿见影的效果呢?答案是下单的异步处理 ...
教你从0到1搭建秒杀系统-Canal快速入门（番外篇）
Canal用途很广,并且上手非常简单,小伙伴们在平时完成公司的需求时,很有可能会用到.本篇介绍一下数据库中间件Canal的使用. 很多时候为了缩短调用延时,我们会对部分接口数据加入了缓存.一旦这些数据 ...
教你从0到1搭建秒杀系统-缓存与数据库双写一致
本文是秒杀系统的第四篇,我们来讨论秒杀系统中缓存热点数据的问题,进一步延伸到数据库和缓存的双写一致性问题. 在秒杀实际的业务中,一定有很多需要做缓存的场景,比如售卖的商品,包括名称,详情等.访问量很大 ...
教你从0到1搭建秒杀系统-抢购接口隐藏与单用户限制频率
在前两篇文章的介绍下,我们完成了防止超卖商品和抢购接口的限流,已经能够防止大流量把我们的服务器直接搞炸,这篇文章中,我们要开始关心一些细节问题.对于稍微懂点电脑的,点击F12打开浏览器的控制台,就能在 ...
教你从0到1搭建秒杀系统-限流
本文是秒杀系统的第二篇,主要讲解接口限流措施.接口限流其实定义也非常广,接口限流本身也是系统安全防护的一种措施,在面临高并发的请购请求时,我们如果不对接口进行限流,可能会对后台系统造成极大的压力,尤其 ...

手把手教你从0到1搭建vue3+ts+vite+element-plus简易后台管理系统

准备工作

开始搭建

手把手教你从0到1搭建vue3+ts+vite+element-plus简易后台管理系统相关推荐

最新文章

热门文章