当前位置: 首页 > news >正文

[vue-admin-template实战笔记]

1.克隆项目
git clone git@gitee.com:panjiachen/vue-admin-template.git
2.安装依赖
npm install
3.运行项目就会自动打开网页,并且热部署插件
npm run dev
4.查看代码 //将vue-admin-template拖入到idea中即可查看代码

1)并且发现,常用的东西已经集成好了,比如: 热部署,修改代码保存就会生效。

2)而且,直接ctrl+鼠标左键,跟java代码一样,是可以查询在哪里使用的。

5.浏览工程中重要的东西

1)src/main.js

可以看出来,element-ui其实已经集成好了,包括多语言。

2)src/setting.js

可以设置title属性,设置管理系统的名字。

3)src/permission.js

这里是权限管理的逻辑,获取token,从而进行跳转到登录页面等逻辑。

4)src/router/index.js

这个很重要了,是和路由相关的东西,都有哪些页面,都在这里配置。

meta字段可以加入自定义属性,从而实现权限管理。

5)src/views

这个下面不用说了,是配合路由实现的各种页面。

6)src/api

框架封装了axios暴露为了request接口,这个api下就是各种接口了。

7)package.json

这个下面有很多打包的选项,咱们无需在gitbash中运行,点一下就能运行了,比如:打包。

6.打包

 测试环境打包

npm run build:stage

这时就会生成dist包,把此包扔到linux服务器上。

7.lignux安装nginx,并且配置下上面的dist文件路径

参考blog

[linux(静态文件服务)] 1.部署vue发布后的dist网页到nginx 2.偷懒的话可以用宝塔部署nginx-CSDN博客1.windows下把开发好的vue工程打包为dist文件然后配置下nginx目录即可。2.linux上不需要安装node.js环境。https://blog.csdn.net/themagickeyjianan/article/details/133037303

ok!!!下载可以访问了。 

http://www.lryc.cn/news/179484.html

相关文章:

  • unity 限制 相机移动 区域(无需碰撞检测)
  • Hudi第二章:集成Spark
  • springboot和vue:八、vue快速入门
  • docker-compose内网本地安装
  • ThreeJs的场景实现鼠标拖动旋转控制
  • jdk 管理工具比对 jEnv jabba SDKMAN
  • 华为云云耀云服务器L实例评测|部署在线图表和流程图绘制工具drawio
  • elementui引入弹出框报错:this.$alert is not defined 解决方案
  • docker的组件和资源管理
  • SEO的优化教程(百度SEO的介绍和优化)
  • Tomcat以及UDP
  • NLP 04(GRU)
  • BUUCTF reverse wp 51 - 55
  • WebGL笔记:使用鼠标绘制多个线条应用及绘制动感线性星座
  • nodejs+vue 汽车销售系统elementui
  • leetcode76 Minimum Window Substring
  • 简单工厂模式~
  • 基于Java的会员管理系统设计与实现(源码+lw+部署文档+讲解等)
  • 数据结构 图 并查集 遍历方法 最短路径算法 最小生成树算法 简易代码实现
  • idea Springboot 教师标识管理系统开发mysql数据库web结构java编程计算机网页源码maven项目
  • 2023-9-30 JZ36 二叉搜索树与双向链表
  • 在windows的ubuntu LTS中安装及使用EZ-InSAR进行InSAR数据处理
  • 腾讯mini项目-【指标监控服务重构】2023-08-25
  • 数据挖掘(1)概述
  • YApi Pro
  • AUTOSAR RTE介绍(更新版230925)
  • 深度学习笔记_1、定义神经网络
  • 【Java 进阶篇】MySQL 事务详解
  • Spring修炼之旅(3)自动装配与注解开发
  • 嵌入式Linux应用开发-基础知识-第十六章GPIO和Pinctrl子系统的使用