Vue + TypeScript + Element 搭建简洁时尚的博客网站及..._CSDN博客

来自 : CSDN技术社区 发布时间：2021-03-25

http或者this.urls 时会报错的 那是因为 $http 和 $urls 属性 并没有在 vue 实例中声明。

再比如使用 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  Componentexport 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 下新建一个文件 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 /srcimport Footer from /components/footer // is an alias to /src

要修改为

import Nav from /components/nav.vue // is an alias to /srcimport 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  Componentexport default class LoadingCustom extends Vue {} /script 

6. 路由的组件导航守卫失效

vue-class-component 官网里面的路由的导航钩子的用法是没有效果的 Adding Custom Hooks

路由的导航钩子不属于 Vue 本身 这会导致 class 组件转义到配置对象时导航钩子无效 因此如果要使用导航钩子需要在 router 的配置里声明 网上别人说的 还没实践 不确定是否可行 。

7. tsconfig.json 的 strictPropertyInitialization 设为 false 不然你定义一个变量就必须给它一个初始值。

position: sticky;

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

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

position:sticky 是 css 定位新增属性 可以说是相对定位 relative 和固定定位 fixed 的结合 它主要用在对 scroll 事件的监听上 简单来说 在滑动过程中 某个元素距离其父元素的距离达到 sticky 粘性定位的要求时(比如 top 100px ) 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 /srcimport Slider from /components/slider.vue // is an alias to /srcimport Footer from /components/footer.vue // is an alias to /srcimport ArrowUp from /components/arrowUp.vue // is an alias to /srcimport { isMobileOrPc } from /utils/utils 

但是 还是会报如下的错

只是代码不影响文件的打包 而且本地与生产环境的代码也正常 没报错而已。

这个 eslint 的检测目前还没找到相关的配置可以把这些错误去掉。

9. 路由模式修改为 history

因为文章详情页面有目录 点击目录时定位定相应的内容 但是这个目录定位内容是根据锚点来做的 如果路由模式为 hash 模式的话 本来文章详情页面的路由就是 #articleDetail 了 再点击目录的话 比如 #title2 会在 #articleDetail 后面再加上 #title2 一刷新会找不到这个页面的。

10. Build Setup

 # clonegit clone https://github.com/biaochenxuying/blog-vue-typescript.git

# cdcd blog-vue-typescript

# install dependenciesnpm install

# Compiles and hot-reloads for developmentnpm run serve

# Compiles and minifies for productionnpm run build

### Run your testsnpm run test

### Lints and fixes filesnpm run lint

### Run your unit testsnpm 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

推荐阅读 :

本博客系统的系列文章

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

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

一开始用 Vue TS 来搭建时 我也是挺抵触的 因为踩了好多坑 而且很多类型检查方面也挺烦人。后面解决了 明白原理之后 是越用越爽 哈哈。

权衡

如何更好的利用 JS 的动态性和 TS 的静态特质 我们需要结合项目的实际情况来进行综合判断。一些建议

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

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

其实本项目也是小项目来的 其实并不太适合加入 TypeScript 不过这个项目是个人的项目 是为了练手用的 所以就无伤大大雅。

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

每天下班后 用几个晚上的时间来写这篇文章 码字不易 如果您觉得这篇文章不错或者对你有所帮助 请给个赞或者星吧 你的点赞就是我继续创作的最大动力。

参考文章:

vue typescript 项目起手式

TypeScript 大型项目实战

欢迎关注以下公众号 学到不一样的 武功秘籍

关注公众号并回复 福利 可领取免费学习资料 福利详情请猛戳 免费资源获取–Python、Java、Linux、Go、node、vue、react、javaScript