Vue的使用 -- 基于Vue搭建前端页面
Vue的使用 – 基于Vue搭建前端页面
首先,用到的前端技术只有 Vue、Element-ui、axios、Echarts,至于其它的技术点,我一个后端很少接触。
其次,Echarts 我也不怎么会用(就省略了)。
最后,我是使用 vue ui 界面来搭建前端的。
安装 Vue、Vue-cli
我使用 npm 安装 Vue、Vue 脚手架
# 加上 [-g] 是全局安装/删除# 如果想要删除([]里是要删除的文件的名字)
$ npm unintall -g [vue]# 最新稳定版 Vue
$ npm install -g vue@next# 安装 Vue/cli
$ npm install -g @vue/cli# 查看 版本
# cmd =>
>vue --V
vue的安装教程(官网)
搭建 前端页面
vue 3 + Element-Plus + axios + Echarts 一般推荐
因为我不会。
哈哈,是因为和 Vue 2 不兼容,当然也可以安装插件实现同时使用 Vue 2 和 Vue 3(看官网),我之前是用 Vue 2,就不怎么推荐。
嗯,现在简单了解了,与 element 2 区别不大,注意 看 官网就好。
element-plus,官网
我把 axios.js 放在 src/plugins 包下,而 charts.js、element.js ,在添加 element、echarts 插件时就自动放在 src/plugins 包下了
参考:《vue3+elementui使用方式(完整,包括创建项目)》
配置文件 js 的编写
charts.js
import * as Echarts from 'echarts';const echarts = Echarts;export default echarts
axios.js
// 自行添加的文件
// 导入 axios
import axios from 'axios'// 使用 axios 下的 create() 方法创建 axios 实例
// create([config])中,config是最基本的配置
const API = axios.create({// 后端的基本地址baseURL: 'http://localhost:8091/clond',// 连接超时,单位 mstimeout: 2000
})// 导出 axios
export default API
element.js
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'export default (app) => {app.use(ElementPlus)
}
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 导入 element-plus
import installElementPlus from './plugins/element'
// 导入 axios
import axios from './plugins/axios.js'
// 导入 echarts
import echarts from './plugins/charts.js'const app = createApp(App).use(router).use(router);
installElementPlus(app);
app.config.globalProperties.$http = axios;
app.config.globalProperties.$echarts = echarts;
app.mount('#app');
vue 2 + Element-UI + axios + Echarts 强烈推荐
因为我基本都是用 Vue 2,哈哈,其实我是先接触的是 Vue 2,使用的时候还局限在构建页面阶段,没有去优化页面、没有添加页面功能等等,使用太局限了。
element-ui,官网
配置文件的编写
添加 element、echarts 插件时,charts.js、element.js 就自动放在 src/plugins 包下
charts.js
import Vue from 'vue'import * as echarts from 'echarts'Vue.prototype.$echarts = echarts
element.js
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(Element)
main.js
import Vue from 'vue'
import App from './App.vue'
import './plugins/charts.js'
import './plugins/element.js'
import router from './router'
import axios from 'axios'Vue.config.productionTip = false// 配置请求的根路径
axios.defaults.baseURL = 'http://localhost:8091/clond'Vue.prototype.$http = axiosnew Vue({router,render: h => h(App)
}).$mount('#app')
axios 的使用
在 main.js 中,可以看到
// Vue 2 版
Vue.prototype.$http = axios// Vue 3 版
app.config.globalProperties.$http = axios;
其中,$http
就是自定义用来使用 axios 插件的字段。(看个人习惯)
echarts
也是同样
使用方法
// get 方法
// const result = this.$http.get(URL);
// 其中,URL只需要写 基本 URL后的部分即可,将 result 解析后便可得到想要的数据
// 对应的URL:http://localhost:8091/clond/student/select
const result = this.$http.get('/student/select');
// 对应的URL:http://localhost:8091/clond/student/select/{id}
const result = this.$http.get('/student/select/' + 1);// post 方法
// 对应的URL:http://localhost:8091/clond/student/save
// studentSave 是在 data() 中定义的数据类
const result = this.$http.post('/student/save/', this.studentSave);// delete 方法
// 对应的URL:http://localhost:8091/clond/student/delete/{id}
const result = this.$http.delete('/student/delete/' + 1);// 其他方法 省略,使用 方法与前方法类似,只要掌握了 Get/Post,就没有问题了。
我在Gitee中的代码:https://gitee.com/L_JIA_MING/vue_construct
使用 vue ui 搭建 vue 页面的基本流程
个人使用 UI 界面来构建时因为流程可视化,构建完成后可以直接编译运行,十分方便。
构建
在 cmd 命令行输入命令
vue ui
,进入 UI 构建界面。跳到目标文件夹,
点击按钮后可替换路径
。
设置项目名、包管理器
我手动构建是个人习惯,
其实都一样
。
关掉格式检查
选择 Vue 版本
Vue 3 与 Vue 2 的依赖和插件区别
Vue 2
的依赖
Vue 2
的插件
Vue 3
的依赖
Vue 3
的插件
常用的插件安装好了,如果对你有帮助就点个赞吧!
Vue的使用 -- 基于Vue搭建前端页面相关推荐
- 基于webpack搭建前端工程解决方案探索
关于前端工程 \\ 下面是百科关于"软件工程"的名词解释: \\ \ 软件工程是一门研究用工程化方法构建和维护有效的.实用的和高质量的软件的学科. \ \\ 其中,工程化是方法,是 ...
- flask后台管理系统快速开发案例之bootstrap搭建前端页面框架
这次为了给大家来一次较为完整的flask知识的分享,于是乎,我干脆直接写一个较为全面的,从前端到后端均自定义的基于flask的后台管理项目,先给大家看一下本次项目的效果图: 因为是示范版的,比较简洁, ...
- vue 音乐盒app_基于Vue.js的音乐播放器(Webapp)
概述 项目是基于Vue.js,成品是一个移动端的音乐播放器,来源于imooc的实战课程.自己动手实践并加以修改拓展. 项目的大致流程是Vue-cli构建开发环境,分析需求,设计构思,规划目录结构,开始 ...
- vue整合uniapp_基于vue+uniapp直播项目|uni-app仿抖音/陌陌直播室
一.项目简介 uni-liveShow是一个基于vue+uni-app技术开发的集小视频/IM聊天/直播等功能于一体的微直播项目.界面仿制抖音|火山小视频/陌陌直播,支持编译到多端(H5.小程序.Ap ...
- vue html5 picker,基于vue的picker组件
概述 基于vue.js选择器组新直能分支调二浏页器朋代说件 DEMO 安装 npm install vue-3d-picker --save import picker from 'vue-3d-pi ...
- cms php vue 开源_lucms —— 基于 Vue 和 Laravel 开发的后台管理系统
lucms -- 基于 Vue 和 Laravel 开发的后台管理系统 由 Ucer 创建于2年前, 最后更新于 1年前 版本号 #1 36802 views 8 likes 0 collects 项 ...
- SpringBoot个人博客项目搭建—前端页面功能介绍(一)
SpringBoot个人博客-前端页面功能介绍(一) 项目首页地址:https://blog.csdn.net/weixin_45019350/article/details/108869025 一. ...
- vue v-html scoped,基于vue中的scoped坑点解说
今天在覆盖iview组件样式的时候发现一个问题,就是无法覆盖组件原有的样式,最后在github的issue中找到了答案: 不要使用scoped属性.于是我查找了下关于scoped的文章. 我们假设把这 ...
- springboot+vue.js+mysql+基于VUE框架的商城综合项目自动化系统的实现 毕业设计-附源码051018
商城综合项目自动化系统 摘 要 目前电商系统商城项目管理极其频繁,迫切地需要自动化测试来代替人工繁琐而又重复的劳动.自动化测试相关的研究已经很多,但多数只是针对某一方面,比如单一接口或者单一页面或者性 ...
最新文章
- php对手时间戳判断,PHP 中判断一个数字是否是Unix 时间戳
- linux 清空catalina.out日志 不需要重启tomcat(五种方法)【转】
- CVPR 2021 | Facebook提出FP-NAS:搜索速度更快、分类精度更高、性能更好
- scala中_+_的意思
- linux echo命令
- Jstatd命令(Java Statistics Monitoring Daemon)
- 多伦多大学好吗_多伦多大学好毕业吗
- toj 4596 一行盒子
- Mysql学习总结(61)——MySQL优化之DBA级优化整理汇总
- Spring源码分析之Aop中拦截器,适配器,通知之间的关系
- nohup.out文件过大的解决办法
- JavaScript(第七天)【对象和数组】
- 随机模拟的基本思想和常用采样方法(sampling)
- jdk的wsimport方法实现webservice客户端调用服务
- 无主之地1代人物和故事背景…
- 云计算在未来一年的发展预测
- 你从哪里来你是谁你到哪里去_你到底在哪里?
- AIRPLAY镜像音频数据的处理
- 计算机服务器机房 消防灭火,服务器机房消防系统和维护
- 大数据挖掘永恒的定律?符号回归(Symbolic Regressor)
热门文章
- VC++对Access数据库的操作(查询、插入、更新、删除等)
- FreeLaunchBar-Windows10系统任务栏快捷方式管理者
- 独家思维导图!让你秒懂李宏毅2020深度学习(五)—— Tips for Deep Leaning Why Deep?
- 爬虫数据分析-----matplotlib图形展示
- 利用python数据分析,获取双色球历史中奖信息!(内含详细代码)
- 为什么现在的大学生喜欢去报名软件培训班
- Linux应用程序开发笔记:nanopi-m4(rk3399)camera isp(附OV4689 4-lane-MIPI驱动,支持1080p@120fps)
- 微信支撑10亿用户背后核心技术,竟然是它...
- win7打印机共享出现错误0x000006d9如何解决
- 【.NET框架】—— ASP.NET MVC5 初识(一)