阅读 676

vue-typescript-admin-template后台管理系统

前言

  • 之前都是用2.9.6@vue-cli写的【音乐博客】
  • 因为vue-cli@3.0早早就发布了,怕到时候面试的时候问到不懂,略显尴尬,所以趁着有空余的时间来学习学习
  • 刚好也可以将项目升级一下,用下大佬写的框架


四个方面

1.升级vue-cli到3.0以上版本

  • Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
  • 因为我电脑的vue-cli是2.9.6版本,所以需要卸载然后重新安装新版本
  • 卸载vue-cli:

    npm uninstall vue-cli -g复制代码
  • 安装vue-cli:

    npm install -g @vue/cli复制代码
  • 显示安装成功,如何证明: 

    vue --version @vue/cli 4.2.3复制代码
  • OK,我们现在已经是4.2.3版本了

2.准备下载vue-cli@3.0以上版本

  • 我使用的是vue-typescript-admin-template这个模板,是一个后台前端解决方案,它基于 vue, typescriptelement-ui实现
    原始的 Javascript 版本的代码是由 PanJiaChen 开发维护的 vue-element-admin,里面有功能丰富的集成方案
    GitHub传送门:github.com/Armour/vue-…
  • 如果你想从一个十分简单的基础模版开始,而不是直接使用这个功能丰富的集成方案的话,你可以看一看本项目的 minimal 分支
    GitHub传送门:github.com/Armour/vue-…
  • 该系统的dos文档:armour.github.io/vue-typescr…
  • 项目下载下来:

    npm install复制代码

  • 可能会报错,报错信息:

  • 结果百度排查之后,找到了该作者下的vue-element-admin文档

  • 科普一下,我们现在使用的vue-typescript-admin-template这个模板是PanJiaChen 开发维护的 vue-element-admin作者,他也有写vue-element-admin

  • 所以我在他原始的vue-element-admin文档发现解决方案,因为都是同一个作者写的,报错解决问题还是有点类似,死马当活马医,抱着试试看的心态!

  • 文档:github.com/PanJiaChen/…

  • 不卖关子了,把npm i 换成 cnpm i来下载依赖,就可以解决npm i下载失败的问题

  • 安装cnpm:

  • npm install -g cnpm --registry=https://registry.npm.taobao.org复制代码
  • 果然可以下载了,不过又出现一个报错信息:

  • 意思是:fibers@4.0.2版本太高了,可能跟node版本有关,所以我的解决方案是在项目把package.json的"fibers": "^3.0.2"改为3.0.2即可


  • 现在我们在来cnpm install 下载


  • 很好,现在已经下载成功,可以npm run serve运行看看

  • 总结:把项目下载下来之后,先npm i,然后在cnpm i ,然后再去package.json把fibers版本换成“3.0.2”,即可npm run serve运行


  • 现在下载成功,运行也成功,但是vue@3.0的eslint 开启校验代码,一直提示着,个人看着有点不爽,我决定把他关闭掉

  • 找到 .eslintrc.js文件,将extends修改为以下配置:

'extends': [
     'eslint:recommended',
     'plugin:vue/recommended',
     // '@vue/standard',
     '@vue/typescript'
],


// @vue/standard,这个注释掉就可以了,记得改完重新npm run serve一下


3.将请求接口改为我们自己的接口



  • 好,我们改好请求接口,现在我们试着登录一下

  • 结果很正常的报了个错,早已习惯,我们来看看什么错


  • 百度一下第一个错误:翻译过来:“数据函数应返回一个对象”,既然我们是点击登录按钮就报错,那我们看看登录按钮触发的事件:我试着把跳转路由那段注释掉,结果就不报错,所以很明显,跳转路由报错了。

  • 页面在:src\views\login\index.vue


  • 页面在:src\store\modules\user.ts


  • 这里也顺便贴一下后台node的代码


  • 注意:改完配置,要重新启动一下npm run serve

4. 项目运行时一直发http://localhost:8080/sockjs-node/info?t=1462183700002请求

  • 此库是关于sockJs-node报错的,因为没有和服务端那边的地址一致,即这个接口地址不正确。vue.config里配置devServer的host和port为与项目启动的服务地址一致即可
  • 这个地址服务地址要和项目启动地址相同;
    若是通过webpackDevServer api 配置的hmr入口地址,则地址默认为webpackDevServe配置项里的host, 如未设置默认 localhost,则两者地址不同
  • 我遇到的问题就是webpackDevServe里没配置host, 而项目启动用的是192.168.x.x ,这样实际上localhost:8080/sockjs-node/info实际上不存在,所以会报错 请求failed
  • 解决方案
  •  devServer: { 
        host: 'localhost',
        .......
    }复制代码

  • 加上localhost就不会报错了
  • 如果无法解决,请移步:segmentfault.com/q/101000000…

原文地址

juejin.im/post/5e7f6c…


参考

vue-typescript-admin-template

Typescript+Vue大型后台管理系统实战 :juejin.im/post/5e1bb2…  

vue-cli3 中停 tslint:www.jianshu.com/p/ee78b9ca2…

项目运行时一直发http://localhost:8080/sockjs-node/info?t=1462183700002请求:segmentfault.com/q/101000000…


关注下面的标签,发现更多相似文章
评论