精华内容
下载资源
问答
  • 在本系列文第一篇中,我们知道可以通过H5参数的形式,对AutoVue控件进行设置,其具体的形式如下:<PARAM NAME=<name> VALUE=<type>>参数列表及其详解 参数名 参数类型及可选值 注释 CACHEUI 布尔型 true/false ...

    Applet参数形式

    第一篇

    在本系列文第一篇中,我们知道可以通过H5参数的形式,对AutoVue控件进行设置,其具体的形式如下:
    <PARAM NAME=<name> VALUE=<type>>

    参数列表及其详解

    参数名 参数类型及可选值 注释
    CACHEUI 布尔型  true/false 设为true的时候,缓存UI组件供后续使用。默认false
    COLLABORATION INIT:CSI_ClbSessionID=987654321;
    CSI_ClbDMS=dmsIndex;
    CSI_ClbSessionData=123456789;
    CSI_ClbSessionSubject=Subject;
    CSI_ClbSessionType=public&private;
    CSI_ClbUsers=user1,user2…

    CSI_ClbSessionID=987654321

    CSI_ClbDMS=dmsIndex

    CSI_ClbSessionData=123456789

    CSI_ClbSessionSubject=Subject

    CSI_ClbSessionType=public&private

    CSI_ClbUsers=user1,user2…
    Init参数组






    DMS collaboration session ID

    DMS index

    DMS collaboraion session data

    Collaboration session type

    Invited users
    COLLABORATION JOIN:CSI_ClbSessionID=987654321;
    CSI_ClbDMS=dmsIndex;
    CSI_ClbSessionData=123456789;

    CSI_ClbSessionID=987654321

    CSI_ClbDMS=dmsIndex

    CSI_ClbSessionData=123456789
    Join参数组



    DMS http://name:port/dmsServlet 声明与AutoVue交互的DMS服务。此处的声明比在VueServer.ini文件中声明的DMS入口都拥有更高的优先级。
    DMSARGS String Applet参数中传递的DMS参数列表,用分号分隔。每一次的请求,这些参数会随着发送至DMS。
    举例:
    <PARAM NAME=”DMSARGS” VALUE=”ARG1;ARG2”>
    <PARAM NAME=”ARG1” VALUE=”value1”>
    <PARAM NAME=”ARG2” VALUE=”value2”>
    EMBEDDED 布尔型  true/false 是否将Applet嵌入到网页中。
    默认true
    ENABLEEMF 布尔型  true/false 当设置为true的时候,会将文件转成EMF流发送至客户端
    FILENAME URL

    upload://dir/…/file

    http://host/file

    ftp://host/file

    or…
    ftp://<user>:<password>@<ftpserver>/file

    server://dir/../file
    设置在Applet加载的时候打开的文件

    将指定的本地文件上传到服务器然后打开浏览

    设置打开文件的HTTP URL地址

    设置打开文件的FTP URL地址

    打开指定位置的服务器文件。文件必须放在VueServer.ini文件中指定的服务器根目录的子文件下,该定义在[Server]/[Directory]键值对中。如果没有这个键值对,那么服务器上没有文件可以被打开。
    FORMAT AUTO|TILED 展现方式
    TILED 使用平铺的方式展现文件
    AUTO 使用自适应的方式展现文件
    GUIFILE String 定义使用的GUI文件,通过此参数,服务器可以根据客户端需求定义GUI。GUI文件放置在根目录下的子文件中,具体的路径定义在VueServer.ini文件中的[Users]\Directory键值对中。这个声明也可以按照”file://”这样的约定来声明本地文件。[Users]\Directory默认值是<bin dir>\Profiles
    HEAVYWEIGHT TRUE|FALSE|AUTO 设置是通过重量级还是轻量级的组件来加载3D模型,使用重量级的时候,AutoVue会启用硬件加速。默认值为AUTO,AutoVue会在除了MAC的所有客户端上使用重量级组件。
    JVUESERVER 用分号分隔的列表 AutoVue的服务器,包含端口声明。”name”必须和JvueServer的机器上的”jvueserver.hostname”一致。如果没设置,默认使用”socket://localhost:5099”
    LISTUSERS TRUE|FALSE 当邀请用户协作的时候,是否显示连接到AutoVue服务器的用户。默认TRUE
    LOCALE DE|ED|FR|JA|KO|TW|ZH 设置用户界面的语言,参数形式根据ISO639双字母编码得来。
    LOGFILE String 设置logo文件或者信息,默认null
    NOCOOKIES TRUE|FALSE 设为TRUE的时候来禁用对浏览器cookies的操作
    ONINIT “myFunction();” 如果设置了该参数,Applet加载完毕之后立即执行该JavaScript函数。可以通过HTML对Applet之间达到一个高度的掌控和集成。
    SWINGLAF String 设置对Swing的查找,例如com.java.swing.plaf.motif.MotifLookAndFeel.如果没有设置,默认使用UIManager.getSystemLookAndFeelClassName().
    USERNAME String 设置用来打开AutoVue服务求上面Session的用户名,如果没有设置,Applet将会尝试根据系统参数中猜测用户名
    VERBOSE OFF|ERROR|INFO|DEBUG|ALL ERROR 输出所有错误信息
    INFO 展示有用的信息
    DEBUG 展示debug信息
    ALL 展示所有信息
    OFF或者FALSE 关闭
    默认FALSE
    展开全文
  • \mit\color{green}{想要了解其余的公共方法的详细信息,可以访问AutoVue安装路径下的"JavaDocs"文件夹,里面的文件有详细资料。} JS脚本Demo Demo1 利用ONINIT参数,来自动加载文件,同时加载所有...

    什么是 Applet?

    Applet是采用Java编程语言编写的小应用程序,该程序可以包含在 HTML页中,与在页中包含图像的方式大致相同。

    含有Applet的网页的HTML文件代码中部带有<applet></applet>这样一对标记,当支持Java的网络浏览器遇到这对标记时,就将下载相应的小应用程序代码并在本地计算机上执行该Applet。

    引入 AutoVue Web Version

    AutoVue Web Version(详情)在页面的引用也是通过<applet></applet>标签来完成,具体代码如下(AutoVue的安装和服务器搭建过程省略):

    <!--AutoVue引入开始-->
    <Applet
      <!--NAME不是必须的,但是最好给上-->
      NAME="JVue"
      <!--后台JAVA代码中,Applet类名,不需要更改-->
      CODE="com.cimmetry.jvue.JVue"
      <!--这个属性定义了服务器中jvue.jar、jlogl.jar以及gluegen-rt.jar文件的位置,浏览器将会在这个位置下载这些文件。一般服务器搭建好了之后,这个属性会自动生成,不需要我们手动更改-->
      CODEBASE="http://www.webserver.com/jVue"
      <!--需要的jar包的名称,不需要更改-->
      ARCHIVE="jvue.jar,jogl.jar,gluegen-rt.jar"
      <!--可选的定义大小的参数-->
      HSPACE="0" VSPACE="0"  
      WIDTH="100%" HEIGHT="100%"
      <!--MAYSCRIPT参数是必须的,它允许Applet对浏览器的session进行读写-->
      MAYSCRIPT>
    
      <!--EMBEDDED参数,设置是否将Applet嵌入到网页中,true代表嵌入,false代表不嵌入,将会在独立的窗口中显示-->
      <PARAM NAME="EMBEDDED" VALUE="false">
    
      <!--VERBOSE参数是可选的,当设为true的时候,Applet的运行时诊断结果将会输出在浏览器的Java控制台中-->
      <PARAM NAME="EMBEDDED" VALUE="false">
    
       <!--FILENAME参数,设置Applet打开的时候默认打开的文件,如果为空,则不打开任何文件-->
      <PARAM NAME="EMBEDDED" VALUE="http://www.webserver.com/jVue/samples/acad12.dwg">
    
      <!--JVUESERVER参数,AutoVue服务器地址列表,用分号分隔-->
      <PARAM NAME="JVUESERVER" VALUE="socket://www.jvuesever.com:5099;http://www.webserver.com/
    servlet/VueServlet">
    
      <!--浏览器不支持Java时的报错信息-->
      <p><b>Requires a browser that supports Java.</b></p>
      <PARAM NAME="COLLABORATION" VALUE="INIT:CSI_ClbSessionID=987654321;CSI_ClbDMS=dmsIndex;CSI_ClbSessionData=123456789;CSI_ClbSessionSubject=Subject;CSI_ClbSessionType=public|private;CSI_ClbUsers=user1,user2,...">
    </Applet>
    <!--AutoVue引入结束-->

    基于AutoVue编写JS脚本

    当我们将AutoVue插件集成在网页中的时候,我们可以通过JavaScript来访问JVue类中的所有公共API。


    常用的函数方法

    方法 注释
    createMobilePack (MobilrPackOptions opts) 根据特定的参数,生成移动包
    setFile (String url) 设置将要在AutoVue中浏览的文件
    setCompareFile (String url) 切换到对比模式,并且将当前文件和指定文件进行对比
    setDMSArg (String name,String value) 对DMSARGS列表中的参数进行增删改操作
    addOverlay (String url) 将指定的文件添加为当前文件的覆盖层
    printFile (PrintProperties pProps) 用指定的options来打印当前文件
    printFile (PrintProperties pProps, boolean UseDefaultPrinter) 用指定的options来打印当前文件,根据UseDefaultPrinter参数来决定是否提示选择打印机
    setMarkupMode (boolean enterMarkupMode) 进入或者退出Markup模式
    openMarkup (String markupID) 打开指定的Markup,如果markupID==”*”,那么所有与当前文档相关的Markup都会被加载。如果打开本地的Markup,将markupID设为”CSI_DocName=markupName“。如果要打开与DMAPI集成的Markup,将markupID设为”CSI_DocID=markupID“.
    collaborationInit (String sessionProperties) 初始化协作模式的session。sessionProperties-描述协作模式session的字符串,格式同上面的COLLABORATION参数.
    collaborationJoin (String sessionProperties) 在中途加入协作session。sessionProperties-描述协作模式session的字符串,格式同上面的COLLABORATION参数.
    collaborationEnd (String sessionProperties) 结束当前的协作session。
    corssProbe (String fileName) 将指定文件加入到cross-probed文件列表中
    closeDocument () 关闭当前文件
    import3DFile (String fileName, HMatrix transform) 根据指定的文件名和transformation引入3D文件
    setGUI (String guiFile) 根据指定的GUI文件名,设置GUI.
    setPage (int page) 根据指定的GUI文件名,设置GUI.
    waitForlastMethod () 暂停当前线程,知道最后调用的函数执行完毕
    syncMobilePack (MobilePackOptions opts) 同步Mobile包

    访AutoVue"JavaDocs"


    JS脚本Demo

    Demo1

    利用ONINIT参数,来自动加载文件,同时加载所有相关的Markups,然后打印结果。

    <!--这是自定义的JavaScript函数,用来调用AutoVue的API的-->
    <script>
    <!--Hide script from old browsers
        function myFunction(){
        //Applet对象
        var myApp=window.document.applets["JVue"];
        //打开指定的文件
        myApp.setFile('http://www.machine.com/jVue/sample/acad12.dwg');
        //加载所有Markups
        myApp.openMarkup('*');
        //创建一个PrintProperties类
        var pPropsClass=myApp.getClass("com.cimmerty.common.PrintProperties");
        //实例化PrintProperties类
        var pProps=pPropsClass.newInstance();
        //为用户加载个人设置
        pProps.setProfile(myApp.getActiveVueBean().getProfile());
        //设置Header文本
        pProps.getHeaders().setTopCenterText("My Header");
        //设置 适应页面 参数(PrintOptions.SCALING_FIT==0)
        pProps.getOptions().setScaling(0);
        //打印文本周边区域
        pProps.getOptions().setArea(0);
        //用默认打印机打印文档
        myApp.printFile(pProps,true);
        //更多...
        }
    -->
    </script>
    
    <!--这是Html部分-->
    <!--引入AutoVue开始-->
    <APPLET
        NAME="JVue"
        CODE="com.cimmetry.jvue.JVue.class"
        CODEBASE="http://www.webserver.com/JVue.class"
        ARCHIVE="jvue.jar;jogl.jar;gluegen-rt.jar"
        HSPACE="0" VSPACE="0" WIDTH="100%" HEIGHT="100%"
        MYSCRIPT>
        <PARAM NAME="EMBEDDED" VALUE="true">
        <PARAM NAME="VERBOSE"  VALUE="false">
        <PARAM NAME="ONINT"  VALUE="myFunction();">
        <PARAM NAME="JVUESERVER"   VALUE="__SERVLETHOST__">
        <p><b>Requires a browser that supports Java.</b></p>
    </APPLET>
    <!--引入AutoVue结束-->

    Demo2
    还没做好

    展开全文
  • Vue前端开发手册

    2019-03-14 10:59:00
    为了统一前端的技术栈问题,技术开发二部规定开发技术必须以Vue为主。 为了更好的规范公司的前端框架,现以我前端架构师为主,编写以下开发规范,如有不当的地方,欢迎批评教育并慢慢改善该开发文档,谢谢合作。 ...

    序言

    为了统一前端的技术栈问题,技术开发二部规定开发技术必须以Vue为主。

    为了更好的规范公司的前端框架,现以我前端架构师为主,编写以下开发规范,如有不当的地方,欢迎批评教育并慢慢改善该开发文档,谢谢合作。

    我们在做产品不只是实现功能,还要考虑到以后的优化升级,那么就需要一套标准的代码规范,使得代码易懂,养成代码规范的习惯,有助于程序员自身的成长。那么我们现在就来谈谈,前端代码的规范。

     

    一、编码规范

    1、样式文件命名说明

    注:css处理程序统一使用stylus,并放在“src/common/stylus”目录下

    1重置样式:reset.stylus

    2基础布局样式:base.stylus

    3公共样式:public.stylus

    4变量样式:variable.stylus

    5icon样式:icon.stylus

    6混合类型(函数样式)mixin.stylus

     

    2样式规范化

    1)连字符CSS选择器命名规范

    长名称或词组可以使用中横线来为选择器命名。 不建议使用“_”下划线来命名CSS选择器,例:class=”page page-index”

    (2)使用16进制表示颜色值,除非表示的是透明度例:#F62AB5

    3)以下常用的css命名规则

     

    page-hd、page-bd、page-ft、tit、cnt、desc、info、left-bar、search-bar

     

    3文件目录

    1)存放其它图片文件夹命名规范:imgaes

    2)存放广告图的文件夹banner

    3)文件名应该全部小写,多个单词以下划线“_”分开

    4JS文件:驼峰命名方式,首字母小写,例:getUserInfo.js

    5)确保文档或模板中只包含html,把用到的样式都写到样式表文件中,把脚本都写到js文件中采用外链引入形式,使页面的结构与行为分离

     

    4、 Javascript

    1)因vue脚手架有自动编译的功能,为了代码的整洁,每行js代码不必“;”作为结束,但需遵循一个语句一行的编码方式;

    5命名规范

    1件命名:以英文命名,后缀为.js(共用)common.js,其他命名可根据模块需求命名

    2变量命名:驼峰式命名,原生JavaScript变量要求是纯英文字母, 首字母须小写,变量集中声明, 避免全局变量
    3类命名:首字母大写, 驼峰式命名egStudentInfoUserInfoProductInfo

    4函数命名首字母小写驼峰式命名eggetUserInfo

    5命名语义化,尽可能利用英文单词或其缩写

    6常量:必须采用全大写的命名,且单词以_分割,常量通常用于ajax请求url,和一些不会改变的数据

    命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词。

    例:const MAX_LENGTH = 20;const URL = 'http://www.star.com'

    7变量:必须采用小驼峰式命名法例:let maxCount = 10;

    6项目命名

    全部采用小写方式, 以下划线分隔。例:my_project_name

     

    7、函数

    命名方法:小驼峰式命名法

    命名规范:前缀应当为动词

    命名建议:可使用常见动词约定

    动词

    含义

    返回值

    can

    判断是否可执行某个动作(权限)

    函数返回一个布尔值。true:可执行;false:不可执行

    has

    判断是否含有某个值

    函数返回一个布尔值。true:含有此值;false:不含有此值

    is

    判断是否为某个值

    函数返回一个布尔值。true:为某个值;false:不为某个值

    get

    获取某个值

    函数返回一个非布尔值

    set

    设置某个值

    无返回值、返回是否设置成功或者返回链式对象

    load

    加载某些数据

    无返回值或者返回是否加载完成的结果

     

    8、类 & 构造函数

    命名方法:大驼峰式命名法,首字母大写例:Person

    命名规范:前缀为名称。

    示例:

    class Person {

      public name: string;

      constructor(name) {

        this.name = name;

      }

    }

    const person = new Person('mevyn');

    9、类的成员

    类的成员包含:

    公共属性和方法:跟变量和函数的命名一样。

    私有属性和方法:前缀为_(下划线),后面跟公共属性和方法一样的命名方式。

    示例:

    class Person {

      private _name: string;

      constructor() { }

      // 公共方法

      getName() {

        return this._name;

      }

      // 公共方法

      setName(name) {

        this._name = name;

      }

    }

    const person = new Person();

    person.setName('star');

    person.getName(); // ->'star'

    10注释规范

    js 支持三种不同类型的注释:行内注释、单行注释和多行注释:

    1. 行内注释
    • 说明:行内注释以两个斜线开始,以行尾结束。
    • 语法:code // 这是行内注释
    • 使用方式://(双斜线)与代码之间保留一个空格,并且//(双斜线)与注释文字之间保留一个空格。

    命名建议:

    // 用来显示一个解释的评论
    // -> 用来显示表达式的结果,
    // >用来显示 console 的输出结果,

    示例:

    function test() { // 测试函数

      console.log('Hello World!'); // >Hello World!

      return 3 + 2; // ->5

    }

    1. 单行注释
    • 说明:单行注释以两个斜线开始,以行尾结束。
    • 语法:// 这是单行注释
    • 使用方式:单独一行://(双斜线)与注释文字之间保留一个空格。

    示例:

    // 调用了一个函数;1)单独在一行setTitle();

    1. 多行注释
    • 说明:以 /* 开头, */ 结尾
    • 语法:/* 注释说明 */
    • 使用方法:若开始/和结束/都在一行,推荐采用单行注释。若至少三行注释时,第一行为/,最后行为/,其他行以开始,并且注释文字与保留一个空格。

    示例:

    /** 代码执行到这里后会调用setTitle()函数* setTitle():设置title的值

    */

    setTitle();

    1. 函数(方法)注释

    说明:函数(方法)注释也是多行注释的一种,但是包含了特殊的注释要求,参照JSDoc

    语法:

    /** * 函数说明 * @关键字

    */

    常用注释关键字:(只列出一部分,并不是全部)

    注释名

    语法

    含义

    示例

    @param

    @param 参数名 {参数类型} 描述信息

    描述参数的信息

    @param name {String} 传入名称

    @return

    @return {返回类型} 描述信息

    描述返回值的信息

    @return {Boolean} true:可执行;false:不可执行

    @author

    @author 作者信息 [附属信息:如邮箱、日期]

    描述此函数作者的信息

    @author 张三 2015/07/21

    @version

    @version XX.XX.XX

    描述此函数的版本号

    @version 1.0.3

    @example

    @example 示例代码

    演示函数的使用

    @example setTitle(‘测试’)

    /*** 合并Grid的行

    * @param grid {Ext.Grid.Panel} 需要合并的Grid

    * @param cols {Array} 需要合并列的Index(序号)数组;从0开始计数,序号也包含。

    * @param isAllSome {Boolean} :是否2trcols必须完成一样才能进行合并。true:完成一样;false(默认):不完全一样

    * @return void

    * @author polk6 2015/07/21

    * @example

    * _________________                             _________________

    * |  年龄 |  姓名 |                             |  年龄 |  姓名 |

    * -----------------      mergeCells(grid,[0])   -----------------

    * |  18   |  张三 |              =>             |       |  张三 |

    * -----------------                             -  18   ---------

    * |  18   |  王五 |                             |       |  王五 |

    * -----------------                             -----------------

    */

    function mergeCells(grid: Ext.Grid.Panel, cols: Number[], isAllSome: boolean = false) {

      // Do Something

    }

    11、手机设计稿规范

    设计稿的宽度一般情况下为宽度750px,在手机端页面编写的过程,将页面的最大宽度设置为750px,最小宽度为375xp,宽度为100%;即min-width:375pxmax-width:750pxwidth100%;这样一来的话宽度在375750之间是自适应的,当页面小于375时出现水平滚动条,当页面大于750时页面居中布局

     

     

    二、vue框架推荐

    小程序:mpvue框架

    H5游戏:vue

    H5UI框架:vux

    推广类seo优化,如新闻,博客:nuxt.js

    UIelement

    APPweexFlutter

     

    开发环境版本建议

    技术

    版本

    查看命令

    node

    8.12.0

    node-v

    vue  

    2.5.17

    vue -V(大写)

    npm

    6.4.1

    npm -v

    webpack

    4.19.1

    webpack -v

    nuxt

    2.00

    /

    Element-ui

    2.47

    /

     

       

     

    转载于:https://www.cnblogs.com/zhoudawei/p/10528841.html

    展开全文
  • vue+element开发手册.docx

    2020-05-06 17:12:02
    此文档是当前项目中用到的web前端开发的标准规范,主要介绍vue+elementui项目的架构、目录结构和开发规范。仅供参考
  • Ant Design Pro Vue不完全开发手册

    千次阅读 2021-01-21 10:08:03
    Ant Design Pro Vue不完全开发手册前言准备工作:1、安装npm2、可选安装3、安装 vue-cli 工具:4、参考文档基础开发学习:1、git项目拉取2、安装项目3、启动项目4、文件解析vue.config.jsrouter.config.jsviews(1)...

    前言

    此文档是我为公司写的前端框架开发手册(应该没人看,哈哈),这里删除公司敏感信息后,作为自己的总结文档记录一下。

    准备工作:

    1、安装npm

    npm更换阿里镜像

    npm config set registry https://registry.npm.taobao.org/ 
    

    查看是否成功

    npm config get registry
    

    2、可选安装

    cnpm(同npm,淘宝镜像速度快)、yarn(https://blog.csdn.net/csdn_yudong/article/details/82015885

    3、安装 vue-cli 工具:

    安装命令npm install -g @vue/cli

    4、参考文档

    ant design vue :http://vue.ant-design.cn/docs/vue/introduce-cn/
    ant design vue pro :https://pro.loacg.com/docs/getting-started

    基础开发学习:

    1、git项目拉取

    2、安装项目

    cnpm install 或者 npm install

    3、启动项目

    npm run serve
    或者
    yarn serve

    注:相关命令存放于package.json

    启动成功信息
    在这里插入图片描述

    4、文件解析

    vue.config.js

    本地开发需要在

    vue.config.js

    配置代理对象
    在这里插入图片描述

    router.config.js

    路由用于菜单配置
    在这里插入图片描述

    注意:
    (1)admin账户直接读取的是router.config.js路由配置,未和数据库做交互,为全权限。
    (2)其他账户经过admin-service服务读取表sys_permission获取权限,其权限为部分权限,故添加新页面时必须要向该表添加对应数据,sys_permission.title = router.config.js.title
    sys_permission.name = router.config.js.permission,其他无要求。
    (3)相关权限控制代码位于
    在这里插入图片描述

    views

    在这里插入图片描述

    视图——》业务逻辑开发位置
    业务开发推荐目录结构(add和update其实可以复用,为了降低开发难度,才做此拆分)
    在这里插入图片描述

    (1)api.js

    ——》对外接口,主要用于发送请求
    使用组件为 axios

    (1)get请求写法

    export function getAirportInfo (parameter) {
      return axios({
        url: '...',
        method: 'get',
        params: parameter // 此处为params
      })
    }
    

    (2)post请求写法

    export function page (parameter) {
      return axios({
        url: '...',
        method: 'post',
        data: parameter // 此处为data
      })
    }
    

    (2)vue开发浅谈

    在这里插入图片描述

    1、引入组件(按需引用)

    import { STable } from '@/components'
    

    2、注册组件
    在这里插入图片描述

    3、数据定义

    data () {
      return {...}
    }
    

    4、生命周期定义

    mounted () {...}
    

    拓展学习https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
    5、方法定义

    methods: {...}
    

    6、监听
    多用于更新页面数据回显

    watch: {...}
    

    7、mock
    ——》模拟数据存放位置,脱离后端进行调试

    问题与解惑

    1、如何把父组件的值传到子组件

    父组件中
    在这里插入图片描述

    子组件中
    在这里插入图片描述

    父组件直接传递即可
    在这里插入图片描述

    2、父组件调如何用子组件方法

    在这里插入图片描述

    如何取别名:ref=“model”

    【this.$refs.{别名}】

    这个的意思是获取对应vue的对象
    this.$refs.{别名}.{方法}

    3、子组件如何调用父组件方法

    调用$emit方法,其中“o”为父组件中,子组件的方法

    this.$emit(o)

    在这里插入图片描述

    4、列表属性

    在这里插入图片描述

    5、导入了组件,却发现使用不了

    为了前端的渲染速度,我们采用的是按需引用
    在这里插入图片描述

    框架没有引用的,我们需要手动引用组件

    (1)方式一:引用组件相关所有文件

    // 折叠框,直接使用会报错,在此手动引用
    import ACollapse from 'ant-design-vue/es/collapse/Collapse'
    import ACollapsePanel from 'ant-design-vue/es/collapse/CollapsePanel'
    import 'ant-design-vue/lib/collapse/style'
    

    (2)方式二(推荐)

    import { Button } from 'ant-design-vue';
    Vue.use(Button);
    

    6、如何进行权限控制(按钮级)

    <span v-if="$auth('luggageOrder.luggageManualRefund')"></span>
    

    注意:luggageOrder.luggageManualRefund权限表的关联性(别忘了router.config.js路由哟)

    拓展学习
    https://pro.antdv.com/docs/authority-management

    7、更新页面如何重置数据

    在父页面Lsit,将data设置为空
    在这里插入图片描述

    8、新增页面如何重置数据

    在新增页面,调用关闭方法时,重置form表单

    this.$nextTick(() => {
      this.form.setFieldsValue({ ...formdata })
    })
    

    9、数据类型怎么定义

    对象 - queryParam : {}
    数组 - queryParam : []
    字符串 - queryParam : ''
    

    10、下拉框有数据,但是为空白,不显示

    多半是下拉框数据类型不匹配,请检查number还是字符串

    11、时间框的对象用什么

    import moment from 'moment'
    

    拓展学习
    http://momentjs.cn/

    12、列表字段实现toptip效果

    ellipsis
    

    在这里插入图片描述

    13、使用watch监听时,第一次加载页面会报错。(20210220新增)

    增加数据校验

            if (!n || !n.id) {
              return
            }
    

    结语

    为什么这个手册叫不完全开发手册呢?因为我也是一个前端小白,从来没有系统学习过vue,都是从0开始,撸起袖子就干了。以上内容都是从经验出发,希望大家少走弯路,快速开发,所以描述啥的可能会不准确,如果有错误,同学们可以直接改正,或者联系【黎晓东】。这里引用晓东大神的一句话:“虽然我们是后端开发,但是如果连一个后台管理系统的前端页面都写下不下来,真的说不过去”。

    附录

    ant design vue :http://vue.ant-design.cn/docs/vue/introduce-cn/
    ant design vue pro :https://pro.loacg.com/docs/getting-started
    vue:https://cn.vuejs.org/
    moment:http://momentjs.cn/
    axios:http://www.axios-js.com/

    展开全文
  • vue常用手册

    2018-12-10 21:53:00
    1.搭建vue开发环境: 1.必须要安装node.js 2.安装vue的脚手架工具 官方命令行工具 npm install --global vue-cli 3.新建项目 vue init webpack-simple gw 然后一直回车,新建完成后,cd到gw目录下,...
  • Vue实用手册

    2019-01-25 17:31:29
    1.Vue.js-是国内开发者尤雨溪开发的js框架,它是实现UI层的渐进式框架, Vue借鉴了Angular的指令、React中组件和props等优点进行设计,从最简单的数据处理,到数据交互,到DOM操作,到路由处理等,VueJS都有完整的...
  • Vue修炼手册 Day01

    千次阅读 2021-04-26 19:22:15
    Vue修炼手册第一章1. 什么是Vue2. Vue快速入门2.1 Hello Vue2.2 Vue中的el挂载点2.3 Vue中的data数据区3. Vue的指令3.1 什么是Vue指令3.2 Vue常用指令 1. 什么是Vue Vue.js(读音 /vjuː/, 类似于 view) 是一套构建...
  • vue-router中文文档vue官方文档教程vue官方APIvuex官方文档vue实例的参数说明$route和$router的区别为什么vuex中必须要通过commit提交mutation?vue.js -- 60分钟组件快速入门(上篇)父组件改变props,子组件如果...
  • 目录 生命周期函数<script> export default { name: 'Shopping', created() { console.log('在组件被创建时候执行'); ... console.log('在组件被挂载到dom...上一篇:Vue学习手册(二)-----前端路由 下一篇:
  • Vue开发 一下子引入了很多的技术链, 工具链, 概念链, 使得我们这些个刀耕火种过来的老程序员突然间有点适应不过来… 最主要的是入门文档写的不易懂, 没有讲清楚概念, 弄的模模糊糊的… 就几条命令. 感觉懵懵的. 真的...
  • vue开发资料

    2016-11-21 10:14:00
    http://cn.vuejs.org/v2/guide/ (vue框架手册)https://router.vuejs.org/zh-cn/ (vue框架路由手册)https://github.com/vuejs/awesome-vue https://github.com/vuejs (vue开源地址)...

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 264
精华内容 105
关键字:

vue开发手册

vue 订阅