記一次用ts+vuecli4重構(gòu)項(xiàng)目的實(shí)現(xiàn)
項(xiàng)目背景：
一個(gè)以前的項(xiàng)目（ 剛?cè)肼殞?shí)習(xí)的時(shí)候?qū)懙?，用的vuecli2 ），然后這次要添加修改東西，看著代碼看的頭大，沖動(dòng)之下就重構(gòu)了（ 想打死自己，寫(xiě)的啥玩意 ），剛好用下最近剛學(xué)的typescript,從搭建開(kāi)始，一步步更新記錄下，怕自己之后忘了再回過(guò)頭來(lái)看看。（ 順便說(shuō)一句，用起來(lái)有點(diǎn)別扭，不過(guò)還是挺爽的，期待vue3.0... ）
一.項(xiàng)目搭建：
使用命令 vue create news 創(chuàng)建項(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)
具體可以看官網(wǎng)自己配置： 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', //打包時(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)有很多大佬寫(xiě)好了，前人種樹(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)有按模塊引入，就直接寫(xiě)了。
/* 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的寫(xiě)法
typescript的寫(xiě)法和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
寫(xiě)法：
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的類型斷言，所以上面的寫(xiě)法就是對(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：組件切換
以前的代碼(部分片段)
改造后：用component 用is去動(dòng)態(tài)判斷就行
<div class="haveClick> <component :is="echartsIndex" :obj="obj"/> </div>
槽點(diǎn)2：對(duì)象賦值
以前的代碼(部分片段)：
改造后：
//這樣寫(xiě)是因?yàn)閕nitObj還有別的key
for(let i in this.obj){
if(this.initObj(i)!=undefined){
this.initObj[i]=this.obj[i]
}
}
//或者
寫(xiě)一個(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})
}
到此這篇關(guān)于記一次用ts+vuecli4重構(gòu)項(xiàng)目的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)ts+vuecli4重構(gòu)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue彈窗Dialog最佳使用方案實(shí)戰(zhàn)
這篇文章主要為大家介紹了極度舒適的Vue彈窗Dialog最佳使用方案實(shí)戰(zhàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
typescript不僅可以約束我們的編碼習(xí)慣，還能起到注釋的作用，當(dāng)我們看到一函數(shù)后我們立馬就能知道這個(gè)函數(shù)的用法，需要傳什么值，返回值是什么類型一目了然，這篇文章主要介紹了Vue-cli3中使用TS語(yǔ)法示例代碼,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue中使用路由改瀏覽器標(biāo)題和圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
toRef 和 toRefs都是Vue3 中的響應(yīng)式轉(zhuǎn)換工具函數(shù),換句話說(shuō),toRef 和 toRefs 就是用來(lái)創(chuàng)建響應(yīng)式的引用的,主要用來(lái)取出響應(yīng)式對(duì)象里的屬性,或者解構(gòu)響應(yīng)式對(duì)象,本文小編就來(lái)帶大家搞清楚Vue3中toRef和toRefs的區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了在antd4.0中Form使用initialValue操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue中使用elementui實(shí)現(xiàn)樹(shù)組件tree右鍵增刪改功能
這篇文章主要介紹了vue中使用elementui實(shí)現(xiàn)對(duì)樹(shù)組件tree右鍵增刪改功能,右擊節(jié)點(diǎn)可進(jìn)行增刪改，對(duì)節(jié)點(diǎn)數(shù)據(jù)進(jìn)行模糊查詢功能，本文給大家分享了完整代碼，需要的朋友可以參考下2022-08-08
Vue3使用transition實(shí)現(xiàn)組件切換的過(guò)渡效果
<Transition> 是一個(gè)內(nèi)置組件,這意味著它在任意別的組件中都可以被使用,無(wú)需注冊(cè),它可以將進(jìn)入和離開(kāi)動(dòng)畫(huà)應(yīng)用到通過(guò)默認(rèn)插槽傳遞給它的元素或組件上,本文介紹了Vue3使用transition實(shí)現(xiàn)組件切換的過(guò)渡效果,需要的朋友可以參考下2024-09-09
Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁(yè)切換
這篇文章主要介紹了Vue實(shí)現(xiàn)點(diǎn)擊按鈕進(jìn)行上下頁(yè)的切換，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
在本篇文章中小編給大家整理的是一篇關(guān)于vue-devtools安裝使用的相關(guān)知識(shí)點(diǎn)內(nèi)容，有需要的朋友們可以學(xué)習(xí)下。2019-10-10
這篇文章主要介紹了vue中使用hover選擇器無(wú)效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10