安裝Yeoman + Bower + Grunt 創建angularjs 項目結構(新手筆記一)

Yeoman

項目初始化工具,快速生成一套項目文件,代碼結構和需要的工具。
在官網上有生成器可以選擇 ,http://yeoman.io/generators/

bower

一個包管理器,用以搜索安裝前端項目資源

grunt

需要反覆重複的任務,例如壓縮、編譯、單元測試、linting等,自動化工具可以減輕你的勞動,簡化你的工作。

安裝nodejs

在win7下傻瓜式安裝nodejs,next到底就行,建議使用默認路徑。
安裝完成路徑在 C:\Program Files\nodejs

測試nodejs是否安裝成功,ctrl+r打開命令提示符工具,輸入cmd,打開 cmd.exe.
這裏寫圖片描述
顯示node的版本號,表示安裝成功。

npm(nodejs的包管理工具)默認已經安裝,查看版本號:
這裏寫圖片描述

安裝Yeoman + Bower + Grunt

輸入npm install -g yo grunt-cli bower ,安裝Yeoman + Bower + Grunt。
這裏寫圖片描述

等待安裝完成後,輸入 yo –version && bower –version && grunt –version 彈出相應的版本號表示安裝成功。
這裏寫圖片描述

使用Yeoman搭建angularjs項目結構

輸入yo 安裝項目生成器
這裏寫圖片描述
在出現的選項中上下移動鼠標選擇 Install a generators,敲回車安裝項目生成器.
這裏寫圖片描述

輸入需要的生成器,回車,等待下載安裝。
這裏寫圖片描述

安裝成功後,出現這樣的界面,先選擇 get me out of here!,退出。
這裏寫圖片描述

接着創建一個名字叫做 myangular的文件夾,並進入到文件夾中

mkdir myangular
cd myangular

這裏寫圖片描述

輸入 yo ,並選中 angular 生成器 ,回車。

這裏寫圖片描述

選擇項目需要的組件,按回車繼續。
這裏寫圖片描述

查看項目目錄,看看是否創建成功。cmd下輸入以下命令行,查看目錄結構,到這一步就算把項目的結構搭起來了。

tree /f

這裏寫圖片描述

最後發現好像有點亂這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章