一、开发环境的搭建

注释：（因为是自己的电脑开发的，所以所有的都要重新安装）

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 webpack@1.15.0 --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 webpack-dev-server@1.16.5 --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 git@git.oschina.net: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 “1821499781@qq.com”

5）常用命令

[1]

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

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

[4]rm XXX 删除文件

[6]mkdir XXX 新建文件夹

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

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

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

[9]git branch 查看分支

6、分层架构的设计

1）大体分为逻辑层（page+view+image）、数据层(service)、工具层(util)

page{

　　css+js+srting

}

service：ajax请求

util：封装一些工具类方法，比如调用接口的方法，验证方法，回到主页，获取url参数等公用方法。

7、webpack单独打包模块

最后当前页面只有引用公用类common.css和当前页的样式；以及公用类base.js和当前页脚本；

8、webpack用requrie来引入模块，module.exports输出模块

转载于:https://www.cnblogs.com/fayer/p/7295338.html

项目开发环境(h5+pc的开发思路是一样的)相关推荐

java开发环境安装原理,java开发环境搭建 java开发环境的完整搭建过程
想了解java开发环境的完整搭建过程的相关内容吗,Rosalh在本文为您仔细讲解java开发环境搭建的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:java开发环境搭建步骤,java开发环 ...
游戏程序设计 # ch13 开发工具 # 开发语言、开发环境、腾讯开发组件、网络通信和业务框架介绍
第十三章开发工具 1 开发语言 2 开发环境 3 腾讯开发组件介绍 4 网络通信+业务框架介绍第一节开发语言腾讯服务器主要使用的语言是C/C++ 第二节开发环境 (指:客户端) 第三节腾讯 ...
基于node.js开发环境下创建及开发vue.js项目的环境配置骤
基于node.js开发环境下创建开发vue.js项目的环境配置骤如下: 步骤一:安装node.js,安装完后运行node -v命令检安装node的查版本,判断是否安装成功.Npm是node.js包管理 ...
QA200RC 开发者套件配置虚拟机开发环境（PC端）
1.安装 sudo apt-get update wget https://www.python.org/ftp/python/3.7.5/Python-3.7.5.tgz tar -zxvf Pyt ...
python开发环境比较好_python开发环境比较好，python 集成开发环境哪个好
python 集成开发环境哪个好 PyCharm是一种Python IDE,带有一整套可以帮助用户在使用Python语言开发时提高其效率的工具,比如调试.语法高亮.Project管理.代码跳转.智能提 ...
JFinal开发环境搭建，JFinal开发案例
JFinal 是基于 Java 语言的极速 WEB + ORM 开发框架,其核心设计目标是开发迅速.代码量少.学习简单.功能强大.轻量级.易扩展.Restful.在拥有Java 语言所 ...
eclipse android开发环境搭建_聊聊Spring boot2.X开发环境搭建和基本开发
对Spring Boot的开发环境进行搭建,并对它的特点做进一步的了解,才能更好地对Spring Boot有更深入的介绍.但是无论如何都需要先来搭建Spring Boot的工程. 搭建Spring B ...
linux eclipse下qt开发环境搭建,Qt Eclipse开发环境的部署上篇
关于Qt Eclipse的开F发,将会从不同的环境中区安装部署,分为上.中.篇,三篇文章来讲.Windows,Linux平台下安装使用eclipse + QT4.4.3开发环境,Windows,Li ...
android开发环境教案,01. Android开发环境教案.pdf
Android 开发环境教案 1. 开启Android Device Monitor 运行%SDK_HOME%/tools/monitor (原来在monitor 中的功能--如发送短信,拨打电话,现 ...

项目开发环境(h5+pc的开发思路是一样的)