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

前言

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

 

四个方面

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.准备下载[email protected]以上版本

• 我使用的是vue-typescript-admin-template这个模板，是一个后台前端解决方案，它基于 vue, typescript 和 element-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复制代码

• 果然可以下载了，不过又出现一个报错信息：

• 

• 意思是：[email protected]版本太高了，可能跟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运行

• 

• 现在下载成功，运行也成功，但是[email protected]的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/684490…

 

参考

vue-typescript-admin-template

Typescript+Vue大型后台管理系统实战 ：juejin.im/post/684490…  

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

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

作者：git-Dignity
链接：https://juejin.cn/post/6844904115349241863
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。