[TOC]
nodejs构建前端界面
@(IT技术)[nodejs,前端]
项目名称: lastic
1. 创建并初始化项目
进入工作空间在shell下执行命令
mkdir elastic
cd elastic
npm init
命令运行完成之后,会在当前目录下生成package.json文件
2. 编辑并配置package.json
{
"name": "elastic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "杨松<syang@amarsoft.com>",
"license": "ISC"
}
3. 安装angular,bootstrap
npm i angular@1.2.28 --save
npm i bootstrap@3.3.6 --save
运行之后,package.json文件会被变成
{
"name": "elastic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "杨松<syang@amarsoft.com>",
"license": "ISC",
"dependencies": {
"angular": "^1.2.28",
"bootstrap": "^3.3.6"
}
}
同时,在当前目录下,生成了目录:node_modules/angular
,node_modules/bootstrap
,其中所包含的js以及css文件正是相应版本的css文件
4. 增加webpack,gulp支持
在package.json中增加以下设置
"scripts": {
"build": "webpack",
"dev": "gulp watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-watch": "^4.3.6",
"path": "^0.12.7",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1",
"webpack-stream": "^3.2.0"
}