前端fayermall开发项目

一、开发环境的搭建

注释:(因为是自己的电脑开发的,所以所有的都要重新安装)

1、安装nodejs(js服务端的运行环境,构建工具的环境依赖)

2、npm

1)node.js的包管理工具

2)nodejs一般会以包的形式来组织各个模块,所谓的包,就是一个或者多个实现某些功能的js代码文件,一个项目如果要依赖或者使用某个项目的js的包,首先就需要把这些包下载下来,npm就是用来下载各种包的

3)npm init 初始化项目,会在项目的根目录产生一个package.json的依赖包文件

4)npm install(uninstall) webapck --save-dev 安装webpack,只用于开发环境,

5)npm install jquery --save 安装jquery

3、webpack(模块化管理工具)

1)全局安装 (sudo)npm install webpack -g

2)在项目里安装一个 npm install [email protected] --save-dev 安装完之后,会有一个第三方的node_modules包产生

3)查看版本号 webpack -v

4)新建webpack配置文件webpack.config

5)在项目开发之前会先下载好各种loader,和插件

4、介绍webpack在项目中的处理方式

1)webapck对脚本和样式的处理

【】css-loader用于解析,而style-loader则将解析后的样式嵌入js代码。(这里把css做了一个模块化,但是要等到js加载完之后才能加载,这里就会有一个空白样式的时间,所以就用了extract-text-webpack-plugin插件,用来单独打包css)

【】把css单独打包,用<link>的形式来加载,这时就要用extract-text-webpack-plugin插件

2)webpack对Html模板的处理

【】html-loader

把html转换为字符串模板,以便模板引擎(hogan.js)使用

【】html-webpack-plugin

为html文件中引入的外部资源如script、link,单独打包html

3)webpack-dev-server

【】作用:是一种服务器,可以在文件改变时,自动刷新浏览器

【】安装:(sudo)npm install [email protected] --save-dev

【】打开使用:WEBPACK_ENV=dev webpack-dev-server --inline --port 8080 获取开发环境localhost地址

【】配置:webpack-dev-server/client?http://localhost:8080/

4)html模板渲染 hogan.js

5)icon引用了一套字体库,font-awesome(字体图形)

5、Git(代码版本控制系统)(记录了刚开始开发的过程)

1)git项目建立(在oschina里新建一个项目,在自己的文件夹里拉取git里的代码,删掉,然后在自己新建一个;2、git init初始化;3、it remote add origin [email protected]:funnymall/admin-management.git ,把当前的文件夹和远程的git.oschina地址对应起来;4、把远程分支的代码拉取下来;5、git status 查看状态;6、vim gitignore gitignore的配置(git的忽略规则);7、开发不在master分支开发,所以要新建一个分支,在把他切换到要开发的分支里git checkout -b babymmall_v1.0;

)

2)git权限配置

3)gitignore的配置(git的忽略规则)

4)配置ssk的认证

[1] ssh-keygen -t rsa -C “[email protected]”

5)常用命令

[1]

[2]ls 显示文件,ls -al显示所有文件

[3]rm -rf XXX 删除本地文件夹

[4]rm XXX 删除文件

[6]mkdir XXX 新建文件夹

[7]git remote add origin [email protected]:funnymall/babymmall.git (这句话的意思是把当前的文件夹和远程的git.oschina地址对应起来)

[8]git pull origin master(把远程分支的代码拉取下来)

[8]git checkout -b babymmall_v1.0(git checkout表示切换分支,-b参数表示还没有,然后这句话的意思是,新建一个分支,再把它切换过去)

[9]git branch 查看分支

时间: 2024-12-29 15:50:17

前端fayermall开发项目的相关文章

第一个Web前端开发项目:天气应用

By Long Luo 最近几天学习了下网页开发,通过学习,完成了第一个Web前端开发项目:天气应用 数据源是Yahoo! Weather 使用了jQuery库开发,虽然现在啥都不会,也就到处copy. Created by Long Luo at 2014-09-07 11:36:20 @Shenzhen, China.

多人博客开发项目-前端

一 开发环境设置 1 安装包环境 项目包如下链接:https://pan.baidu.com/s/1C-ZY9rWU-8ZugE4EwVveWw提取码:744p 相关react介绍链接如下 https://blog.51cto.com/11233559/2443713 解压并修改目录为blog 没有特殊说明,js 文件均放置在src目录中 2 修改相关信息 1 修改项目信息 2 修改反代和本地监听端口 本环境后端服务ip地址为192.168.1.200,后端python监听端口为80. 3 安装

[web建站] 极客WEB大前端专家级开发工程师培训视频教程

极客WEB大前端专家级开发工程师培训视频教程  教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5与HTML4的区别2.HTML5新增的主体结构元素3.HTML5新增的的非主体结构元素 4.HTML5表单新增元素与属性5.HTML5表单新增元素与属性(续)6.HTML5改良的input元素的种类 7.HTML5增强的页面元素8.HTML5编辑API之Range对象(一)9.HTML5编辑API之

前端模块化开发的价值

本文发表在<程序员>杂志 2013 年 3 月刊,推荐购买. 前端模块化开发的价值 随着互联网的飞速发展,前端开发越来越复杂.本文将从实际项目中遇到的问题出发,讲述模块化能解决哪些问题,以及如何使用 Sea.js 进行前端的模块化开发. 恼人的命名冲突 我们从一个简单的习惯出发.我做项目时,常常会将一些通用的.底层的功能抽象出来,独立成一个个函数,比如 function each(arr) { // 实现代码 } function log(str) { // 实现代码 } 并像模像样地把这些函

前端自动化开发工作流

1. 前端自动化工作流简介 每种项目都有自己特定的开发流程.工作流程.从需求分析.设计.编码.测试.发布,一个整个开发流程中,会根据不同的情况形成自己独特的步骤和流程.一个工作流的过程不是一开始就固定的,而是随着项目的深入而不断地改进,期间甚至会形成一些工具.例如当年大神们在Linux写C语言,觉得每次编译好多文件好麻烦,就发明了makefile.不同代码的管理好麻烦,然后就发明了git.SVN等等. 一个工作流程的好坏会影响你开发的效率.开发的流程程度,然后间接影响心情,打击编码积极性.所以我

ExtJs是当今最主流的前端界面开发工具之一

摘要:ExtJs是当今最主流的前端界面开发工具之一,功能强大,外观绚丽.虽然网上的开发文档很多,但是在实际应用中仍然会遇到很多问题,本文结合企业信息化.SAP ERP等实际项目开发经验,对使用ExtJs开发做了一个梳理和总结,特别对开发中遇到的重点问题进行了详细阐述,希望能够为大家提供一些帮助.    关键词:ExtJs  IMS  RIA 作用域 id冲突 风格统一1 引言    随着互联网技术的不断发展,网站的互动性越来越强,软件从C/S到B/S,又到了B/S结构的C/S界面体验,伴随着大量

搭建前端的开发环境和前端开发流程总结

一.搭建前端的开发环境 1.代码编辑工具:sublime/WebStorm/HBuilder. 2.断点调试工具:Firebug. 3.版本管理工具:Git(本人建议使用git,至于原因大家可以看看相关blog),安装完成后我们就可以从github上clone一些项目. 4.代码合并和混淆工具:webpack (Webpack具有Grunt.Gulp对于静态资源自动化构建的能力,同时兼容AMD与CMD的模块加载规范). 4.开发调试工具:NodeJs.很多非常有用的工具都是基于NodeJs的,我

前端网页开发经常用到的框架解析

前端网页开发经常用到的框架解析?个人感觉这分为两种情况,一种是能力超强,时间够用的情况,另外一种就是用前端网页框架,可以节约开发时间和减少工作量,这可以根据自身的情况作出正确的判断,并不是别人说什么就是什么. 小项目到底用不用前端网页框架? 小项目本身就是做的事情比较多,但是成本还小,如果让开发人员不停写代码可能会花很多的时间去做,这需要考虑到这个小项目开发时间和成本的.如果用前端网页框架相信大家都知道,可能会考虑到浏览器兼容性,还有功能不够自己用,我想这都不用担心,从QUICKUI开发以来,体

前端练手项目

前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程,希望可以帮助正在学习前端的小伙伴.为了方便阅读,大概把前端可以做的项目分为三类: 游戏类 实用类 好玩类 然后依次推荐一些项目教程,想要学习的小伙伴可以看看~ 游戏类 其实很多常见的小游戏都是纯前端开发出来的,比如曾经风靡的2048.别踩白块啊等等,简单有趣,对于初学者来说,这些小游戏是非常不错的练