当前位置: 首页 > 工具软件 > Pug > 使用案例 >

笔记:Vue 使用pug + ts

蒋俊
2023-12-01

Vue大操练

技术栈:pug + typescript

项目前景:在前几天看到别人家的项目使用了pug + ts,总共代码行数加起来简直少的可怜,心痒痒便自己动手试了一试

解决的问题:视图层的文本信息完全和页面解耦,不用担心找一个字段/莫名其妙标点的文本错误啦,加上ts以后报错信息也更多了呢(编译不通过你丫咋运行!)

  • 语法介绍

    • pug

      使用缩进进行分组,无标签化

      • .p(v-mode="myModel") ==> <div class="p" v-mode="myModel"></div>
      • .p Hello world! ==> <div class="p">Hello world!</div>
    • Typescript

      使用class语法进行编写,比js更加严谨

  • 项目搭建

    vue-cli3

      选择manually
    复制代码

    选择对应的项目需要 (空格选择)
    - Ts
    - Router
    - Vuex
    - CSS Pre-pro
复制代码

  • 添加pug-loader yarn add pug pug-loader
  • 添加sass-loader yarn add sass-loader node-sass style-loader
  • 目录结构
    • _constants

      存放一些常量

    • _models

      用来存放页面的文字信息、和后台交互的表单字段(bean)的封装类

    • _helpers

      用来存放一些帮助类

    • _services

      编写获取页面数据/调用后台api的封装类

    • assets

      资源文件

    • view

      视图层

  • App.vue

    Component装饰器为组件添加了生命周期等

<template lang="pug">
 #app
   NavComponent(:json="nav")
   #main
     router-view
</template>

<script lang='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator';
import NavComponent from '@/components/Nav.vue';
import { NavService } from '@/_services';
import { Nav as NavBean } from '@/_models';

@Component({
 components: {
   NavComponent,
 },
})
export default class App extends Vue {
 public nav!: object;
 public data() {
   return {
     nav: {},
   };
 }

 private beforeMount(): void {
   NavService.get().then((res: NavBean): void => {
       this.nav = res;
     });
 }
}

</script>

<style lang="scss">
*{
 font-family: "DIN Pro", "PingFang SC", "Microsoft Yahei", 微软雅黑;
}

#app {
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 color: #2c3e50;
}

body{
 position: relative;
 margin: 0 !important;
 padding: 0;
 height: 100vh;
}

</style>
复制代码
  • Nav.vue
<template lang="pug">
  .nav-wrapper
    img(:src="json.logo")
</template>
<script lang="ts">
import { Vue, Prop, Component } from 'vue-property-decorator';
import { NavService } from '@/_services';
import { Nav as NavBean } from '@/_models';

@Component
export default class Nav extends Vue {
  @Prop() public json?: NavBean;
}

</script>
<style lang="scss">
.nav-wrapper {
  width: 100%;
  height: 60px;
  padding: 10px;
  box-sizing: border-box;
  img {
    height: 100%;
    width: 120px;
  }
}
</style>

复制代码
  • NavService
import axios from 'axios';
import { BaseService } from './base.services';
import { Ressource } from '../_helpers';
import { Nav } from '@/_models';

export class NavService extends BaseService {
  public static get(): Promise<Nav> {
    const ressource = new Ressource(process.env.VUE_APP_LOCALURL_ENV);
    ressource.shapeUrl('/content/nav.json', []);
    return axios.get<Nav>(ressource.fullUrl, this.requestOptionsGet())
      .then((data: any) => {
        return data.data;
      });
  }
}

复制代码
  • BaseService

export class BaseService {
  public static basicOptions: any = {
    cache: 'no-cache',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer test',
      'Access-Control-Allow-Origin': '*',
    },
    redirect: 'follow',
    referrer: 'no-referrer',
    crossdomain: true,
  };

  public static requestOptionsPost(body: any): object {
    const header: any = {
      ...this.basicOptions,
      ...{
        body: JSON.stringify(body),
      },
    };
    return header;
  }

  public static requestOptionsGet(): object {
    const header: any = {
      ...this.basicOptions,
      ...{
        method: 'GET',
        responseType: 'json',
      },
    };
    return header;
  }

  public static requestOptionsGetAuth(): object {
    return {
      method: 'GET',
    };
  }
}

复制代码
  • Index.tsx _services/index.tsx

负责把所有Service导出

/**
 * suffix rule:
 * 1. (xxx.services.tsx) services which means the class was build for call backend service etc
 * 2. (xxx.page.tsx)     page which means the class was build for the static page text
 * 3. (xxx.tsx)          non-suffix which means the class was build for extra service
 */

export { NavService } from './nav.page';

复制代码
  • nav.json public/content/nav.json
{
  "id": 1,
  "name": "xxx-nav",
  "logo": "/img/logo.png"
}
复制代码
  • TS语法补充

    • Watch使用
      @Watch('enable')
      private onPropertyChanged(value: any, oldValue: any): void {
        if (value) {
            console.log('value changed!')
        }
      }
    复制代码
    • Computed使用

      使用get构造器

      get confirmBtnStyle() {
        if (this.confirmBtnDisable) {
           return {
            'background-color': '#868d90',
            'cursor': 'not-allowed',
          };
        } else {
          return {};
        }
      }
    复制代码
    • Emit使用
      @Emit('show')
      private handleShow(): void {}
    复制代码

    ?快去试一试吧!

转载于:https://juejin.im/post/5c7f4731f265da2d9e177bc3

 类似资料: