| fish

fish学习

fish，前端框架。

安装命令
$ npm i -g @ngweb/fish-cli –registry http://registry.npm.ztesoft.com

fish new或n <project-name>

创建项目

fish config或c

在当前目录下，创建fish.config.js文件

fish serve或s [-p port/--port] [-w / --watch]

启动服务，-p/–port设置启动端口号，-w/–watch设置是否热部署(实时编译，自动刷新)，一般适用于fish-cli初始化的项目(标准目录)，同时生成sourcemaps。

fish generate module <module-name>

创建模块，支持缩写 fish g module <module-name>，这里的 module-name 可以是相对路径

fish generate view <file-name>

在当前目录下创建文件/文件夹，支持缩写 fish g view <file-name>，这里的 file-name 可以是相对路径

fish update [version]

更新目录fish-desktop版本。命令会自动找到目录下第一个fish-desktop所在目录，进行覆盖更新。可指定版本号，不指定则更新至最新版本

fish addon <addon-name>

添加 fish-desktop 提供的第三方组件

eslint检测

读取项目根目录下.eslintrc文件，运行eslint，检测js规范

fish build

编译、压缩、autoprefix样式文件，输出到styles文件夹里，并将fontAweSome字体拷贝至styles，可在fish.config.js里配置编译文件和编译方式

fish new myapp
新建一个fish项目

项目结构为
fish serve -w
编译运行，进入localhost:8088
即可见到fish项目原始页面

index.html为入口

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>myapp</title>
    <link href="image/favicon.ico" type="image/x-icon" rel="shortcut icon">
    <link rel="stylesheet" href="frm/fish-desktop/css/fish-desktop-default.css">
    <link rel="stylesheet" href="styles/css/myapp-proj-all.css">
    <!--[if lt IE 9]>
    <script type="text/javascript" src="frm/fish-desktop/libs/bootstrap/respond.js"></script>
    <![endif]-->
</head>

<body>
    <script type="text/javascript" src="frm/fish-desktop/js/fish-desktop-all.js"></script>
    <script type="text/javascript" src="frm/fish-desktop/js/fish-desktop-require.js" data-main="main"></script>
</body>
</html>

加载到data-main时会读取main.js文件，在main.js中

fish.View.configure({manage: true});

require(['modules/main/views/IndexView'], function(IndexView){

    new IndexView().render();
})

加载IndexView.js文件

在modules模块目录下
按照路径找到IndexView.js文件

define([
    'hbs!modules/main/templates/IndexView.html',
    'i18n!modules/main/i18n/IndexView.i18n'
],function(tpl, i18n) {
    var me = null;

    return fish.View.extend({
        el:'body',
        template: tpl,
        i18nData: fish.extend({}, i18n), // i18nData: fish.extend({}, i18n, commonI18n),
        //提供模板数据
        serialize: function () {
            return this.i18nData;
        },
        //视图事件定义
        events:{},
        //一些初始化设置 (不能进行dom操作)
        initialize: function() {
            me = this;
        },
        //视图渲染完毕处理函数
        afterRender: function() {
        },
        // 视图被删除时候做的事情
        cleanup: function () {
            me = null;
        }        
    });



});

指向templates/IndexView.html

找到IndexView.html

<p>Welcome to fish...</p>
ESC