okoala / vue-fis3

Vue & Fis3 & Use Vue Component

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

---

vue-fis3's Issues

roadmap

近期的roadmap:

• Docker
• iojs/koa
• GraphQL
• MongoDB (ORM)
• CMS (建立一个能用的内容管理系统，以取代现在简单的demo)
• Admin管理后台
• 性能检测报告
• 集成七牛等服务商
• UI Component (整合~~Material Design~~ Ant Design和Frozen UI)
• 代码覆盖率
• Travis 集成测试
• 单元测试
• 性能测试
• UI测试
• Server Render (isomorphic javascript)

考虑是否添加flow

不定时会进行任务的更新~

期待更新fis3-hook-commonjs规范。

fis3-hook-module 已经声明废弃。

为啥不用yog2

rt，还要自己搭express+gulp什么的

希望作者看到能回复一下，。

作者你好：
我按你的说明操作了一遍，走到npm run dev .就报错了，要么是缺少这个或那个包，要么是webpack配置错误。能提供一份详细流程文档吗，新人，请求帮助。

expecting another url or quoted path in @import list

Hi, @okoala

我在用 [email protected] 转换 .scss 文件时，命令行报错如下：

 expecting another url or quoted path in @import list

开发环境：

1. Node: v8.9.4
2. Npm: v5.6.0
3. Fis3: v3.4.39

目录结构：

src/scss
  | - _variables.scss
  | - _reset.scss
  | - style.scss

style.scss

@charset "UTF-8";

@import

	'variables',
	'reset';

奇怪的是，如果 @import 'reset'; 写成一行就可以。

fis-conf.js

'use strict'

var path = require('path')

/**
 * 排除指定目录
 * -------------------------------------
 */

 fis
 	.set('project.files', ['**', '.**', '.**/**'])
 	.set('project.ignore', [
 		'node_modules/**',
 		'output/**',
 		'.gitignore',
 		'**/_*.scss',
 		'*.log',
 		'docs/**',
 		'dist/**',
 		'.git/**',
 		'.svn/**',
 		'.idea/**',
 		'package-lock.json',
 		'fis-conf.js'
 	])
 	.set('project.ext', {
 		scss: 'css'
 	})

/**
 * 语言编译
 * -------------------------------------
 */

fis.match('src/scss/*.scss', {
	parser: fis.plugin('sass3', {
		sourceMap: false
	}),
	rExt: '.css'
})

/**
 * 目录规范
 * -------------------------------------
 */

fis
	// 默认情况下不添加 Hash
	.match('**', {
		useHash: false,
		release: false
	})

	.match('src/scss/*.scss', {
		release: 'style/$0'
	})

为什么用fis3还需要安装webpack

npm install 安装依赖包报错，如下

tangjuandeMacBook-Pro:fis3-vue tangjuan$ npm install
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please use fis3-hook-commonjs or fis3-hook-amd or fis3-hook-system instead
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Renamed to supports-color. If you're using chalk, upgrade to the latest version. https://github.com/chalk/supports-color
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0.
npm WARN deprecated [email protected]: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree.
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN prefer global [email protected] should be installed with -g

[email protected] install /Users/tangjuan/fis3-vue/node_modules/fsevents
node-pre-gyp install --fallback-to-build

[fsevents] Success: "/Users/tangjuan/fis3-vue/node_modules/fsevents/lib/binding/Release/node-v48-darwin-x64/fse.node" is installed via remote

[email protected] install /Users/tangjuan/fis3-vue/node_modules/node-sass
node scripts/install.js

npm install "package.json"

你的依赖包不能用
'fis-parser-vue' is not in the npm registry.

npm run dev occur error

请问。自己怎么搭建一个vue-fis3？

不想使用你的dome，自己使用 fis3，搭建一个vue项目。

gulp在里面的定位是什么

为什么不直接就只用fis了？还需要在外面包一层gulp然后在启动fis命令呢？

建议替换 fis3-hook-module 到 fis3-hook-commonjs

fis3-hook-module 已经声明废弃。
Common Js 方案使用fi3-hook-commonjs替代。

webpack 的依赖是用来干什么的？

如题

__FRAMEWORK_NAME__请教

Hi， @okoala 我看到你在 src/index.html 的 title 中增加了 __FRAMEWORK_NAME__。代码如下：

<title>__FRAMEWORK_NAME__</title>

不明白的是， 这个 __FRAMEWORK_NAME__ 在哪定义的？ 能否说一下？

'fis-parser-vue' is not in the npm registry.

npm install
提示错误 应该是你的依赖包不能用 是你自己写的插件没到npm注册

there is a error

Cannot find module 'vue-resource/package.json'

vue文件中css引用的文件路径未能被定位

template中的文件路径你用 变量 + __uri() 的方式解决了
css中的路径有什么解决方法么？