https://github.com/okoala/vue-fis3

Vue & Fis3 & Use Vue Component
https://github.com/okoala/vue-fis3

Last synced: 2 days ago
JSON representation

Vue & Fis3 & Use Vue Component

• Host: GitHub
• URL: https://github.com/okoala/vue-fis3
• Owner: okoala
• License: mit
• Created: 2015-07-05T06:31:45.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-13T05:52:38.000Z (almost 9 years ago)
• Last Synced: 2025-01-02T11:07:42.126Z (9 days ago)
• Language: JavaScript
• Homepage:
• Size: 1000 KB
• Stars: 256
• Watchers: 30
• Forks: 81
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue - vue-fis3 - fis3?style=social) - 流行开源工具集成demo (Demo示例)
• awesome-github-vue - vue-fis3 - 流行开源工具集成demo (Demo示例)
• awesome - vue-fis3 - 流行开源工具集成demo (Demo示例)
• awesome-github-vue - vue-fis3 - 流行开源工具集成demo (Demo示例)

README

        
# fis3-vue

这个demo集成了目前前端开发比较流行的开源工具。

适用用于简单的前后端分离，移动端开发。

开发关键字：**MVVM**， **模块化**，**ES6**，**Combo**，**自动化部署**

**另一套vue的解决方案：vue + vuex + vue-loader + webpack 组合**

[点击跳转查看](https://github.com/okoala/vue-vuex.git)

------

包括：

  * Node.js

  * Express

  * Fis3

  * Vue

  * Sass

  * PM2

  * Gulp

  * Babel

  * Webpack

  * BrowserSync

界面和样式是直接copy腾讯CDC的idesign.qq.com

### 截图

![](http://i1.tietuku.com/8f4dd53803c48148.png)

![](http://i1.tietuku.com/50a4afbf50a549fc.png)

------

#### 快速开始

    // 安装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

      已经集成目前比较流行的插件~~项目解压覆盖到对应的文件, 然后重启编辑器即可.

------