spring boot + vue + element-ui全栈开发入门——集成element-ui
一.IDE开发工具
常用的开发工具有webstorm和sublime。
我个人喜好用Atom+插件的形式
打开Atom,在file --> settings --> packages中收入vue开发相关的插件
beautify:代码格式
atom-html-preview:html代码提示
language-vue、language-vue-component:vue语言
lint-sass-vue:vue的sass语言
vue-autocomplete:vue语法提示
文件结构如下:
二、安装组件
进入package.json同级目录
运行
cnpm install --save axios
安装axios,用于调用http请求
安装element-ui库
cnpm install --save element-ui
安装font-awesome图标库
cnpm install --save font-awesome
安装sass库
cnpm install --save-dev node-sass
cnpm install --save-dev sass-loader
安装mock.js
cnpm install --save-dev mockjs
cnpm install --save-dev axios-mock-adapter
其中,axios-mock-adapter能拦截http请求的同时模拟需要的数据
三、生成好看的主题风格
进去https://elementui.github.io/theme-chalk-preview/#/zh-CN网站,选择喜欢的颜色
这里,我选择了一个深蓝色作为主题颜色,并下载
把下载的主题放置目录下 src\assets\theme
四、编写程序入口
在main.js中导入“font-awesome”和“element-ui”
import 'font-awesome/css/font-awesome.min.css' import ElementUI from 'element-ui'
import './assets/theme/element-#0b0a3e/index.css'
Vue.use(ElementUI)
完整的main.js代码如下:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router' Vue.config.productionTip = false import 'font-awesome/css/font-awesome.min.css' import ElementUI from 'element-ui'
import './assets/theme/element-#0b0a3e/index.css'
Vue.use(ElementUI) /* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
git代码地址:https://github.com/carter659/spring-boot-vue-element.git
如果你觉得我的博客对你有帮助,可以给我点儿打赏,左侧微信,右侧支付宝。
有可能就是你的一点打赏会让我的博客写的更好:)
spring boot + vue + element-ui全栈开发入门——集成element-ui的更多相关文章
- spring boot + vue + element-ui全栈开发入门——开篇
最近经常看到很多java程序员朋友还在使用Spring 3.x,Spring MVC(struts),JSP.jQuery等这样传统技术.其实,我并不认为这些传统技术不好,而我想表达的是,技术的新旧程 ...
- spring boot + vue + element-ui全栈开发入门——基于Electron桌面应用开发
前言 Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. Electron通过将Chromium和Node.js合并到同一个运行时环 ...
- spring boot + vue + element-ui全栈开发入门
今天想弄弄element-ui 然后就在网上找了个例子 感觉还是可以用的 第一步是完成了 果断 拿过来 放到我这里这 下面直接是连接 点进去 就可以用啊 本想着不用vue 直接导入连接 ...
- spring boot + vue + element-ui全栈开发入门——spring boot后端开发
前言 本文讲解作为后端的spring boot项目开发流程,如果您还不会配置spring boot环境,就请点击<玩转spring boot——快速开始>,如果您对spring boot还 ...
- koa+mysql+vue+socket.io全栈开发之数据访问篇
后端搭起大体的框架后,接着涉及到的就是如何将数据持久化的问题,也就是对数据库进行 CURD 操作. 关于数据库方案, mongodb 和 mysql 都使用过,但我选用的是 mysql,原因: 目前为 ...
- 实习模块vue+java小型全栈开发(三)
实习模块vue+java小型全栈开发(三) --dx 背景 首先,先给自己一个答案:这篇博客我定义为(三),因为之前的两个模块页面,内容都是一样的,但是被改了几次需求,就一直拖着没有上传. 今天是真正 ...
- spring boot + vue + element-ui全栈开发入门——项目部署
前言 常用的部署方式有两种: 1.是把生成好的静态页面放到spring boot的static目录下,与打包后的spring boot项目一起发布,当spring boot运行起来后,自然而然就能访 ...
- spring boot + vue + element-ui全栈开发入门——前后端整合开发
一.配置 思路是通过node的跨域配置来调用spring boot的rest api. 修改config\index.js文件,设置跨域配置proxyTable: proxyTable: { '/ap ...
- spring boot + vue + element-ui全栈开发入门——前端列表页面开发
一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档http://element.eleme.io/#/zh-CN ...
随机推荐
- 揭秘Java热部署原理及JRebel(Hotcode)的实现原理
基础知识:class卸载.热替换和Tomcat的热部署的分析HotSwap:HotSwap和JRebel原理成熟的热部署技术实现原理:深入探索 Java 热部署 java的热部署和热加载
- ambari 安装HDP3.0.1后,启动服务的问题记录
HDP的ambari集成安装工具真的是比ClouderaManager差上那么一点儿,不说安装的时候就麻烦,即使软件安装包已成功安装,也不意味着可以正常使用了,启动HDP集群过程中还会有不少的错误! ...
- swoole推送信息一对一,一对多
服务端 $ws->on('message', function ($ws, $frame) { //echo "接收到的信息: {$frame->data}\n"; / ...
- Fiddler抓包手机代理配置
参考链接:https://i.wanz.im/2013/04/30/debugging_http_request_with_fiddler/ http://www.hangge.com/blog/ca ...
- 【netcore基础】CentOS 7.6.1810 搭建.net core 2.1 linux 运行环境 nginx反向代理 supervisor配置自启动
之前写过一篇Ubuntu的环境搭建博客,感觉一些配置大同小异,这里重点记录下 nginx 作为静态 angular 项目文件服务器的配置 参考链接 [netcore基础]ubuntu 16.04 搭建 ...
- Ext JS 6 入门学习资料大全(2018-03-07)
现在 sencha touch已经升级为 Ext JS 6 了重新整理下资料 官方网站:https://www.sencha.com/ 在线文档:http://docs.sencha.com/extj ...
- java可供判断某字符串是什么编码的一行代码
System.out.println("中文"); System.out.println("中文".getBytes()); System.out.printl ...
- 第六天 py 加法练习
其实就是while的用法! 该看第65 啦
- Tanya and Candies
Tanya and Candies time limit per test 1 second memory limit per test 256 megabytes input standard in ...
- C/C++预处理器
关于预处理器 首先时预处理器的条件指令 什么是预处理指令? 预处理指令是以#号开头的代码行.#号必须是该行除了任何空白字符外的第一个字符.#后是指令关键字,在关键字和#号之间允许存在任意个数的空白字符 ...