前端fayermall开发项目

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端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 查看分支

 

以上是关于前端fayermall开发项目的主要内容,如果未能解决你的问题,请参考以下文章

前端项目的开发流程

前端项目开发<Vue>

ThingsBoard 前端项目内置部件开发

妙味WEB前端开发全套视频教程+项目实战+移动端开发(99G)

vue开发:前端项目模板

前端项目