vue 构建前端项目并关联github

这几天尝试用node开发一个网站,后端的接口已经初步开发完成,现在开始构建前端的项目,记录下过程,在学习下吧. 用vue-cli 构建项目,myproject.(构架过程略过) 每次在本地构建项目后和远程仓库关联的时候会发现每次都出现种种问题,这一次我要记录下,关联的过程,对自己来说也是一次总结吧这一次我选择的是github,(国内现在可以使用码云,应该比github快,有机会去尝试一下): 第一步:打开github 这是用vue构建的项目,安装依赖后运行正常在这个项目根目录下,打开git…

在Vue&Element前端项目中，使用FastReport + pdf.js生成并展示自定义报表

在我的<FastReport报表随笔>介绍过各种FastReport的报表设计和使用,FastReport报表可以弹性的独立设计格式,并可以在Asp.net网站上.Winform端上使用,由于其主要是使用.net后端生成的报表方式,如果不考虑其在线设计处理,那么可以在在Vue&Element前端项目中使用,通过后端生成报表PDF文件,然后通过前端使用pdf.js来呈现报表最终效果即可. 1.使用FastReport生成自定义报表我们通过定义自己FastReport报表格式,然后在后端…

在Vue&Element前端项目中，对于字典列表的显示处理

在很多项目开发中,我们为了使用方便,一般都会封装一些自定义组件来简化界面的显示处理,例如参照字典的下拉列表显示,是我们项目中经常用到的功能之一,本篇随笔介绍在Vue&Element前端项目中如何使用自定义封装的字典显示处理. 1.字典内容管理我们在系统中,往往维护着一些系统常用到的字典信息,在我各个框架中都有一个通用的字典管理模块,对于Vue&Element前端项目,也是一样,我们也需要对它进行管理,方便前端使用.本篇随笔介绍的内容适用于ABP开发框架的Vue&Element前端…

Github配合Jenkins，实现vue等前端项目的自动构建与发布

本篇文章前端项目以vue为例(其实前端工程化项目的操作方法都相同),部署在Linux系统上(centos). 之前做前端项目的部署,一直都是手动运行打包命令,打包完.再使用FTP.Xshell等这类的工具上传到服务器.这种方式不仅效率不高,而且容易出错,一不小心就放错地方了.或者公司有运维,只需要打包前端项目代码后发给运维就不管了,但是一般的小公司是没有运维的.所以呢,就在找有没有什么工具可以自动帮我完成这些操作,于是就找到了下面这货,名字叫做Jenkins.随着用的越来越多,越来越顺心,这小老…

jenkins自动构建前端项目(window,vue)

我们把一个多人协作的vue前端项目发布服务器,一般要经过以下步骤: git更新最新的代码构建项目把构建后的代码上传到服务器如果用jenkins来构建的话,只需要点击一次构建按钮,就可以自动完成以上的步骤了,而且根据需求,可以实现更多的功能. 1.下载安装jenkin 1.1 java环境 jenkins需要运行在Java的环境中,所以前提是需要先安装jdk,测试jdk是否安装好,在命令行输入:java -version 1.2 下载jenkins 下载地址 jenkins下载下载后点击安…

Webpack构建前端项目

前言公司据说要搞前后端分离,趁这两天项目完成的差不多,抓紧时间学习一下前端知识现在流行前端项目工程化,那么第一个问题就是如何创建工程(项目),第一次玩webpack 通过 NPM 创建项目 # 创建项目 npm init -y -y 在这里是表示快速新建.使用 npm init 来初始化,终端会一步一步提示输入 name.version.description 等项目 meta 信息,通过使用 flag -y 跳过所有的 prompt,一路到底完成默认值的初始化. 完成后 NPM 会自动在目…

如何使用Docker构建前端项目

原文链接 Docker单独部署前端项目和Node项目是非常便捷的,在这里分享一下Docker的使用,主要聊聊它的部署实践.(我是window10专业版安装Docker) Docker Docker是一种应用容器引擎技术,类似于虚拟机,不过它的实用性.通用性.便捷性更强,Docker容器可以说就是VM,不过占用资源更少,更轻量,通过操作系统级虚拟化方法,利用更加节省的硬件资源提供给用户更多的计算资源. Docker容器是Linux 容器的一种封装,由于容器存在独立的运行环境,Docker可以将应用…

vue构建完整项目-以及实现

简介由于开发vue项目的时候,需要重新搭建项目的架子,比较麻烦,其实之前做过的项目好多都可以直接拿过来用,比如接下来的这个项目,就可以满足平常的vue单页面开发. 该项目包括了: 全局配置axios , 全局配置接口集合 , 切换页面动画 , 全局配置vuex(其中vuex做的很经典规范 ,可以参考), 页面请求数据增加loading效果项目地址: https://github.com/YalongYan/vue-markert-h5 主要结构目录 . ├── build // webpa…

运行VUE的前端项目

前提条件:已经安装nodejs和cnpm ,参考前一篇文章 1.在前端项目所在的目录下执行cnpm install 下载该项目需要的包,这些包和全局配置下的包可能不同的版本cnpm会根据package.json来下载根据package-lock来锁定具体版本号 2.执行 cnpm run dev 来运行项目(不能使用npm run dev 会出现很多问题) 关注问题点: 1.向目包运行过程中cnpm install 可能需要重复执行,直到所有的包都完成了安装. 2.部分编译的时候报错出现找…

用gulp替代fekit构建前端项目

https://segmentfault.com/a/1190000003060016 离开qunar有一个多月了,在离开的时候就决定不再用fekit.做出这个决定并不是因为fekit不好,恰恰相反,fekit帮我们做了很多事情,还屏蔽了许多细节,让开发人员能够专注于开发过程.不过随着fekit的升级,也出现了一些问题,同时fekit和公司业务及发布流程有一定耦合,所以觉得采用开源的构建方案. 在使用gulp的过程中,基本也是依据使用fekit的思路来逐步完善构建过程的,所以还是要感谢fekit…

利用fis3构建前端项目工程

FIS3是国内百度公司产出的一款前端工程构建工具,FIS3可以解决前端工程中性能优化.资源加载(异步.同步.按需.预加载.依赖管理.合并.内嵌).模块化开发.自动化工具.开发规范.代码部署等问题,首先来简单的实现资源合并压缩提高性能等问题. 安装fix3 npm install -g fis3 创建项目目录 cd 进入此目录中初始化,执行 fis3 init 对需要的插件进行安装 ,比如安装scss编译插件: npm install -g --save-dev fis-parser-node-s…

【gulp】gulp + browsersync 构建前端项目自动化工作流

什么是 gulp? gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.gulp.js 是基于 node.js 构建的,利用 node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作.gulp.js 源文件和你用来定义任务的 gulp 文件都是通过 javascript(或者 coffeescript )源码来实现的.更多关于 gulp,可以通过官网了解. 什么是 browsersync? browsersync 能让浏览器实时.快速响应您的文件(…

使用npm构建前端项目基本流程

现在各种前端框架, 库文件基本都托管到npm上, 我们平常下载到别人的项目文件, 也基本是用npm 构建的, 不了解点node和npm那是寸步难行. 下面介绍的代码示例不敢说是最佳实践, 但都是我亲自在自己机器上测试有效的. 测试环境: win10, node v8.4, npm v5.3. package.json package.json文件非常重要, 我们拿到别人的项目第1眼便是看package.json里有什么, 我们自己创建个新项目, 首先就要创建好package.json文件. 假…

git初始化本地项目及关联github远程库

一.初始化本地项目 idea中在项目文件夹下执行:git init . 二.在github官网上创建一个库三.执行如下命令关联远程库: git remote add origin 你创建的git远程库地址而后执行pull及push操作…

使用grunt构建前端项目

1. grunt构建工具是基于nodejs上的,所以在使用之前一定要先安装好nodejs 2. 安装好nodejs后,node -v查看node版本 npm-v 查看npm版本信息 3. 在需要用到的项目文件下安装grunt,安装命令 :npm install grunt ,安装之后无法执行grunt命令,需安装一个全局的grunt-cli ( grunt命令操作 ) 安装命令:npm install -g grunt-cli,再使用 grunt --version 查看grunt-cli版本…

react构建前端项目方法汇总

react简介: 一.使用react 创建一个PC端的项目 (a):使用 yemon 创建一个 webpack 的 react 的项目控制台安装并且产看 yemon 的版本 yo -v (b): 全局安装 webpack react 的模板 genrator,如果安装过了,就跳过 npm install -g generator-react-webpack (c):进图项目目录文件:执行 yo react-webpack +项目名字这样我们的项目就创建好了,在项目根目录下执行 npm run…

前端快速构建神器vue-cli，windows下安装并且构建前端项目

1.nodejs官网http://nodejs.cn/下载安装包,傻瓜式安装即可 2.dos命令查询node的版本 node -v 查询版本号 npm -v 查询npm包管理版本 3.安装国内镜像 npm install -g cnpm --registry=http://registry.npm.taobao.org 4.安装vue脚手架工具 npm install -g vue-cli 5.创建我们一个项目目录,并且进入其中,构建我们自己项目 vue init webpackge first…

用gulp构建你的前端项目

前言前端技术发展日新月异,随着模块化.组件化的提出,前端变得越来越复杂,静态资源越来越多,那么对静态资源的处理,如压缩,合并,去掉调试信息.. 如果还是人工去处理,效率非常之低且还容易出错,于是自动化的处理工具也就必然出现了.就像后端我们一般用maven管理项目,那么前端gulp是个不错的选择. 什么是gulp 是一个基于 Node.js 流.Javascript语法的快速构建前端项目并减少频繁的 IO 操作的自动化工具. Gulp有什么好处易于学习使用通过最少的API(核心.src().…

在Vue前端项目中，附件展示的自定义组件开发

在Vue前端界面中,自定义组件很重要,也很方便,我们一般是把一些通用的界面模块进行拆分,创建自己的自定义组件,这样操作可以大大降低页面的代码量,以及提高功能模块的开发效率,本篇随笔继续介绍在Vue&Element前端项目中如何使用自定义封装的组件,实现附件的展示场景. 1.界面模块的拆分 Vue的前端界面,对界面内容部分可以根据需要进行适当的拆分,也可以把通用的部分封装为组件进行使用,如我在随笔<循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理>…

08Vue.js快速入门-Vue综合实战项目

8.1. 前置知识学习 npm 学习官方文档推荐资料 npm入门 npm介绍需要了解的知识点 package.json 文件相关配置选项 npm 本地安装.全局安装.本地开发安装等区别及相关命令 npm script脚步的基本编写能力有时间专门写一个这样的专题,如果需要可以邮件我.malun666@126.com webpack基础学习官方文档 Webpack了解的知识点: webpack的基本配置了解webpack常用的loader: less-loader.sass-loader…

Flask & Vue 构建前后端分离的应用

Flask & Vue 构建前后端分离的应用最近在使用 Flask 制作基于 HTML5 的桌面应用,前面写过<用 Python 构建 web 应用>,借助于完善的 Flask 框架,可以轻松的构建一个网站应用.服务端的路由管理和前端模板页面的渲染都使用 Flask 提供的 API 即可,并且由于 werkzuge 提供了强大的开发功能,可以在运行时自动重新加载整个应用.如果使用 gevent 提供的 WSGIServer 作为服务器网关,在使用时需要进行一定的配置.此时仍然是由 P…

循序渐进VUE+Element 前端应用开发(12）--- 整合ABP框架的前端登录处理

VUE+Element 前端是一个纯粹的前端处理,前面介绍了很多都是Vue+Element开发的基础,从本章随笔开始,就需要进入深水区了,需要结合ABP框架使用(如果不知道,请自行补习一下我的随笔:ABP框架使用),ABP框架作为后端,是一个非常不错的技术方向,但是前端再使用Asp.NET 进行开发的话,虽然会快捷一点,不过可能显得有点累赘了,因此BS的前端选项采用Vue+Element来做管理(后续可能会视情况加入Vue+AntDesign),CS前端我已经完成了使用Winform+ABP的模…

VUE+Element 前端应用开发框架功能介绍

前面介绍了很多ABP系列的文章<ABP框架使用>,一步一步的把我们日常开发中涉及到的Web API服务构建.登录日志和操作审计日志.字典管理模块.省份城市的信息维护.权限管理模块中的组织机构.用户.角色.权限.菜单等内容,以及配置管理模块,界面的高级查询处理等内容,并根据我们在Winform领域多年的开发经验,完成了系统功能在Winform界面下的实现,并利用工具实现快速的Winform界面生成工作:而在循序渐进VUE+Element 前端应用开发文章<循序渐进VUE+Element&g…

循序渐进VUE+Element 前端应用开发(13）--- 前端API接口的封装处理

在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>介绍了一个系统最初接触到的前端登录处理的实现,但往往对整个系统来说,一般会有很多业务对象,而每个业务对象的API接口又有很多,不过简单来说也就是常规的增删改查,以及一些自定义的接口,通用都比较有规律性.而本身我们这个VUE+Element 前端应用就是针对ABP框架的业务对象,因此前端的业务对象接口也是比较统一的,那么可以考虑在前端中对后端API接口调用进行封装,引入ES6的方式进行前端API…

使用vue2.x+webpack+vuex+sass+axios+elementUI等快速搭建前端项目框架

一.本文将分享如何快速搭起基于webpack+vue的前端项目框架,利用vue的自己的脚手架工具vue-cli搭建起基本的环境配置,再通过npm包管理工具引入相应的依赖来完善项目的各种依赖框架.下面是具体实操. 二.基本命令操作. 1.在开发之前需要首先安装node.js,直接百度搜索或者在其中文官网也可以下载http://nodejs.cn/download/, 在装完node之后npm包管理工具也自动的安装好,安装完之后,在命令行输入node -v或者npm -v,出现版本号说明安装成功.如…

对于jenkins上前端项目 npm 或 yarn 打包及部署使用

1.npm和yarn镜像源地址 npmMirror ~~~~~ https://skimdb.npmjs.com/registry/ edunpm ~~~~~~ http://registry.enpmjs.org/ taobao ~~~~~~ https://registry.npm.taobao.org/ cnpm ~~~~~~ http://r.cnpmjs.org/ npm ~~~~~~ https://registry.npmjs.org/ yarn ~~~~~~ https://re…