Vue3+TS+ElementPlus 001 环境配置

news/2024/5/30 4:12:02

1.1 环境准备

1.1.1 安装vue-cli(第一次需要)

npm install -g @vue/cli

1.1.2 创建vue项目

vue create 项目名称(项目名称尽量不要使用中文)

1.1.3 选择相应的项目

1.1.4 启动项目

npm run serve

2.1 引入element-plus

2.1.1 安装

一个 Vue 3 UI 框架 | Element Plus (element-plus.org)

npm install element-plus --save

2.1.2 引入

2.1.2.1 完整引入

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

2.1.2.2 按需引入

安装插件

npm install -D unplugin-vue-components unplugin-auto-import

配置

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = defineConfig({transpileDependencies: true,configureWebpack:{plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],}
})

main.ts啥也不用干

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

注意:有可能会报错

原因是版本不匹配,需要指定版本

npm install unplugin-auto-import@0.16.1 npm install unplugin-vue-components@0.25.2

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.cpky.cn/p/8566.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈,一经查实,立即删除!

相关文章

说一下JVM的主要组成部分及其作用?

两个子系统: 类加载器:根据给定的全限定名类名(如:java.lang.Object)来装载class文件到Runtime data area中的method area 执行引擎:执行classes中的指令 两个组件: 运行时数据区:这就是我们常说的JVM的…

Redis为什么快?

1. Redis单线程指的什么? Redis单线程是指命令处理是在一个单线程中处理的。 Redis本身是单线程的,即redis-server只有一个主线程来处理所有的命令请求和数据操作。但是,Redis在处理IO密集型任务时会使用多线程来提高效率。 在Redis中&…

Python爬虫学习

1.1搭建爬虫程序开发环境 爬取未来七天天气预报 from bs4 import BeautifulSoup from bs4 import UnicodeDammit import urllib.request url"http://www.weather.com.cn/weather/101120901.shtml" try:headers{"User-Agent":"Mozilla/5.0 (Windows …

【安卓基础2】简单控件

🏆作者简介:|康有为| ,大四在读,目前在小米安卓实习,毕业入职。 🏆安卓学习资料推荐: 视频:b站搜动脑学院 视频链接 (他们的视频后面一部分没再更新,看看前面…

第11章 GUI

11.1 Swing概述 Swing是Java语言开发图形化界面的一个工具包。它以抽象窗口工具包(AWT)为基础,使跨平台应用程序可以使用可插拔的外观风格。Swing拥有丰富的库和组件,使用非常灵活,开发人员只用很少的代码就可以创建出…

车辆管理系统设计与实践

车辆管理系统是针对车辆信息、行驶记录、维护保养等进行全面管理的系统。本文将介绍车辆管理系统的设计原则、技术架构以及实践经验,帮助读者了解如何构建一个高效、稳定的车辆管理系统。 1. 系统设计原则 在设计车辆管理系统时,需要遵循以下设计原则&…