记一次用ts+vuecli4重构项目的实现


Posted in Javascript onMay 21, 2020

项目背景:

一个以前的项目( 刚入职实习的时候写的,用的vuecli2 ),然后这次要添加修改东西,看着代码看的头大,冲动之下就重构了( 想打死自己,写的啥玩意 ),刚好用下最近刚学的typescript,从搭建开始,一步步更新记录下,怕自己之后忘了再回过头来看看。( 顺便说一句,用起来有点别扭,不过还是挺爽的,期待vue3.0...

一.项目搭建:

使用命令   vue create news 创建项目

配置自定义,贴一下我自定义的安装依赖     

记一次用ts+vuecli4重构项目的实现

ts+vuex+router这几个肯定是要的,这里的css我选择的是scss,unit测试也来一个

之后一些的选项就自己选择

3. 搭建好后目录就是这样

├── 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               // 主目录

  ├── api             // 接口

  ├── assets           // 静态资源

  ├── filters           // 过滤

  ├── store            // vuex 配置

  ├── styles           // 样式

  ├── 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.js是ts的配置项

具体可以看官网自己配置: https://www.tslang.cn/docs/handbook/compiler-options.html

4.初步修改vue.config.js

const path = require("path");
const webpack = require('webpack');

function resolve(dir) {
 return path.join(__dirname, dir)
}
const router='http://xxx.xxx.xxx'

module.exports = {
 publicPath: "./",  //基本路径
 outputDir: 'dist', //打包时生成的文件夹
 lintOnSave: process.env.NODE_ENV === 'development', 
 productionSourceMap: process.env.NODE_ENV === 'development', 
 devServer: {
  port: 8080,
  open: true,
  proxy: {
   '/test': {
    target: router,
    changeOrigin: true
   }
  }
 },
 configureWebpack: {
  name: process.env.VUE_APP_NAME,
  resolve: {
   alias: {
    '@': resolve('src'),
   }
  },
  externals: {},
  plugins: [],
 },
}

至此,项目初步搭建完成,然后就开始封装安装插件

二. 安装插件和基本内容填充

这里我使用 的element-ui,echarts, babel-polyfill,jquery等

这里有个注意的,在typescript 中使用jquery,echarts等插件的 时候,必须要安装对应的声明文件,当然typescripe社区已经有很多大佬写好了,前人种树,后人乘凉复制代码

什么是声明文件:

https://github.com/xcatliu/typescript-tutorial/blob/master/basics/declaration-files.md

声明文件搜索地址: microsoft.github.io/TypeSearch/

untils 文件夹(可以放一些常用的工具函数,节流、防抖、localStorage等)                    

这个里面我存放了一些工具函数,date函数,axios的封装等

styles 文件夹  (存放全局scss文件)

这里面除了初始化一些样式外,我还定义了一些常亮,例如导航栏的高度,颜色等,便于          好改

router 文件夹(懒加载)

因为这个系统权限之类的并没有很复杂,路由也不是很多,就没有按模块引入,就直接写了。

/* webpackChunkName: "login" */  /*这里名字是什么,打包出来的名字就是什么*/ 
{
  path: '/',
  name: 'login',  
  component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue'),
  meta: {
   title:'登录页'
   keepAlive: false,
  }
 },
 {
  path: "/home",
  name: "home",
  redirect: "/homepage",    
  component: () => import(/* webpackChunkName: "home" */"@/views/Home.vue"),
  children: [
   {
    path: "/homepage",
    component: () => import(/* webpackChunkName: "homepage" */ "@/views/homepage/index.vue"),
    name: "homepage",
    meta: {
     title: "首页", keepAlive: true
    }
   }, 
  ]
}

api  文件夹

根据不同模块的接口,去建不同的文件

三.vue中typescript的写法

typescript的写法和vue差不多,只是script的区别,例:

import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
@Component({ 
  name: 'homepage', 
  components: {}
})

export class MyComponent extends Vue { 
 @Prop({ default: '' }) private name!: string 
 @Watch('name', { deep: true }) 
 changeName(newVal,olVal){}

  //data
  private count:number=5
  private arr:string[]=[]
  mounted(){}

  //methods
  private test(){}
}

四.typescript使用中的问题

1.获取refs 

写法:

let layoutList:any = this.$refs.layout as HTMLDivElement

2.引用插件,且找不到声明文件或引用Json文件

在shims-vue.d.ts 文件中声明,再在组件中引用

declare module "*.json" { 
  const value: any; 
  export default value;
}
declare module "vue-count-to" { 
  const count: any; 
  export default count;
}

页面里面

import * as myJson from '../../../public/test.json'

使用  myJson.default

3.计算属性

get age() { 
  return this.aTagDatasF.filter(item => item.visible)
}

4.@prop

@Prop()private datas!: any

感叹号是非null和非undefined的类型断言,所以上面的写法就是对datas这个属性进行非空断言

5.引入vue组件时,后面必须加  .vue

6.定义接口类型,前面加 I,例如,接口尽量定义类型,规范管理

interface IUserInfo{
  name:string,
  index:number
}

7.定义全局变量(可以用vuex取代)

在.ts文件里面  

export var User:IUserInfo={  
  name:'111',
  index:996
}

其他页面import ,然后 就可以获取到这个值

8.强行让ts不检测

//@ts-ignore  下一行不检测

五.开始改造页面代码(开始吐槽自己)

槽点1:组件切换

以前的代码(部分片段)

记一次用ts+vuecli4重构项目的实现

改造后:用component   用is去动态判断就行

<div class="haveClick>
  <component :is="echartsIndex" :obj="obj"/>
</div>

槽点2:对象赋值

以前的代码(部分片段):

记一次用ts+vuecli4重构项目的实现

改造后:

//这样写是因为initObj还有别的key

for(let i in this.obj){
  if(this.initObj(i)!=undefined){ 
   this.initObj[i]=this.obj[i]
  }
}

//或者  
 写一个函数,如果key值一样就赋值

槽点3:switch case 判断之前的代码:

//片段,有十几个case

optionList:['饼图','柱状图','折线图','...']

筛选下拉后,aa为index
switch (aa) {
    case 0: this.getData() break;
    case 1: this.avgBqzs() break;
    case 2: this.areaCount() break;
    case 3: this.yiqing() break;
    case 4: this.avgFinish() break;
 }

修改后:

private optionList=[{
  title:'饼图', 
  type:'getData'
},{ 
  title:'柱状图',
  type:'avgBqzs'}
 ......
] 
下拉后,用change事件获取 item (这里就不获取index了)
例如:
changeSelect(item:any){
  //当然这里不能通过ts的编译  @ts-ignore
  this[item.type]()}

六.个人项目规范

1.尽量不要使用for,使代码观赏性更高   

forEach 遍历 , map转换,filter 过滤

2.调接口使用 尽量 async和await来调用接口

例如:

private async getData() {  
  const { data } = await getTransactions({})
}

3.只需要部分筛选条件的时候用解构去获取值

public sizeTop={
 id:'',
 City:'',
 County:'',
 time:''
}

const {City,County}=this.sizeTop

 private async getData() {  
  const { data } = await getTransactions({City,County})
 }

到此这篇关于记一次用ts+vuecli4重构项目的实现的文章就介绍到这了,更多相关ts+vuecli4重构内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js 验证密码强弱的小例子
Mar 21 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
js弹窗返回值详解(window.open方式)
Jan 11 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
jQuery拖动元素并对元素进行重新排序
Dec 30 Javascript
js 轮播效果实例分享
Dec 28 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
Jun 04 Javascript
bootstrap是什么_动力节点Java学院整理
Jul 14 Javascript
input 标签实现输入框带提示文字效果(两种方法)
Oct 09 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
JS实现字符串去重及数组去重的方法示例
Apr 21 Javascript
JS实现图片幻灯片效果代码实例
May 21 #Javascript
Javascript实现秒表计时游戏
May 27 #Javascript
JavaScript实现猜数字游戏
May 20 #Javascript
Vue 打包体积优化方案小结
May 20 #Javascript
vue实现输入框自动跳转功能
May 20 #Javascript
vue通过v-html指令渲染的富文本无法修改样式的解决方案
May 20 #Javascript
精读《Vue3.0 Function API》
May 20 #Javascript
You might like
PHP脚本数据库功能详解(下)
2006/10/09 PHP
PHP文件读写操作之文件写入代码
2011/01/13 PHP
Yii2 rbac权限控制之菜单menu实例教程
2016/04/28 PHP
深入理解PHP之OpCode原理详解
2016/06/01 PHP
JavaScript Event学习第二章 Event浏览器兼容性
2010/02/07 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
2012/11/19 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
学习JavaScript设计模式(代理模式)
2015/12/03 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
js canvas实现擦除效果示例代码
2017/04/26 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
Angular-UI Bootstrap组件实现警报功能
2018/07/16 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
JavaScript中的this妙用实例分析
2020/05/09 Javascript
[01:07:53]RNG vs VG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
python实现壁纸批量下载代码实例
2018/01/25 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python进程和线程用法知识点总结
2019/05/28 Python
Python 使用元类type创建类对象常见应用详解
2019/10/17 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
幼师自荐信范文
2013/10/06 职场文书
法学研究生自我鉴定范文
2013/12/04 职场文书
幼儿园教师的自我评价范文
2014/09/17 职场文书
外贸英文求职信范文
2015/03/19 职场文书
表扬信范文
2015/05/04 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
某药房的新员工入职告知书!
2019/07/15 职场文书
PHP设计模式(观察者模式)
2021/07/07 PHP
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL