从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发的项目
项目简介:该项目是基于日常计算宿舍水电煤气费的需求写的,旨在从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发,使用webpack进行代码的编译、压缩和打包,并疏通了该项目如何放到服务器上运行的全过程。
项目环境搭建
一、vue的安装和使用
1.安装node
2.全局安装vue-cli,用npm install -g vue-cli命令
3.用webpack初始化项目,在需要放置项目的路径下用vue init webpack BillingSystem(项目名)命令
二、element的安装和使用
4.安装element-ui,用npm i element-ui -S命令
5.引入element-ui,在main.js写入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);即可引入
三、less的安装和使用
6.安装cnpm,用npm install -g cnpm --registry=https://registry.npm.taobao.org命令
7.安装less,用cnpm install less less-loader --save命令
8.在vue文件style中加上lang="less"的属性,即可使用
四、项目运行
1.安装cnpm,用npm install -g cnpm --registry=https://registry.npm.taobao.org命令
2.安装依赖,用cnpm install命令
3.项目运行,用npm run dev命令
4.访问http://localhost:8080
五、项目部署到Express服务器上
1.编译项目,用npm run build命令,生成dist文件夹
2.全局安装express-generator,用npm install express-generator -g命令
3.创建一个express项目,在需要放置项目的路径下用express BillingSystemBuild(项目名)命令
4.进入BillingSystemBuild目录,安装项目依赖,用npm install命令
5.把dist目录复制到express项目的public文件夹下,把dist里的static文件夹剪切到public文件夹下
6.运行npm start,启动服务器
7.访问http://localhost:3000/dist
六、项目部署Tomcat服务器上
1.编译项目,用npm run build命令,生成dist文件夹
2.将dist文件夹放在tomcat安装路径下的webapps文件夹里
3.新增环境变量中的系统变量,变量名为JAVA_HOME,变量值为jdk的路径
4.把dist目录复制到webapps文件夹下,把dist里的static文件夹剪切到webapps文件夹下
5.运行Tomcat的bin/startup.bat
6.访问http://localhost:3000/dist
项目地址:https://github.com/LuoYiHao/billing-system
从无到有实现搭建vue+ElementUI+less+ES6的开发环境并进行简单的开发的项目的更多相关文章
- 从零开始搭建vue+element-ui后台管理系统项目到上线
前言 之前有些过移动端的项目搭建的文章,感觉不写个pc端管理系统老感觉少了点什么,最近公司项目比较多,恰巧要做一个申报系统的后台管理系统,鉴于对vue技术栈比较熟悉,所以考虑还是使用vue技术栈来做: ...
- 如何在Eclipse中搭建MyBatis基本开发环境?(使用Eclipse创建Maven项目)
实现要求: 在Eclipse中搭建MyBatis基本开发环境. 实现步骤: 1.使用Eclipse创建Maven项目.File >> New >> Maven Project ...
- 基于Debian搭建Hyperledger Fabric 2.4开发环境及运行简单案例
相关实验源码已上传:https://github.com/wefantasy/FabricLearn 前言 在基于truffle框架实现以太坊公开拍卖智能合约中我们已经实现了以太坊智能合约的编写及部署 ...
- Flask15 远程开发环境搭建、安装虚拟机、导入镜像文件、创建开发环境、pycharm和远程开发环境协同工作
1 安装VM虚拟机 待更新... 2 导入镜像文件 待更新... 3 启动虚拟机 4 远程连接虚拟机 4.1 安装xShell软件 待更新... 4.2 创建一个新的连接 4.2.1 在虚拟机中获取虚 ...
- 搭建python的开发环境(采用eclipse的开发工具)在线和离线安装pyDev
一.首先下载python的开发环境并安装 在这里下载python3.7.2,然后安装在一个指定文件夹,随后,将安装路径配置到环境变量中 验证是否成功 OK! 二.在线安装pyDev工具 三.导入开发环 ...
- 从0开始搭建vue+webpack脚手架(三)
在从0开始搭建vue+webpack脚手架(二)中已经基本完成了开发环境的配置.当开发完成后,我们需要将完成的项目进行打包,接下来对打包做一些优化: 运行 $ npm run build 可生成dis ...
- webpack搭建vue项目,实现脚手架功能
本文基于node.js开发环境,安装完node之后新建项目,通过webpack配置,实现vue-cli脚手架功能 对于刚刚接触编程的人来说,最难的可能并不是学习一种新语法或者框架,而是编程思维,这种思 ...
- spring boot + vue + element-ui
spring boot + vue + element-ui 一.页面 1.布局 假设,我们要开发一个会员列表的页面. 首先,添加vue页面文件“src\pages\Member.vue” 参照文档h ...
- 十分钟上手-搭建vue开发环境(新手教程)
想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建 ...
随机推荐
- 写了那么久的Python,你应该学会使用yield关键字了
写过一段时间代码的同学,应该对这一句话深有体会:程序的时间利用率和空间利用率往往是矛盾的,可以用时间换空间,可以用空间换时间,但很难同时提高一个程序的时间利用率和空间利用率. 但如果你尝试使用生成器来 ...
- MyEclipse 2013配置JDBC连接mySQL||Tomcat 7.0 8.0 配置 JDBC |配置mysql-connector-java-5.1.16
MyEclipse->Preferences->MyEclipse->Severs->Intergated Sandbox->Myeclipse Tomcat 7(或者T ...
- Java基础(十)接口(interface)
1.接口的概念 在Java中,接口不是类,而是对类的一组需求描述,这些类要遵从接口描述. 例如:Array类中的sort方法可以对对象数组进行排序,但要求满足下列前提:对象所属的类必须实现了Compa ...
- Md5与HMAC-SHA256
Md5签名算法 private string CalMd5(string str) { var md5 = MD5.Create(); var bs = md5.ComputeHash(Encodin ...
- Java新特性 5、6、7、8、9、10、11、12、13
文章转载于:https://www.cnblogs.com/hepengju/p/11595102.html 项目地址:https://github.com/hepengju/java-new-fea ...
- TensorFlow深度学习基础与应用实战高清视频教程
TensorFlow深度学习基础与应用实战高清视频教程,适合Python C++ C#视觉应用开发者,基于TensorFlow深度学习框架,讲解TensorFlow基础.图像分类.目标检测训练与测试以 ...
- [loj2546][JSOI2018]潜入行动(树形DP)
题目描述 外星人又双叒叕要攻打地球了,外星母舰已经向地球航行!这一次,JYY 已经联系好了黄金舰队,打算联合所有 JSOIer 抵御外星人的进攻. 在黄金舰队就位之前,JYY 打算事先了解外星人的进攻 ...
- 使用float设置经典的网站前端结构
float浮动是能使得标签脱离文档流,此处脱离文档流,是指此便签后面的,没有脱离文档流的标签将此标签当作透明,按正常来布局. float脱离文档流,是受到父级范围限制的,在父级范围内脱离文档流,脱离文 ...
- 题解【洛谷】CF134A
题解 CF134A [Average Numbers] 这题就是简单的模拟. 只不过要优化一下常数什么的 思路: 为了不浪费时间总是取平均数,直接用一个 S 储存总和,每次都减去 a_i 再除以 n ...
- 浅谈Spring AOP 面向切面编程 最通俗易懂的画图理解AOP、AOP通知执行顺序~
简介 我们都知道,Spring 框架作为后端主流框架之一,最有特点的三部分就是IOC控制反转.依赖注入.以及AOP切面.当然AOP作为一个Spring 的重要组成模块,当然IOC是不依赖于Spring ...