笔记：Vue 使用pug + ts

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