首页 > 其他分享 >1、前端项目创建(vue3 + vite + element-plus)

1、前端项目创建(vue3 + vite + element-plus)

时间:2024-10-28 13:34:19浏览次数:5  
标签:App element plus vue3 import app vite

vue3+vite+element-plus 项目创建:

1、npm create vite@latest data-relationship -- --template vue

2、npm install   安装依赖

3、npm i element-plus  安装element-plus

4、修改 main.js

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

5、修改App.vue

<template>
  <el-container>
    <el-header>
      <h1>我的 Vue3 + Vite + Element Plus 项目</h1>
    </el-header>
    <el-main>
      <div>这是一个高效的 Vue3 + Vite + Element Plus 项目!</div>
    </el-main>
  </el-container>
</template>
  
<script>
export default {
  name: 'App'
}
</script>

  

6、npm run dev 运行

 

成功。

 

标签:App,element,plus,vue3,import,app,vite
From: https://www.cnblogs.com/chenliang-zibo/p/18510285

相关文章

  • vue后台element,routes实现动态路由控制权限管理
    前言整体流程大概说下,在登陆成功之后,需要后端把角色权限的路由返给我们,我们再根据角色权限把后端给的路由在本地存储,在router/index的路由控制页面用beforeEach钩子函数中做动态路由的处理,把角色权限渲染到页面中。一、login页面处理登陆成功之后需要把拿到的路由固定js......
  • vue3 中 defineExpose 作用
    在Vue3中,`defineExpose`是一个在`<scriptsetup>`语法中使用的函数,它的主要作用是用于显式地暴露组件内部的属性和方法,以便在父组件中可以通过`ref`获取并访问这些属性和方法。一、作用1.控制组件的对外暴露内容在默认情况下,使用`<scriptsetup>`的组件会自动暴露其内部......
  • 【Vue3】第二篇
    Vue3学习第二篇01.事件处理02.事件传参03.事件修饰符04.数组变化侦测05.计算属性06.class绑定07.style绑定08.侦听器09.表单输入绑定10.模板引用01.事件处理在vue当中的事件处理和html、css中的不一样,它单独做了处理。注意:用法中只是用点击事件来举......
  • vue3 svg图像 的实例
    1、先上个图,来自官方:2、说明:图形包括三个组件,一个是多边形、一个圆、一个text(A,B,C,D,E,F...)。3、图形定义:<svgwidth="200"height="200"><PolyGraph:stats="stats"></PolyGraph></svg>这个PolyGraph是一个自定义SFC:<scriptsetup>impo......
  • Vue3用户关注与粉丝列表展示
    文章目录说明功能描述:代码说明该组件主要是通过一个小抽屉进行用户粉丝与关注列表的展示前提:这里用了elementPlus的组件库所以需要配置好elementPlus的组件库环境这里采用的是根据传入的用户名进行查询。也可以修改为根据传入的用户id进行查询功能描述:抽屉窗:使......
  • 化学仿真软件:Aspen Plus二次开发_自定义模型开发
    自定义模型开发1.介绍AspenPlus是一种广泛应用于化工过程模拟和优化的软件工具。在许多情况下,标准模型库中的模型可能无法满足特定工艺的需求。因此,自定义模型开发成为提高仿真精度和效率的重要手段。本节将详细介绍如何在AspenPlus中开发自定义模型,包括模型开发的......
  • MybatisPlus入门(二)MybatisPlus入门案例
    一、SpringBoot整合MyBatisPlusSpringBoot整合MyBatisPlus入门案例:步骤一:创建新模块,选择Spring初始化,并配置模块相关基础信息。选择当前模块需要使用的技术集(仅保留JDBC)手动添加MyBatisPlus起步依赖:<dependency><groupId>com.baomidou</groupId><artifactId>myb......
  • MybatisPlus入门(一)MybatisPlus简介
    一、MyBatis简介MyBatisPlus(简称MP)是基于MyBatis框架基础上开发的增强型工具,旨在简化开发、提高效率-官网:https://mybatis.plus/  https://mp.baomidou.com/MyBatisPlus特性:-无侵入:只做增强不做改变,不会对现有工程产生影响-强大的CRUD操作:内置通用Mapper,少......
  • 前端 (vue3+ts+vite)
    项目结构 cool-admin  ├──buildvite插件  ├──vite.config.tsvite配置文件  ├──tsconfig.jsontypescript配置文件  ├──src源文件  │ ├──main.ts程序入口  │ ├──App.vue页面挂载入口  │ ......
  • JavaScript CSS Vue3 实现一个简单的Loading
    之前项目用到的,后来换其他效果了。放博客里保存一下。效果视频转GIF之后不太流畅……代码<scriptsetuplang="ts">import{onBeforeUnmount,onMounted,ref}from"vue";import{clamp}from"../scripts/Utils";constmaskDiv=ref<HTMLDivElement>(null)co......