溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何實(shí)現(xiàn)ts+vuecli4重構(gòu)項(xiàng)目

發(fā)布時(shí)間：2020-07-23 09:37:57 來(lái)源：億速云 閱讀：323 作者：小豬 欄目：web開(kāi)發(fā)

這篇文章主要講解了如何實(shí)現(xiàn)ts+vuecli4重構(gòu)項(xiàng)目，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

項(xiàng)目背景：

一個(gè)以前的項(xiàng)目（ 剛?cè)肼殞?shí)習(xí)的時(shí)候?qū)懙模玫膙uecli2 ），然后這次要添加修改東西，看著代碼看的頭大，沖動(dòng)之下就重構(gòu)了（ 想打死自己，寫的啥玩意 ），剛好用下最近剛學(xué)的typescript,從搭建開(kāi)始，一步步更新記錄下，怕自己之后忘了再回過(guò)頭來(lái)看看。（ 順便說(shuō)一句，用起來(lái)有點(diǎn)別扭，不過(guò)還是挺爽的，期待vue3.0... ）

一.項(xiàng)目搭建：

使用命令   vue create news 創(chuàng)建項(xiàng)目

配置自定義，貼一下我自定義的安裝依賴     

如何實(shí)現(xiàn)ts+vuecli4重構(gòu)項(xiàng)目

ts+vuex+router這幾個(gè)肯定是要的，這里的css我選擇的是scss，unit測(cè)試也來(lái)一個(gè)

之后一些的選項(xiàng)就自己選擇

3. 搭建好后目錄就是這樣

├── public             // 靜態(tài)頁(yè)面

├── src               // 主目錄

  ├── assets           // 靜態(tài)資源

  ├── components         // 組件

  ├── views            // 頁(yè)面

  ├── App.vue           // 頁(yè)面主入口

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

  ├── router.ts          // 路由

  ├── shims-tsx.d.ts       // 相關(guān) tsx 模塊注入

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

  └── store.ts          // vuex 配置

├── tests              // 測(cè)試用例

├── .eslintrc.js          // eslint 相關(guān)配置

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

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

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

├── package.json          // 依賴

└── tsconfig.json          // ts 配置

想著為了以后更好的維護(hù)，就修改了一下目錄結(jié)構(gòu)

├── public             // 靜態(tài)頁(yè)面

├── src               // 主目錄

  ├── api             // 接口

  ├── assets           // 靜態(tài)資源

  ├── filters           // 過(guò)濾

  ├── store            // vuex 配置

  ├── styles           // 樣式

  ├── utils            // 工具方法(axios封裝，全局方法等)

  ├── views            // 頁(yè)面

  ├── App.vue           // 頁(yè)面主入口

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

  ├── router.ts          // 路由

  ├── shime-global.d.ts      // 相關(guān) 全局或者插件 模塊注入

  ├── shims-tsx.d.ts       // 相關(guān) tsx 模塊注入

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

├── tests              // 測(cè)試用例

├── .eslintrc.js          // eslint 相關(guān)配置

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

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

├── babel.config.js         // preset 記錄

├── package.json          // 依賴

├── README.md            // 項(xiàng)目 readme

├── tsconfig.json          // ts 配置

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

tsconfig.js是ts的配置項(xiàng)

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', //打包時(shí)生成的文件夾
 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: [],
 },
}

至此，項(xiàng)目初步搭建完成，然后就開(kāi)始封裝安裝插件

二. 安裝插件和基本內(nèi)容填充

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

這里有個(gè)注意的，在typescript 中使用jquery，echarts等插件的 時(shí)候,必須要安裝對(duì)應(yīng)的聲明文件，當(dāng)然typescripe社區(qū)已經(jīng)有很多大佬寫好了，前人種樹(shù)，后人乘涼復(fù)制代碼

什么是聲明文件：

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

聲明文件搜索地址： microsoft.github.io/TypeSearch/

untils 文件夾（可以放一些常用的工具函數(shù)，節(jié)流、防抖、localStorage等）                    

這個(gè)里面我存放了一些工具函數(shù)，date函數(shù)，axios的封裝等

styles 文件夾  （存放全局scss文件）

這里面除了初始化一些樣式外，我還定義了一些常亮，例如導(dǎo)航欄的高度，顏色等，便于          好改

router 文件夾（懶加載）

因?yàn)檫@個(gè)系統(tǒng)權(quán)限之類的并沒(méi)有很復(fù)雜，路由也不是很多，就沒(méi)有按模塊引入，就直接寫了。

 /* webpackChunkName: "login" */  /*這里名字是什么，打包出來(lái)的名字就是什么*/ 
{
  path: '/',
  name: 'login',  
  component: () => import(/* webpackChunkName: "login" */ '@/views/login/index.vue'),
  meta: {
   title:'登錄頁(yè)'
   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: "首頁(yè)", keepAlive: true
    }
   }, 
  ]
}

api  文件夾

根據(jù)不同模塊的接口，去建不同的文件

三.vue中typescript的寫法

typescript的寫法和vue差不多，只是script的區(qū)別，例：

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使用中的問(wèn)題

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;
}

頁(yè)面里面

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

使用  myJson.default

3.計(jì)算屬性

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

4.@prop

@Prop()private datas!: any

感嘆號(hào)是非null和非undefined的類型斷言，所以上面的寫法就是對(duì)datas這個(gè)屬性進(jìn)行非空斷言

5.引入vue組件時(shí)，后面必須加  .vue

6.定義接口類型，前面加 I,例如，接口盡量定義類型，規(guī)范管理

interface IUserInfo{
  name:string,
  index:number
}

7.定義全局變量(可以用vuex取代)

在.ts文件里面  

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

其他頁(yè)面import ，然后 就可以獲取到這個(gè)值

8.強(qiáng)行讓ts不檢測(cè)

//@ts-ignore  下一行不檢測(cè)

五.開(kāi)始改造頁(yè)面代碼（開(kāi)始吐槽自己）

槽點(diǎn)1：組件切換

以前的代碼(部分片段)

如何實(shí)現(xiàn)ts+vuecli4重構(gòu)項(xiàng)目

改造后：用component   用is去動(dòng)態(tài)判斷就行

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

槽點(diǎn)2：對(duì)象賦值

以前的代碼(部分片段)：

如何實(shí)現(xiàn)ts+vuecli4重構(gòu)項(xiàng)目

改造后：

//這樣寫是因?yàn)閕nitObj還有別的key

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

//或者  
 寫一個(gè)函數(shù),如果key值一樣就賦值

槽點(diǎn)3：switch case 判斷之前的代碼：

//片段,有十幾個(gè)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){
  //當(dāng)然這里不能通過(guò)ts的編譯  @ts-ignore
  this[item.type]()}

六.個(gè)人項(xiàng)目規(guī)范

1.盡量不要使用for,使代碼觀賞性更高   

forEach 遍歷 , map轉(zhuǎn)換，filter 過(guò)濾

2.調(diào)接口使用 盡量 async和await來(lái)調(diào)用接口

例如：

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

3.只需要部分篩選條件的時(shí)候用解構(gòu)去獲取值

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

const {City,County}=this.sizeTop

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

看完上述內(nèi)容，是不是對(duì)如何實(shí)現(xiàn)ts+vuecli4重構(gòu)項(xiàng)目有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手