Vue3+ element plus 前后分离admin项目安装教程

于 2024-07-21 22:49:36 发布
阅读量219 收藏 8
点赞数 5
文章标签： 前端 vue3 element plus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luck332/article/details/140595563
版权

前后分离admin项目安装

前后分离admin项目安装基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + pinia，适配手机、平板、pc 的后台开源免费模板，希望减少工作量，帮助大家实现快速开发。

下载源码

前往gitee下载源码：diygw-ui-admin: 基于vite、vue3.x 、router、pinia、Typescript、Element plus等，适配手机、平板、pc 的后台开源免费模板库

安装NODE环境

NODE下载地址：Node.js 中文网

安装教程

导入项目

导入diygw-ui-admin项目。

导入diygw-ui-admin项目

打开命令行终端

选择package.json右链找到open in terminal 其实就是打开命令行终端

打开命令行终端

首先确保你的node环境

安装yarn

推荐使用yarn

执行：npm install -g yarn
推荐使用yarn 也可参照后面直接使用npm
安装 yarn
npm install -g yarn

npm install -g yarn

输入yarn,安装依赖

输入yarn,安装依赖

修改.env文件

修改为你PHP安装好指定的域名

修改为你PHP安装好指定的域名

完成后输入

yarn dev

yarn dev

浏览器打开

浏览器输入上面的地址，打开下面的页面就说明已经成功了。

浏览器输入上面的地址，打开下面的页面就说明已经成功了

应用发布

命令行执行：yarn build。执行命令后生成一个dist目录，把dist目录拷贝到PHP项目public目录，新建一个admin目录。

yarn build。执行命令后生成一个dist目录

把dist目录拷贝到PHP项目public目录，新建一个admin目录

把dist目录拷贝到PHP项目public目录，新建一个admin目录

更换admin目录

部分用户不想用admin目录，想改成其他目录也是行可以的，找到package.json找到--base=/admin/ 把里面的admin修改成你想要的目录。
那么对应的php也要新建一个对应的二级目录。

package.json找到--base=/admin/ 把里面的admin修改成你想要的目录

yarn异常

部分网友yarn命令提示其他异常

vsocde yarn执行，提示系统禁止运行脚本
yarn : 无法加载文件 C:\users\diygwcom\AppData\Roaming\yarn.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的
about_Execution_Policies。若要在本地计算机上运行您编写的未签名脚本和来自其他用户的签名脚本，请使用以下命令将计算机上的 执行策略更改为 RemoteSigned

1、搜索powershell，管理员身份运行 window.powershell
2、执行：set-ExecutionPolicy RemoteSigned

方法二：npm安装

直接使用NPM 安装依赖 npm install  运行项目 npm run dev   打包发布 npm run build  

diygwcom
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3+element-plus+admin
04-12
Vue3 + Element-Plus + Admin 是一个现代的前端开发框架，用于构建高效、可复用且易维护的企业级管理后台应用。Vue3 是 Vue.js 的最新版本，它引入了大量新特性和优化，提升了开发效率和性能。Element-Plus 是 ...
Vue3+Element Plus后台管理系统模版.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
Spring boot +Vue3.x +Element Plus 前后分离管理项目
目不识丁
12-26 936
​ 项目介绍 mooding-boot 是一个轻量级的，前后端分离的J2EE快速开发平台，致力于做更简洁的快速开发平台。 每次做项目都要去找很久适合自己的项目，有时候找到的项目技术相对比较滞后，有时候前端后和后端项目不是同时让自己满意，因此利用休息日自己撸了一个比较简洁的项目，供自己和想自己的小伙伴参考使用。 该项目前端采用时比较新颖的vue3.x和element plus去做的，至少最近三年vue3.x是使用比较多的前端框架，项目实现的功能比较简单，学习和理解都比较容易，方便后续实现不同项目的业.
基于 vue-element-admin 升级的 Vue 3 + TypeScript + Element-Plus 版本后台管理系统正式开源
有来技术
05-01 4万+
项目基于vue-elemnent-admin升级的Vue3版本,代码结构基本和vue-element-admin一致，代码风格参考Vue.js社区，CSS遵守BEM规范 ，站在巨人的肩膀不仅是为了看的更远，更多的是一种致敬、延续和希望走的更远。
vue3+element plus 从入门开始
zxb11c的博客
11-28 1231
package.json 项目配置文件，项目的标题、版本，模块的版本等信息。src目录下新建文件夹router，文件夹新建路由文件index.ts。vite.config.ts Vite配置文件。main.ts 根函数入口，全局配置生效的地方。tsconfig.json TS配置文件。node_modules 模块包。components 组件。App.vue 根组件、public 公共资源。assets 静态资源。在main.ts 配置。1,安装nodejs。配置路由，写入文件中。
搭建 Vite + Vue3 + Pinia + Element Plus 项目。
~~~
08-03 933
搭建 Vite项目，Pinia 以及 Element Plus 的安装使用。
Vue3 + Vite + TypeScript + Element-Plus：从零到一构建企业级后台管理系统（前后端开源）
热门推荐
有来技术
04-17 6万+
vue3-element-admin 是基于 vue-element-admin 升级的 Vue3 + Element Plus 版本的后台管理前端解决方案，技术栈为 Vue3 + Vite4 + TypeScript + Element Plus + Pinia + Vue Router 等当前主流框架。本篇是 vue3-element-admin v2.x 版本从 0 到 1，相较于v1.x 版本增加了对原子CSS(UnoCSS)、按需自动导入、暗黑模式的支持。
vue3 + ts +element-plus + vue-router + scss + axios搭建项目
m0_67624022的博客
03-21 1726
本地环境：node版本：20.10.0。封装axios，封装路由vue-router，封装element-plus
Vue3 + Vite3 + Element-Plus 管理系统
weixin_45231907的博客
01-15 2639
Vue3 + Vite3 + Element-Plus 管理系统介绍 📖vue-diverse-admin，基于 Vue3、TypeScript、Vite3、Element-Plus 开源的一套后台管理模板，项目均使用JS开发，但已经配置TS，可以JS、TS混用。目前功能还在持续更新中…您也可以删除其他直接使用Layout布局进行二次开发一、Git 仓库地址 (欢迎 Star⭐)二、🔨🔨🔨 项目功能🚀 使用 Vue3 开发。
从0实战一个 vue3+ ts+element-plus 项目
06-23 1801
vue3+ ts项目 #### 1. 添加axios请求 安装依赖 : npm install --save; npm install vue-axios --save; 引入:
Vue3 + Vite + TypeScript + Element-Plus创建管理系统项目
m0_59778008的博客
05-04 739
注意：导入组件时提示无法找到模块“…/pages/HomePage/index.vue”的声明文件。src/pages/HomePage/index.vue”隐式拥有 “any” 类型。按需自动导入：（需要先完成上一步对`unplugin-vue-components unplugin-auto-import``两个插件的安装）这样就可以直接使用Element-Plus里面的组件了。// 使用组件时不再需要导入，可以直接使用。
Vue3+element-plus实现后台管理系统
shi450561200的博客
05-08 4208
c. npm config set registry=https://registry.npmmirror.com 切换成国内镜像。d. 初始化工程 npm init vue@latest shop-admin -- --template vue。1、安装的插件 vscode中文显示插件 2、高亮提示插件volar 3、vue 3 sni 代码提示。安装: npm install element-plus --save。中文地址：https://cn.windicss.org/
基于Vue3+Element Plus后台管理系统模版源码.zip
10-26
基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element Plus后台管理系统模版源码.zip基于Vue3+Element ...
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
tp6-vue-admin:基于thinkphp6+vue2.6+element2.13 前后端分离落地解决方案
05-02
#thinkphp6+vue2.6+element2.13 前后端分离落地解决方案 本人开发环境版本信息： npm=6.13.4 vue =@vue/cli 4.1.2 node=v12.14.1 #注意1：vue-admin 中接口请求规则和动态路由，是对应tp6 中的接口规则和权限规则，...
前端面试题日常练-day97 【Less】
最新发布
qq_44640575的博客
07-20 340
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1128
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 644
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
LG 选择 Flutter 来增强其智能电视操作系统 webOS
恋猫de小郭的博客
07-17 1599
总的来说，LG 是 Flutter 在 TV 领域的一次新的尝试，并且它是在脱离了 Android 平台的场景下实现的支持，虽然 webOS 并不是什么流行的系统，但是这也体现出了 Flutter 的特点：可以用较低的成本实现较好性能的跨平台。后续，在 LG 的主导下，WebOS 经过进一步修改，转变为智能电视操作系统，于是 WebOS TV 就诞生了，此后 LG 的 TV 基本路线定为 webOS ，在应用层面，WebOS TV 以基于 Web 的技术为基础。然后 LG 为什么选择 webOS？
drf+vue3+element-plus搭建模板
05-10
以下是一个使用 Django Rest Framework (DRF)、Vue 3 和 Element Plus 搭建的前后端分离模板。 ### 后端 (Django Rest Framework) 1. 创建一个 Django 项目和应用程序： ``` $ django-admin startproject myproject $ cd myproject $ python manage.py startapp myapp ``` 2. 安装 DRF： ``` $ pip install djangorestframework ``` 3. 在 `myproject/settings.py` 中添加 DRF 和 CORS 的配置： ```python INSTALLED_APPS = [ # ... 'rest_framework', ] MIDDLEWARE = [ # ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ] REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework.authentication.TokenAuthentication', 'rest_framework.authentication.SessionAuthentication', ), 'DEFAULT_PERMISSION_CLASSES': ( 'rest_framework.permissions.IsAuthenticated', ), } CORS_ORIGIN_ALLOW_ALL = True ``` 4. 在 `myapp/views.py` 中定义一个视图： ```python from rest_framework.decorators import api_view from rest_framework.response import Response @api_view(['GET']) def hello(request): return Response({'message': 'Hello, world!'}) ``` 5. 在 `myproject/urls.py` 中添加路由： ```python from django.urls import path, include from myapp.views import hello urlpatterns = [ path('api/', include([ path('hello/', hello), ])), ] ``` 6. 运行服务器： ``` $ python manage.py runserver ``` 访问 `http://localhost:8000/api/hello/` 应该会返回 `{"message": "Hello, world!"}`。 ### 前端 (Vue 3 + Element Plus) 1. 使用 Vue CLI 创建一个新项目： ``` $ vue create myproject-frontend ``` 2. 安装 Element Plus： ``` $ npm install element-plus --save ``` 3. 在 `main.js` 中引入 Element Plus 和样式： ```javascript import { createApp } from 'vue' import App from './App.vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' createApp(App) .use(ElementPlus) .mount('#app') ``` 4. 在 `App.vue` 中添加一个按钮和一个文本框： ```vue <template> <div class="container"> <el-input v-model="name" placeholder="Enter your name"></el-input> <el-button type="primary" @click="sayHello">Say hello</el-button> <div class="result">{{ result }}</div> </div> </template> <script> import axios from 'axios' export default { name: 'App', data() { return { name: '', result: '' } }, methods: { sayHello() { axios.get('/api/hello/', { headers: { 'Authorization': 'Token ' + sessionStorage.getItem('token') } }) .then(response => { this.result = response.data.message }) .catch(error => { console.error(error) }) } } } </script> <style> .container { max-width: 800px; margin: 0 auto; padding: 20px; } .result { margin-top: 20px; font-weight: bold; } </style> ``` 5. 运行服务器： ``` $ npm run serve ``` 访问 `http://localhost:8080/` 应该会显示一个文本框和一个按钮。在文本框中输入你的名字，然后点击按钮，应该会显示 `Hello, world!`。 这是一个简单的模板，你可以根据自己的需要进行扩展和定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值