fis3-vue
这个demo集成了目前前端开发比较流行的开源工具。 适用用于简单的前后端分离,移动端开发。
开发关键字:MVVM, 模块化,ES6,Combo,自动化部署
另一套vue的解决方案:vue + vuex + vue-loader + webpack 组合 点击跳转查看
包括:
- Node.js
- Express
- Fis3
- Vue
- Sass
- PM2
- Gulp
- Babel
- Webpack
- BrowserSync
界面和样式是直接copy腾讯CDC的idesign.qq.com
截图
快速开始
// 安装fis及相关插件
npm i -g fis3 (需要3.0.7以上)
// 其他构建工具
npm i -g gulp
npm i -g webpack
// node调试工具
npm i -g node-dev
npm i -g node-inspector (如果在iojs环境安装失败,可以安装版本@0.9.2)
// 性能调优工具, 下载安装。
Mac: http://profiler.oss-cn-hangzhou.aliyuncs.com/node-profiler-v0.12.6.pkg
Win: http://profiler.oss-cn-hangzhou.aliyuncs.com/node-profiler-v0.12.6-x64.msi
npm run profiler
// 类似livereload的工具
npm i -g browser-sync
// 发布工具
npm i -g pm2
// 下载项目
git clone https://github.com/okoala/fis3-vue.git
// 运行项目
cd fis3-vue
npm install
npm run dev
// 需要预先配置好发布信息
// 初始化服务器环境
npm run setup
// 发布项目
npm run deploy
// 回滚操作
npm run revert
// 服务器启动/重启服务
npm run start
项目说明
1. 无分号,2Tab缩进.
2. 通过package.json的components字段,可以添加指定的库。例如:
"components": [
"vue",
"vue-resource",
"vue-router"
]
说明指定vue,vue-resource,vue-router,这三个为前端库。
使用的时候可以直接require('vue'),require('vue-resource')。
当然你需要确认库是否已经在node_modules里了。
3. 通过配置config/config.json可以配置pm2相关设置,发布相关也在这个配置文件中.
4. 可以把图片命名为xxx.webp.jpg或xxx.webp.png
这样可以同时生成webp和(png, jpg)两个版本的图片, 然后通过filter webp进行自动切换.
5. 新手可以使用我的编辑器配置:
Sublime Text 3 for Mac: https://github.com/okoala/sublime-mac-bak.git
Sublime Text 3 for Win: https://github.com/okoala/sublime-win-bak.git
Atom for Mac: https://github.com/okoala/atom-mac-bak.git
Atom for Win: https://github.com/okoala/atom-win-bak.git
已经集成目前比较流行的插件~~项目解压覆盖到对应的文件, 然后重启编辑器即可.