(1)技术选型
针对物联网管理平台主要负责设备管理、指令下发、上报数据图表展示等功能.结合当前流程的主流前端技术框架应用情况考虑如下:
               前端开发技术选型可采用vue3.0+typescript+elementUI(组件库)+html5+vuex(状态管理)作为核心的开发技术.采用npm+nodejs:进行前端包管理
               采用webpack/yarn:进行资源加载和打包工具
               采用vuetools:调试vue

               采用vscode进行开发,使用插件如下:  vetur
                                                       
########################################################################################################
此外组件库还可以采用阿里开源的ant desgin vue实现企业家后端管理平台。文档和组件都很完善。上手很容易。

Ant Design Vue
########################################################################################################

(2)vue技术

            Vue 只关注视图层, 采用自底向上增量开发的设计。

            Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

            Vue 实现多视图的单页面应用开发(SPA)。

  1. vue模板:
                   {{}}:文本
                   v-html:输出html
                   v-bind:绑定属性
                   v-if
                   v-on :监听事件
                   v-model:双向数据绑定
                   v-for :迭代数据
                   v-show
                   v-focus:元素获取焦点
  2. 计算属性:computed /methods
  3. 监听属性:watch 响应数据的变化
  4. 样式绑定:v-bind:class               v-bind:style 绑定内联样式
  5. 事件处理: v-on:click
  6. 组件:
     全局组件 Vue.component(tagName,options)                 
     局部组件
    props:传递数据给组件
  7. 自定义事件:
               $on(eventName) 监听事件
               $emit(eventName) 触发事件
  8. 路由:允许通过不同URL访问不同的内容,可实现多视图的单页面应用(SPA)。
              路由的实现需要引入 vue-router库。
  9. 过度/动画
  10. 混入
  11. ajax(axios):实现异步请求后端数据
  12. vue-resource:实现异步加载
  13. 响应接口:添加数据动态响应接口 
                    $watch 属性来实现数据的监听;
                     Vue.set() 设置对象属性
                     Vue.delete()动态删除属性
  14. vue项目搭建
      安装最新最稳定vue:
    cnpm install vue@next
      安装vue-cli:
             npm install -g @vue/cli

    安装 @vue/cli-int:
    cnpm i -g @vue/cli-init


    创建vue项目:
    vue create demovue


    出现如上提示项目创建成功,提示进入demovue工程,运行 项目npm run serve。

    出现如上界面访问http: //localhost:8080

    访问vue项目页面成功。。。
  15.  vue项目结构介绍

    ├──node_modules // 依赖
    ├──public // 静态文件
    ├──src // 源目录
        ├──api // api 统一管理
        ├──assets // 静态资源
        ├──components // 组件
        ├──plugins // vue 插件
        ├──route // vue-router
        ├──store // vuex
        ├──views // 页面
        ├──App.vue // 页面入口
        ├──element-variables.scss // element 全局变量
        ├──index.d.ts // 第三方依赖注入声明
        ├──main.ts // 主入口
        ├──shims-tsx.d.ts // tsx 模块注入声明
        ├──shims-vue.d.ts // vue 模块注入声明
    ├──.env.development // 开发环境变量
    ├──.env.production // 生成环境变量
    ├──.gitignore // git 排除文件
    ├──babel.config.js // bable 配置
    ├──package.json // npm 依赖管理
    ├──package-lock // npm 依赖记录
    ├──README.md // 项目描述
    ├──tsconfig.json // ts 配置
    ├──vue.config.js // vue 配置

    16. vue调试工具:devtools

(3)typescript技术

1.Typescript产生的历史:
   1>对Javascript结构的静态分析可能错误(js是弱类型语法)。微软研发为防止并排查一些运行时错误,创建编译期进行静态分析的强类型语法。
   2>与Javascript语法兼容。typescript是javascript的超集。
   3>方便大型项目构建。Typescript引入了面向对象特性(基于类class对象、接口和模块),从而更好的构建代码,并利用了面向对象的设计原则和实践经验。会java的很好理解。
   4>对于发行版本的代码,没有运行时开销。
   5>遵循当前以及未来出现的ECMAscript规范。
   6>跨平台的开发工具。支撑主流的操作系统上安装和执行。类似java中的wite once run anywhere.

   个人理解typescript语法有大量的影子山寨了微服务的C#.net ,C#net期初山寨的java。
2.typescript架构:
      语言层:
       VS所属语言服务
       适配VS部分(shims.ts)

      编译层:
          语言服务(services.ts)  独立的TS编译器(tsc.ts)

      Typescript编译器核心:(core.ts/program.ts/scanner.ts/parser.ts/checker.ts/emitter.ts)    

3.typesript语言特性:
     
      p1. 开发环境搭建:vscode +nodejs+typescript插件
         1.安装nodejs
         2.安装vscode +typescript插件
         3.npm install -g typescript
         4.vscode创建 test.ts 
            输入 var t:number=1;
            打开terminal终端执行:tsc test.ts 
            同一目录生成test.js文件
      
      p2.语法:
        声明变量:var /let/const(常量)
        联合类型:存储多种类型值得变量,有点类似java中的泛型
        类型守护:typeof/instanceof运算符对类型进行验证。
        类别名:使用type关键字声明类型别名。
        环境声明:允许在typescript中创建一个不会被编译到javascript中的变量。有利于与js代码、dom(文档对象模型)、bom(浏览器对象模型)结合而设计
         
         函数:具名或匿名创建
         类:class
         接口:interface
         命名空间(内部模块):被用于组织一些内置联系的特性和对象,使得代码结构清晰;使用namescpace和export关键字。声明定义前没使用export关键字修饰,命名空间外部无法访问。
         模块声明:module修饰
。。。。后续继续补充typescript要点

Logo

前往低代码交流专区

更多推荐