安装相关步骤
- 下载nodejs
- 淘宝镜像设置(cmd):npm config set registry https://registry.npm.taobao.org
- 下载本DEMO
- 安装该DEMO的包依赖
-
全局安装(仅第一次安装时)
- 安装包:npm install -g node-dev koa koa-router koa-static colors koa-webpack-dev-middleware koa-proxy gulp gulp-ejs gulp-csslint gulp-csso gulp-jshint gulp-uglify gulp-rename gulp-notify gulp-replace vinyl-buffer gulp-imagemin imagemin-pngquant merge-stream gulp.spritesmith del gulp-cssnano mockjs webpack extract-text-webpack-plugin text-loader url-loader style-loader css-loader less-loader sass-loader require-css-preloader autoprefixer-loader
- 注意:因为网络原因node-sass可能会安装失败,失败后请修改node_modules/node-sass/lib/extensions.js里getBinaryUrl函数的返回值为 "return ['https://github.com/sass/node-sass/releases/download', sass.binaryName].join('/');"
-
切换到项目(cmd):npm link xxx(上面安装的除node-dev外的所有包)
-
如果出现xxx不是可执行命令
- 安装该插件到全局:npm install -g xxx
- 设置环境变量:
- 将"C:\Users\i\AppData\Roaming\npm"添加到你的环境变量PATH下
- 注意:其中i表示你电脑用户名,需要根据你自己的名字变更
-
文件目录结构约定
- src/views:存放页面模块,并且每个模块必须有一个和模块同名的.html以及一个入口app.js
- src/components:存放通用模块(例如header/footer/common)
- src/vendor:存放第三方文件
- 为避免图片命名冲突,每个模块下的图片请使用模块名前缀,例如:index-img
名词解释
- 模块:每个模块下可包含自己的css/js/tpl/img等资源文件
- 模拟请求:需要在mock/定义数据,routes.js定义路由
- 别名配置:config.js下的alias
- 请求地址切换:config.js下curl
常用命令
- npm start:开启本地服务
- npm run watch:监控本地html和sprite图片合并
- npm run build:生成build文件
- npm run replace:build后压缩(生成.min文件和替换html的引用地址)
- npm run sprite:图片合并
使用说明
-
当开始一个项目时,首先在src/views下新建好模块
- 例如:你有一个三个页面的项目,你需要建立(为避免重复,xxx.html必须和模块名一致)
- src/views/page1/
- page1.html # 需要引入common.js + page1.js + common.css + page1.css
- app.js # require你本页的js和css
- css/xx.css
- js/xx.js
- 详情参考示例里的mod模板页
- page2 ...
- page3 ...
-
如果你需要使用图片合并,请将需要合并的文件放在"img/sprite/"下
-
如果你需要使用ejs复用通用页面模板:<%- include mod.html %>
-
然后在命令行分别启动npm start和npm run watch,成功后可以开始开发了(注意需要先建好模块页面)
-
你可以直接在项目里使用,less或sass
-
建议使用chrome浏览器进行开发,并且安装livereload插件,你将不再需要F5