一、開(kāi)發(fā)環(huán)境的搭建

注釋：（因?yàn)槭亲约旱碾娔X開(kāi)發(fā)的，所以所有的都要重新安裝）

1、安裝nodejs（js服務(wù)端的運(yùn)行環(huán)境，構(gòu)建工具的環(huán)境依賴）

2、npm

1）node.js的包管理工具 2）nodejs一般會(huì)以包的形式來(lái)組織各個(gè)模塊，所謂的包，就是一個(gè)或者多個(gè)實(shí)現(xiàn)某些功能的js代碼文件，一個(gè)項(xiàng)目如果要依賴或者使用某個(gè)項(xiàng)目的js的包，首先就需要把這些包下載下來(lái)，npm就是用來(lái)下載各種包的 3）npm init 初始化項(xiàng)目，會(huì)在項(xiàng)目的根目錄產(chǎn)生一個(gè)package.json的依賴包文件 4）npm install(uninstall) webapck --save-dev 安裝webpack,只用于開(kāi)發(fā)環(huán)境, 5）npm install jquery --save 安裝jquery

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

1）全局安裝 (sudo)npm install webpack -g 2）在項(xiàng)目里安裝一個(gè) npm install webpack@1.15.0 --save-dev 安裝完之后，會(huì)有一個(gè)第三方的node_modules包產(chǎn)生 3）查看版本號(hào) webpack -v 4）新建webpack配置文件webpack.config 5）在項(xiàng)目開(kāi)發(fā)之前會(huì)先下載好各種loader,和插件

4、介紹webpack在項(xiàng)目中的處理方式

1）webapck對(duì)腳本和樣式的處理

【】css-loader用于解析，而style-loader則將解析后的樣式嵌入js代碼。（這里把css做了一個(gè)模塊化，但是要等到j(luò)s加載完之后才能加載，這里就會(huì)有一個(gè)空白樣式的時(shí)間，所以就用了extract-text-webpack-plugin插件，用來(lái)單獨(dú)打包c(diǎn)ss） 【】把css單獨(dú)打包，用<link>的形式來(lái)加載，這時(shí)就要用extract-text-webpack-plugin插件

2）webpack對(duì)Html模板的處理

【】html-loader 把html轉(zhuǎn)換為字符串模板，以便模板引擎（hogan.js）使用 【】html-webpack-plugin 為html文件中引入的外部資源如script、link，單獨(dú)打包html

3）webpack-dev-server

【】作用：是一種服務(wù)器，可以在文件改變時(shí)，自動(dòng)刷新瀏覽器

【】安裝：（sudo）npm install webpack-dev-server@1.16.5 --save-dev?

【】打開(kāi)使用：WEBPACK_ENV=dev webpack-dev-server --inline --port 8080 獲取開(kāi)發(fā)環(huán)境localhost地址

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

4）html模板用hogan.js渲染 5）icon引用了一套字體庫(kù)，font-awesome(字體圖形)

5、Git(代碼版本控制系統(tǒng))（記錄了剛開(kāi)始開(kāi)發(fā)的過(guò)程）

1）git項(xiàng)目建立(在oschina里新建一個(gè)項(xiàng)目，在自己的文件夾里拉取git里的代碼，刪掉，然后在自己新建一個(gè)；2、git init初始化；3、it remote add origin git@git.oschina.net:funnymall/admin-management.git ，把當(dāng)前的文件夾和遠(yuǎn)程的git.oschina地址對(duì)應(yīng)起來(lái)；4、把遠(yuǎn)程分支的代碼拉取下來(lái)；5、git status 查看狀態(tài)；6、vim gitignore gitignore的配置（git的忽略規(guī)則）;7、開(kāi)發(fā)不在master分支開(kāi)發(fā)，所以要新建一個(gè)分支，在把他切換到要開(kāi)發(fā)的分支里git checkout -b babymmall_v1.0； ) 2）git權(quán)限配置 3）gitignore的配置（git的忽略規(guī)則） 4）配置ssk的認(rèn)證 [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 (這句話的意思是把當(dāng)前的文件夾和遠(yuǎn)程的git.oschina地址對(duì)應(yīng)起來(lái)) [8]git pull origin master（把遠(yuǎn)程分支的代碼拉取下來(lái)） [8]git checkout -b babymmall_v1.0(git checkout表示切換分支，-b參數(shù)表示還沒(méi)有，然后這句話的意思是，新建一個(gè)分支，再把它切換過(guò)去) [9]git branch 查看分支

6、分層架構(gòu)的設(shè)計(jì)

?

1）大體分為邏輯層（page+view+image）、數(shù)據(jù)層(service)、工具層(util)

page{

　　css+js+srting

}

service：ajax請(qǐng)求

util：封裝一些工具類(lèi)方法，比如調(diào)用接口的方法，驗(yàn)證方法，回到主頁(yè)，獲取url參數(shù)等公用方法。

7、webpack單獨(dú)打包模塊

最后當(dāng)前頁(yè)面只有引用公用類(lèi)common.css和當(dāng)前頁(yè)的樣式；以及公用類(lèi)base.js和當(dāng)前頁(yè)腳本；

8、webpack用requrie來(lái)引入模塊，module.exports輸出模塊?

轉(zhuǎn)載于:https://www.cnblogs.com/fayer/p/7295338.html

總結(jié)

以上是生活随笔為你收集整理的项目开发环境(h5+pc的开发思路是一样的)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。