Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

  • 时间:
  • 浏览:1
  • 来源:大发uu快3_uu快3技巧稳赚方法_大发uu快3技巧稳赚方法

前言

本文讲解如可在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 。

TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript 在 2018年 势头迅猛,可谓遍地开花。

Vue3.0 将使用 TS 重写,重写后的 Vue3.0 将更好的支持 TS。2019 年 TypeScript 肯能更加普及,都都还可不都都可否熟练掌握 TS,并使用 TS 开发过项目,将更加成为前端开发者的优势。

而是有笔者就当然也要学你什儿 必备技能,就以 边学边实践 的最好的妙招,做个博客项目来玩玩。

此项目是基于 Vue 全家桶 + TypeScript + Element-UI 的技术栈,且肯能开源,github 地址 blog-vue-typescript 。

肯能以前写了篇纯 Vue 项目搭建的相关文章 基于vue+mint-ui的mobile-h5的项目说明 ,有不少人加我微信,要源码来学习,有而是你什儿 是我司的项目,只能提供原码。

而是有做1个 全是我司的项目,且又是 vue 相关的项目来练手并开源吧。

1. 效果

效果图:

  • pc 端

  • 移动端

完正效果请看:https://biaochenxuying.cn

2. 功能

肯能完成功能

  • [x] 登录

  • [x] 注册

  • [x] 文章列表
  • [x] 文章归档
  • [x] 标签

  • [x] 关于

  • [x] 点赞与评论
  • [x] 留言
  • [x] 历程
  • [x] 文章详情(支持代码语法高亮)
  • [x] 文章详情目录
  • [x] 移动端适配
  • [x] github 授权登录

待优化肯能实现

  • [ ] 使用 vuex-class
  • [ ] 更多 TypeScript 的优化技巧
  • [ ] 服务器渲染 SSR

3. 前端主要技术

所有技术全是当前最新的。

  • vue: ^2.6.6
  • typescript : ^3.2.1
  • element-ui: 2.6.3
  • vue-router : ^3.0.1
  • webpack: 4.28.4
  • vuex: ^3.0.1
  • axios:0.18.0
  • redux: 4.0.0
  • highlight.js: 9.15.6
  • marked:0.6.1

4. 5 分钟上手 TypeScript

肯能只能 有些点基础,肯能没学过 TypeScript 的读者会看不懂往下的内容,而是有先学点基础。

TypeScript 的静态类型检查是个好东西,都还可不都都可否 处理而是有不都还可不都都可否 的错误, 可不都都可否 在调试肯能项目上线的以前才发现问题图片 。

  • 类型注解

TypeScript 里的类型注解是你什儿 轻量级的为函数或变量上加约束的最好的妙招。变量定义时也要定义他的类型,比如常见的 :

// 布尔值
let isDone: boolean = false; // 相当于 js 的 let isDone = false;
// 变量定义以前不都还可不都都可否

随便变更它的类型
isDone = true // 不报错
isDone = "我都还可不都都可否

变为字符串" // 报错
// 数字
let decLiteral: number = 6; // 相当于 js 的 let decLiteral = 6;
// 字符串
let name: string = "bob";  // 相当于 js 的 let name = "bob";
// 数组
 // 第你什儿

,都还可不都都可否

在元素类型底下接上 [],表示由此类型元素组成的1个


数组:
let list: number[] = [1, 2, 3]; // 相当于 js 的let list = [1, 2, 3];
// 第二种最好的妙招是使用数组泛型,Array<元素类型>:
let list: Array<number> = [1, 2, 3]; // 相当于 js 的let list = [1, 2, 3];
// 在 TypeScript 中,亲戚亲戚亲戚亲戚朋友使用接口(Interfaces)来定义 对象 的类型。
interface Person {
    name: string;
    age: number;
}
let tom: Person = {
    name: 'Tom',
    age: 25
};
// 以上 对象 的代码相当于 
let tom = {
    name: 'Tom',
    age: 25
};
// Any 都还可不都都可否

随便变更类型 (当你什儿

值肯能来自于动态的内容,比如来自用户输入或第三方代码库)
let notSure: any = 4;
notSure = "我都还可不都都可否

随便变更类型" // 不报错
notSure = false;  // 不报错
// Void 当1个


函数只能

返回值时,你通常会见到其返回值类型是 void
function warnUser(): void {
    console.log("This is my warning message");
}
// 最好的妙招的参数也要定义类型,别问我就定义为 any
function fetch(url: string, id : number, params: any): void {
    console.log("fetch");
}

以上是最简单的有些知识点,更多知识请看 TypeScript 中文官网

5. 5 分钟上手 Vue +TypeScript

  • vue-class-component 

    vue-class-component 对 Vue 组件进行了一层封装,让 Vue 组件语法在结合了 TypeScript 语法以前更加扁平化:
<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
import Vue from 'vue'
import Component from 'vue-class-component'

@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {
    this.greet()
  }

  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}
</script>

底下的代码跟下面的代码作用是一样的:

<template>
  <div>
    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>
  </div>
</template>

<script>
export default {
  // 属性
  props: {
    propMessage: {
      type: String
    }
  },
  data () {
    return {
      msg: 123,
      helloMsg: 'Hello, ' + this.propMessage
    }
  },
  // 声明周期钩子
  mounted () {
    this.greet()
  },
  // 计算属性
  computed: {
    computedMsg () {
      return 'computed ' + this.msg
    }
  },
  // 最好的妙招
  methods: {
    greet () {
      alert('greeting: ' + this.msg)
    }
  },
}
</script>
  • vue-property-decorator 

vue-property-decorator 是在 vue-class-component 上增强了更多的结合 Vue 形态学 的装饰器,新增了这 7 个装饰器:

  • @Emit
  • @Inject
  • @Model
  • @Prop
  • @Provide
  • @Watch
  • @Component (从 vue-class-component 继承)

在这里列举十几个 常用的@Prop/@Watch/@Component, 更多信息,详见官方文档

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component
export class MyComponent extends Vue {
  
  @Prop()
  propA: number = 1

  @Prop({ default: 'default value' })
  propB: string

  @Prop([String, Boolean])
  propC: string | boolean

  @Prop({ type: null })
  propD: any

  @Watch('child')
  onChildChanged(val: string, oldVal: string) { }
}

底下的代码相当于:

export default {
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
    propD: { type: null }
  }
  methods: {
    onChildChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    }
  }
}
  • vuex-class

    vuex-class :在 vue-class-component 写法中 绑定 vuex
import Vue from 'vue'
import Component from 'vue-class-component'
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export class MyComp extends Vue {
  @State('foo') stateFoo
  @State(state => state.bar) stateBar
  @Getter('foo') getterFoo
  @Action('foo') actionFoo
  @Mutation('foo') mutationFoo
  @someModule.Getter('foo') moduleGetterFoo

  // If the argument is omitted, use the property name
  // for each state/getter/action/mutation type
  @State foo
  @Getter bar
  @Action baz
  @Mutation qux

  created () {
    this.stateFoo // -> store.state.foo
    this.stateBar // -> store.state.bar
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
    this.moduleGetterFoo // -> store.getters['path/to/module/foo']
  }
}

6. 用 vue-cli 搭建 项目

笔者使用最新的 vue-cli 3 搭建项目,完正的教程,请看我以前写的 vue-cli3.x 新形态学 及踩坑记,底下肯能有完正讲解 ,但文章底下的配置和此项目不同的是,我加入了 TypeScript ,有些的配置全是 vue-cli 以前配好的了。详情请看 vue-cli 官网 。

6.1 安装及构建项目目录

安装的依赖:

安装过程选着的有些配置:

搭建好以前,初始项目形态学 长以前:

├── public                          // 静态页面

├── src                             // 主目录

    ├── assets                      // 静态资源

    ├── components                  // 组件

    ├── views                       // 页面

    ├── App.vue                     // 页面主入口

    ├── main.ts                     // 脚本主入口

    ├── router.ts                   // 路由

    ├── shims-tsx.d.ts              // 相关 tsx 模块注入

    ├── shims-vue.d.ts              // Vue 模块注入

    └── store.ts                    // vuex 配置

├── tests                           // 测试用例

├── .eslintrc.js                    // eslint 相关配置

├── .gitignore                      // git 忽略文件配置

├── babel.config.js                 // babel 配置

├── postcss.config.js               // postcss 配置

├── package.json                    // 依赖

└── tsconfig.json                   // ts 配置

奔着 大型项目的形态学 来改造项目形态学 ,改造后 :


├── public                          // 静态页面

├── src                             // 主目录

    ├── assets                      // 静态资源

    ├── filters                     // 过滤

    ├── store                       // vuex 配置

    ├── less                        // 样式

    ├── utils                       // 工具最好的妙招(axios封装,全局最好的妙招等)

    ├── views                       // 页面

    ├── App.vue                     // 页面主入口

    ├── main.ts                     // 脚本主入口

    ├── router.ts                   // 路由

    ├── shime-global.d.ts           // 相关 全局肯能插件 模块注入

    ├── shims-tsx.d.ts              // 相关 tsx 模块注入

    ├── shims-vue.d.ts              // Vue 模块注入, 使 TypeScript 支持 *.vue 后缀的文件

├── tests                           // 测试用例

├── .eslintrc.js                    // eslint 相关配置

├── postcss.config.js               // postcss 配置

├── .gitignore                      // git 忽略文件配置

├── babel.config.js                 // preset 记录

├── package.json                    // 依赖

├── README.md                       // 项目 readme

├── tsconfig.json                   // ts 配置

└── vue.config.js                   // webpack 配置

tsconfig.json 文件中指定了用来编译你什儿 项目的根文件和编译选项。

本项目的 tsconfig.json 配置如下 :

{
    // 编译选项
  "compilerOptions": {
    // 编译输出目标 ES 版本
    "target": "esnext",
    // 采用的模块系统
    "module": "esnext",
    // 以严格模式解析
    "strict": true,
    "jsx": "preserve",
    // 从 tslib 导入内部管理帮助库: 比如__extends,__rest等
    "importHelpers": true,
    // 如可处理模块
    "moduleResolution": "node",
    // 启用装饰器
    "experimentalDecorators": true,
    "esModuleInterop": true,
    // 允许从只能

设置默认导出的模块中默认导入
    "allowSyntheticDefaultImports": true,
    // 定义1个


变量就都还可不都都可否

给它1个


初始值
    "strictPropertyInitialization" : false,
    // 允许编译javascript文件
    "allowJs": true,
    // 算是含有都还可不都都可否

用于 debug 的 sourceMap
    "sourceMap": true,
    // 忽略 this 的类型检查, Raise error on this expressions with an implied any type.
    "noImplicitThis": false,
    // 解析非相对模块名的基准目录 
    "baseUrl": ".",
    // 给错误和消息设置样式,使用颜色和上下文。
    "pretty": true,
    // 设置引入的定义文件
    "types": ["webpack-env", "mocha", "chai"],
    // 指定特殊模块的路径
    "paths": {
      "@/*": ["src/*"]
    },
    // 编译过程中都还可不都都可否

引入的库文件的列表
    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
  },
  // ts 管理的文件
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  // ts 排除的文件
  "exclude": ["node_modules"]
}

更多配置请看官网的 tsconfig.json 的 编译选项

本项目的 vue.config.js:

const path = require("path");
const sourceMap = process.env.NODE_ENV === "development";

module.exports = {
  // 基本路径
  publicPath: "./",
  // 输出文件目录
  outputDir: "dist",
  // eslint-loader 算是在保存的以前检查
  lintOnSave: false,
  // webpack配置
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  chainWebpack: () => {},
  configureWebpack: config => {
    if (process.env.NODE_ENV === "production") {
      // 为生产环境修改配置...
      config.mode = "production";
    } else {
      // 为开发环境修改配置...
      config.mode = "development";
    }

    Object.assign(config, {
      // 开所处产一起去配置
      resolve: {
        extensions: [".js", ".vue", ".json", ".ts", ".tsx"],
        alias: {
          vue$: "vue/dist/vue.js",
          "@": path.resolve(__dirname, "./src")
        }
      }
    });
  },
  // 生产环境算是生成 sourceMap 文件
  productionSourceMap: sourceMap,
  // css相关配置
  css: {
    // 算是使用css分离插件 ExtractTextPlugin
    extract: true,
    // 开启 CSS source maps?
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {},
    // 启用 CSS modules for all css / pre-processor files.
    modules: false
  },
  // use thread-loader for babel & TS in production build
  // enabled by default if the machine has more than 1 cores
  parallel: require("os").cpus().length > 1,
  // PWA 插件相关配置
  // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  pwa: {},
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === "darwin",
    host: "localhost",
    port: 4001, //400400,
    https: false,
    hotOnly: false,
    proxy: {
      // 设置代理
      // proxy all requests starting with /api to jsonplaceholder
      "/api": {
        // target: "https://emm.cmccbigdata.com:8443/",
        target: "http://localhost:4000/",
        // target: "http://47.106.136.114/",
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    },
    before: app => {}
  },
  // 第三方插件配置
  pluginOptions: {
    // ...
  }
};

6.2 安装 element-ui

以前想搭配 iview-ui 来用的,但后续还想把你什儿 项目搞成 ssr 的,而 vue + typescript + iview + Nuxt.js 的服务端渲染还有不少坑, 而 vue + typescript + element + Nuxt.js 对 ssr 的支持肯能不错了,而是有选着了 element-ui 。

安装:

npm i element-ui -S

按需引入, 借助 babel-plugin-component,亲戚亲戚亲戚亲戚朋友都还可不都都可否 只引入都还可不都都可否 的组件,以达到减小项目体积的目的。

npm install babel-plugin-component -D

有而是,将 babel.config.js 修改为:

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
};

接下来,肯能你只希望引入次要组件,比如 Button 和 Select,只能 都还可不都都可否 在 main.js 中写入以下内容:

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

6.3 完善项目目录与文件

route

使用路由懒加载功能。

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "home",
      component: () => import(/* webpackChunkName: "home" */ "./views/home.vue")
    },
    {
      path: "/articles",
      name: "articles",
      // route level code-splitting
      // this generates a separate chunk (articles.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "articles" */ "./views/articles.vue")
    },
  ]
});

utils

  • utils/utils.ts 常用函数的封装, 比如 事件的节流(throttle)与防抖(debounce)最好的妙招:
// fn是亲戚亲戚亲戚亲戚朋友都还可不都都可否

包装的事件回调, delay是时间间隔的阈值
export function throttle(fn: Function, delay: number) {
  // last为上一次触发回调的时间, timer是定时器
  let last = 0,
    timer: any = null;
  // 将throttle处理结果当作函数返回
  return function() {
    // 保留调用时的this上下文
    let context = this;
    // 保留调用时传入的参数
    let args = arguments;
    // 记录本次触发回调的时间
    let now = +new Date();
    // 判断上次触发的时间和本次触发的时间差算是小于时间间隔的阈值
    if (now - last < delay) {
      // 肯能时间间隔小于亲戚亲戚亲戚亲戚朋友设定的时间间隔阈值,则为本次触发操作设立1个


新的定时器
      clearTimeout(timer);
      timer = setTimeout(function() {
        last = now;
        fn.apply(context, args);
      }, delay);
    } else {
      // 肯能时间间隔超出了亲戚亲戚亲戚亲戚朋友设定的时间间隔阈值,那就不等了,无论如可要反馈给用户一次响应
      last = now;
      fn.apply(context, args);
    }
  };
}
  • utils/config.ts 配置文件,比如 github 授权登录的回调地址、client_id、client_secret 等。
const config = {
  'oauth_uri': 'https://github.com/login/oauth/authorize',
  'redirect_uri': 'https://biaochenxuying.cn/login',
  'client_id': 'XXXXXXXXXX',
  'client_secret': 'XXXXXXXXXX',
};

// 本地开发环境下
if (process.env.NODE_ENV === 'development') {
  config.redirect_uri = "http://localhost:4001/login"
  config.client_id = "4002176cec657740057a9e"
  config.client_secret = "65d444de381a0264001a2c7cffb6952b9a86ac235"
}
export default config;

肯能你的生产环境也要 github 登录授权得话,请在 github 上申请1个 Oauth App ,把你的 redirect_uri,client_id,client_secret 的信息填在 config 底下即可。具体详情请看我写的这篇文章 github 授权登录教程与如可设计第三方授权登录的用户表

  • utils/urls.ts 请求接口地址,统一管理。
// url的链接
export const urls: object = {
  login: "login",
  register: "register",
  getArticleList: "getArticleList",
};
export default urls;
  • utils/https.ts axios 请求的封装。
import axios from "axios";

// 创建axios实例
let service: any = {};
service = axios.create({
    baseURL: "/api", // api的base_url
    timeout: 400000 // 请求超时时间
  });

// request拦截器 axios的有些配置
service.interceptors.request.use(
  (config: any) => {
    return config;
  },
  (error: any) => {
    // Do something with request error
    console.error("error:", error); // for debug
    Promise.reject(error);
  }
);

// respone拦截器 axios的有些配置
service.interceptors.response.use(
  (response: any) => {
    return response;
  },
  (error: any) => {
    console.error("error:" + error); // for debug
    return Promise.reject(error);
  }
);

export default service;

把 urls 和 https 挂载到 main.ts 底下的 Vue 的 prototype 底下。

import service from "./utils/https";
import urls from "./utils/urls";

Vue.prototype.$https = service; // 有些页面在使用 axios 的以前直接  this.$http 就都还可不都都可否

了
Vue.prototype.$urls = urls; // 有些页面在使用 urls 的以前直接  this.$urls 就都还可不都都可否

了

有而是就都还可不都都可否 统一管理接口,有而是调用起来也很方便啦。比如下面 文章列表的请求。

async handleSearch() {
    this.isLoading = true;
    const res: any = await this.$https.get(this.$urls.getArticleList, {
      params: this.params
    });
    this.isLoading = false;
    if (res.status === 400) {
      if (res.data.code === 0) {
        const data: any = res.data.data;
        this.articlesList = [...this.articlesList, ...data.list];
        this.total = data.count;
        this.params.pageNum++;
        if (this.total === this.articlesList.length) {
          this.isLoadEnd = true;
        }
      } else {
        this.$message({
          message: res.data.message,
          type: "error"
        });
      }
    } else {
      this.$message({
        message: "网络错误!",
        type: "error"
      });
    }
  }

store ( Vuex )

一般大型的项目全是而是有模块的,比如本项目含有公共信息(比如 token )、 用户模块、文章模块。

├── modules                         // 模块

    ├── user.ts                     // 用户模块 
    
    ├── article.ts                 // 文章模块 

├── types.ts                        // 类型

└── index.ts                        // vuex 主入口
  • store/index.ts 存放公共的信息,并导入有些模块
import Vue from "vue";
import Vuex from "vuex";
import * as types from "./types";
import user from "./modules/user";
import article from "./modules/article";

Vue.use(Vuex);
const initPageState = () => {
  return {
    token: ""
  };
};
const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== "production",
  // 具体模块
  modules: {
    user,
    article
  },
  state: initPageState(),
  mutations: {
    [types.SAVE_TOKEN](state: any, pageState: any) {
      for (const prop in pageState) {
        state[prop] = pageState[prop];
      }
    }
  },
  actions: {}
});

export default store;
  • types.ts
// 公共 token
export const SAVE_TOKEN = "SAVE_TOKEN";

// 用户
export const SAVE_USER = "SAVE_USER";
  • user.ts
import * as types from "../types";

const initPageState = () => {
  return {
    userInfo: {
      _id: "",
      name: "",
      avator: ""
    }
  };
};
const user = {
  state: initPageState(),
  mutations: {
    [types.SAVE_USER](state: any, pageState: any) {
      for (const prop in pageState) {
        state[prop] = pageState[prop];
      }
    }
  },
  actions: {}
};

export default user;

7. markdown 渲染

markdown 渲染效果图:

markdown 渲染 采用了开源的 marked, 代码高亮用了 highlight.js 。

用法:

第一步:npm i marked highlight.js --save

npm i marked highlight.js --save

第二步: 导入封装成 markdown.js,将文章详情由字符串转成 html, 并抽离出文章目录。

marked 的封装 得感谢这位老哥。

const highlight = require("highlight.js");
const marked = require("marked");
const tocObj = {
  add: function(text, level) {
    var anchor = `#toc${level}${++this.index}`;
    this.toc.push({ anchor: anchor, level: level, text: text });
    return anchor;
  },
  // 使用堆栈的最好的妙招处理嵌套的ul,li,level即ul的嵌套层次,1是最外层
  // <ul>
  //   <li></li>
  //   <ul>
  //     <li></li>
  //   </ul>
  //   <li></li>
  // </ul>
  toHTML: function() {
    let levelStack = [];
    let result = "";
    const addStartUL = () => {
      result += '<ul class="anchor-ul" id="anchor-fix">';
    };
    const addEndUL = () => {
      result += "</ul>\n";
    };
    const addLI = (anchor, text) => {
      result +=
        '<li><a class="toc-link" href="#' + anchor + '">' + text + "<a></li>\n";
    };

    this.toc.forEach(function(item) {
      let levelIndex = levelStack.indexOf(item.level);
      // 只能

找到相应level的ul标签,则将li装在新增的ul中
      if (levelIndex === -1) {
        levelStack.unshift(item.level);
        addStartUL();
        addLI(item.anchor, item.text);
      } // 找到了相应level的ul标签,有而是在栈顶的位置则直接将li装在此ul下
      else if (levelIndex === 0) {
        addLI(item.anchor, item.text);
      } // 找到了相应level的ul标签,有而是不在
栈顶位置,都还可不都都可否

将以前的所有level出栈有而是打上闭合标签,最后新增li
      else {
        while (levelIndex--) {
          levelStack.shift();
          addEndUL();
        }
        addLI(item.anchor, item.text);
      }
    });
    // 肯能栈中还有level,完正出栈打上闭合标签
    while (levelStack.length) {
      levelStack.shift();
      addEndUL();
    }
    // 清理先前数据供下次使用
    this.toc = [];
    this.index = 0;
    return result;
  },
  toc: [],
  index: 0
};

class MarkUtils {
  constructor() {
    this.rendererMD = new marked.Renderer();
    this.rendererMD.heading = function(text, level, raw) {
      var anchor = tocObj.add(text, level);
      return `<h${level} id=${anchor}>${text}</h${level}>\n`;
    };
    highlight.configure({ useBR: true });
    marked.setOptions({
      renderer: this.rendererMD,
      headerIds: false,
      gfm: true,
      tables: true,
      breaks: false,
      pedantic: false,
      sanitize: false,
      smartLists: true,
      smartypants: false,
      highlight: function(code) {
        return highlight.highlightAuto(code).value;
      }
    });
  }

  async marked(data) {
    if (data) {
      let content = await marked(data); // 文章内容
      let toc = tocObj.toHTML(); // 文章目录
      return { content: content, toc: toc };
    } else {
      return null;
    }
  }
}

const markdown = new MarkUtils();

export default markdown;

第三步: 使用

import markdown from "@/utils/markdown";

// 获取文章详情
async handleSearch() {
    const res: any = await this.$https.post(
      this.$urls.getArticleDetail,
      this.params
    );
    if (res.status === 400) {
      if (res.data.code === 0) {
        this.articleDetail = res.data.data;
       // 使用 marked 转换
        const article = markdown.marked(res.data.data.content);
        article.then((response: any) => {
          this.articleDetail.content = response.content;
          this.articleDetail.toc = response.toc;
        });
      } else {
        // ...
    } else {
     // ... 
    }
  }

// 渲染
<div id="content"
       class="article-detail"
       v-html="articleDetail.content">
</div>

第四步:引入 monokai_sublime 的 css 样式

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">

第五步:对 markdown 样式的补充

肯能不补充样式,是只能 黑色背景的,字体大小等也会比较小,图片而是会居中显示

/*对 markdown 样式的补充*/
pre {
    display: block;
    padding: 10px;
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #abb2bf;
    background: #282c34;
    word-break: break-all;
    word-wrap: break-word;
    overflow: auto;
}
h1,h2,h3,h4,h5,h6{
    margin-top: 1em;
    /* margin-bottom: 1em; */
}
strong {
    font-weight: bold;
}

p > code:not([class]) {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #f9f2f4;
    border-radius: 4px;
}
p img{
    /* 图片居中 */
    margin: 0 auto;
    display: flex;
}

#content {
    font-family: "Microsoft YaHei",  'sans-serif';
    font-size: 16px;
    line-height: 400px;
}

#content .desc ul,#content .desc ol {
    color: #333333;
    margin: 1.5em 0 0 25px;
}

#content .desc h1, #content .desc h2 {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

#content .desc a {
    color: #009a61;
}

8. 注意点

  • 关于 页面

对于 关于 的页面,嘴笨 是一篇文章来的,根据文章类型 type 来决定的,数据库底下 type 为 3

的文章,只能有一篇而是 博主介绍 ;达到了想那些以前修改内容都还可不都都可否 。

而是有当 当前路由 === '/about' 时而是请求类型为 博主介绍 的文章。

type: 3,  // 文章类型: 1:普通文章;2:是博主简历;3 :是博主简介;
  • 移动端适配

    移动端使用 rem 单位适配。
// 屏幕适配( window.screen.width / 移动端设计稿宽 * 400)也即是 (window.screen.width / 7400 * 400)  ——*400 为了方便计算。即 font-size 值是手机 deviceWidth 与设计稿比值的 400 倍
document.getElementsByTagName('html')[0].style.fontSize = window.screen.width / 7.5 + 'px';

如上:通过查询屏幕角度,动态的设置 html 的 font-size 值,移动端的设计稿大多以宽为 7400 px 来设置的。

比如在设计图上1个 400 * 2400 的盒子(单位 px):

以前在 css 中的写法:

width: 400px;
heigth: 2400px;

通过上述换算后,在 css 中对应的 rem 值只都还可不都都可否 写:

width: 1.5rem; // 400 / 400 rem
heigth: 2.5rem; // 2400 / 400 rem

肯能你的移动端的设计稿是以宽为 10400 px 来设置得话,就用 window.screen.width / 10.8 吧。

9. 踩坑记

  • 1. 让 vue 识别全局最好的妙招/变量
  1. 亲戚亲戚亲戚亲戚朋友时不时 在 main.ts 中给 vue.prototype 挂载实例肯能内容,以方便在组件底下使用。
import service from "./utils/https";
import urls from "./utils/urls";

Vue.prototype.$https = service; // 有些页面在使用 axios 的以前直接  this.$http 就都还可不都都可否

了
Vue.prototype.$urls = urls; // 有些页面在使用 urls 的以前直接  this.$urls 就都还可不都都可否

了

然而当你在组件中直接 this.$http 肯能 this.$urls 可不都都可否 报错的,那是肯能 $http 和 $urls 属性,并只能 在 vue 实例中声明。

  1. 再比如使用 Element-uI 的 meesage。
import { Message } from "element-ui";

Vue.prototype.$message = Message;

以前用法如下图:

  this.$message({
    message: '恭喜你,这是第一根成功消息',
    type: 'success'
  })

然而还是会报错的。

再比如 监听路由的变化:

import { Vue, Watch } from "vue-property-decorator";
import Component from "vue-class-component";
import { Route } from "vue-router";

@Component
export default class App extends Vue {

  @Watch("$route")
  routeChange(val: Route, oldVal: Route) {
      //  do something
  }
}

而是以前写得话,监听 $route 还是会报错的。

想要以上你什儿 做法都正常执行,就都还可不都都可否 补充如下内容:

在 src 下的 shims-vue.d.ts 中加入要挂载的内容。 表示 vue 底下的 this 下有那些东西。

import VueRouter, { Route } from "vue-router";

declare module "vue/types/vue" {
  interface Vue {
    $router: VueRouter; // 这表示this下有你什儿

东西
    $route: Route;
    $https: any; // 别问我类型就定为 any 吧(偷懒)
    $urls: any;
    $Message: any;
  }
}
  • 2. 引入的模块要声明

比如 在组件底下使用 window.document 肯能 document.querySelector 的而是能 报错的,npm run build 不给通过。

再比如:按需引用 element 的组件与动画组件:

import { Button } from "element-ui";
import CollapseTransition from "element-ui/lib/transitions/collapse-transition";

npm run serve 时都还可不都都可否 执行,有而是在 npm run build 的以前,会直接报错的,肯能只能 声明。

正确做法:

我在 src 下新建1个 文件 shime-global.d.ts ,加入内容如下:

// 声明全局的 window ,不然使用 window.XX 可不都都可否



报错
declare var window: Window;
declare var document: Document;

declare module "element-ui/lib/transitions/collapse-transition";
declare module "element-ui";

当然,你什儿 文件你上加有些地方而是需要 ,起有些名字都 OK。

有而是即使配置了以上最好的妙招以前,有些地方使用 document.XXX ,比如 document.title 的以前,npm run build 还是通过不了,而是有只能以前了:

<script lang="ts">
// 在用到 document.XXX  的文件中声明一下即可
declare var document: any;
// 此处省略 XXXX 多的代码
</script>
  • 3. this 的类型检查

比如以前的 事件的节流(throttle)与防抖(debounce)最好的妙招:

export function throttle(fn: Function, delay: number) {
  return function() {
    // 保留调用时的 this 上下文
    let context = this;
}

function 底下的 this 在 npm run serve 可不都都可否 报错的,肯能 tyescript 检测到它全是在类(class)底下。

正确做法:

在根目录的 tsconfig.json 底下上加 "noImplicitThis": false ,忽略 this 的类型检查。

// 忽略 this 的类型检查, Raise error on this expressions with an implied any type.
"noImplicitThis": false,
  • 4. import 的 .vue 文件

import .vue 的文件的以前,要补全 .vue 的后缀,不然 npm run build 会报错的。

比如:

import Nav from "@/components/nav"; // @ is an alias to /src
import Footer from "@/components/footer"; // @ is an alias to /src

要修改为:

import Nav from "@/components/nav.vue"; // @ is an alias to /src
import Footer from "@/components/footer.vue"; // @ is an alias to /src
  • 5. 装饰器 @Component

报错。

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
export default class LoadingCustom extends Vue {}
</script>

以下才是正确,肯能这里的 Vue 是从 vue-property-decorator import 来的。

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component
export default class LoadingCustom extends Vue {}
</script>
  • 6. 路由的组件导航守卫失效

vue-class-component 官网底下的路由的导航钩子的用法是只能 效果的 Adding Custom Hooks

路由的导航钩子不属于 Vue 你什儿 ,这会因为 class 组件转义到配置对象时导航钩子无效,有而是肯能要使用导航钩子都还可不都都可否 在 router 的配置里声明(网上别人说的,还没实践,不选着算是可行)。

  • 7. tsconfig.json 的 strictPropertyInitialization 设为 false,不然你定义1个 变量就都还可不都都可否 给它1个 初始值。

  • position: sticky;

本项目中的文章详情的目录而是用了 sticky。

.anchor {
  position: sticky;
  top: 213px;
  margin-top: 213px;
}

position:sticky 是 css 定位新增属性;都还可不都都可否 说是相对定位 relative 和固定定位 fixed 的结合;它主要用在对 scroll 事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如 top:400px );position:sticky 这时的效果相当于 fixed 定位,固定到适当位置。

用法像底下那样用即可,有而是有使用条件:

1、父元素只能 overflow:hidden 肯能 overflow:auto 属性。

2、都还可不都都可否 指定 top、bottom、left、right 4 个值之一,有而是只会所处相对定位

3、父元素的角度只能低于 sticky 元素的角度

4、sticky 元素仅在其父元素内生效

  • 8. eslint 报找只能文件和装饰器的错

App.vue 中而是写了引用文件而已,有而是 webpack 和 tsconfig.josn 底下肯能配置了别名了的。

import Nav from "@/components/nav.vue"; // @ is an alias to /src
import Slider from "@/components/slider.vue"; // @ is an alias to /src
import Footer from "@/components/footer.vue"; // @ is an alias to /src
import ArrowUp from "@/components/arrowUp.vue"; // @ is an alias to /src
import { isMobileOrPc } from "@/utils/utils";

有而是,还是会报如下的错:

而是代码不影响文件的打包,有而是本地和中产环境的代码也正常,没报错而已。

你什儿 eslint 的检测目前还没找到相关的配置都还可不都都可否 把那些错误上加。

  • 9. 路由模式修改为 history

肯能文章详情页面有目录,点击目录时定位定相应的内容,有而是你什儿 目录定位内容是根据锚点来做的,肯能路由模式为 hash 模式得话,以前文章详情页面的路由而是 #articleDetail 了,再点击目录得话(比如 #title2 ),会在 #articleDetail 底下再上加 #title2,一刷新会找只能你什儿 页面的。

10. Build Setup

 # clone
git clone https://github.com/biaochenxuying/blog-vue-typescript.git
# cd
cd  blog-vue-typescript
# install dependencies
npm install
# Compiles and hot-reloads for development
npm run serve
# Compiles and minifies for production
npm run build
### Run your tests
npm run test
### Lints and fixes files
npm run lint
### Run your unit tests
npm run test:unit
  • Customize configuration

    See Configuration Reference.

肯能要看有后台数据完正的效果,是要和后台项目 blog-node 一起去运行才行的,不然接口请求会失败。

嘴笨 引入了 mock 了,有而是还只能 时间做模拟数据,就看具体效果,请稳步到我的网站上查看 https://biaochenxuying.cn

11. 项目地址与系列相关文章

基于 Vue + TypeScript + Element 的 blog-vue-typescript 前台展示: https://github.com/biaochenxuying/blog-vue-typescript

基于 react + node + express + ant + mongodb 的博客前台,你什儿 是笔者以前做的,效果和你什儿 类式,地址如下:

blog-react 前台展示: https://github.com/biaochenxuying/blog-react

推荐阅读 :

本博客系统的系列文章:

    1. react + node + express + ant + mongodb 的简洁兼时尚的博客网站
    1. react + Ant Design + 支持 markdown 的 blog-react 项目文档说明
    1. 基于 node + express + mongodb 的 blog-node 项目文档说明
    1. 服务器小白的我,是如可将node+mongodb项目部署在服务器上并进行性能优化的
    1. github 授权登录教程与如可设计第三方授权登录的用户表
    1. 一次网站的性能优化之路 -- 天下武功,唯快不破
    1. Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记

12. 最后

笔者也是初学 TS ,肯能文章有错的地方,请指出,感谢。

一开始英语 英文英文用 Vue + TS 来搭建时,我也是挺抵触的,肯能踩了好多坑,有而是而是有类型检查方面也挺烦人。底下处理了,明白原理以前,是越用越爽,哈哈。

权衡

如可更好的利用 JS 的动态性和 TS 的静态特质,亲戚亲戚亲戚亲戚朋友都还可不都都可否 结合项目的实际情形来进行综合判断。有些建议:

  • 肯能是中小型项目,且生命周期全是很长,那就直接用 JS 吧,不须被 TS 束缚住了手脚。
  • 肯能是大型应用,且生命周期比较长,那建议试试 TS。
  • 肯能是框架、库类式的公共模块,那更建议用 TS 了。

至于到底用可不都都可否 TS,还是要看实际项目规模、项目生命周期、团队规模、团队成员情形等实际情形综合考虑。

嘴笨 本项目也是小项目来的,嘴笨 不须太适合加入 TypeScript ,不过你什儿 项目是当时人的项目,是为了练手用的,而是有就无伤大大雅。

未来,class-compoent 也将成为主流,现在写 TypeScript 以前进行 3.0 的迁移会更加方便。

每天下班后,用十几个 晚上的时间来写这篇文章,码字不易,肯能您嘴笨 这篇文章不错肯能对你有所帮助,请给个赞肯能星吧,你的点赞而是继续创作的最大动力。

参考文章:

  1. vue + typescript 项目起手式

  2. TypeScript + 大型项目实战

  3. Vue全家桶+TypeScript使用总结