溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了如何實現ts+vuecli4重構項目，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
項目背景：
一個以前的項目（ 剛入職實習的時候寫的，用的vuecli2 ），然后這次要添加修改東西，看著代碼看的頭大，沖動之下就重構了（ 想打死自己，寫的啥玩意 ），剛好用下最近剛學的typescript,從搭建開始，一步步更新記錄下，怕自己之后忘了再回過頭來看看。（ 順便說一句，用起來有點別扭，不過還是挺爽的，期待vue3.0... ）
一.項目搭建：
使用命令 vue create news 創建項目
配置自定義，貼一下我自定義的安裝依賴
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的配置項
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：組件切換
以前的代碼(部分片段)
改造后：用component 用is去動態判斷就行
<div class="haveClick> <component :is="echartsIndex" :obj="obj"/> </div>
槽點2：對象賦值
以前的代碼(部分片段)：
改造后：
//這樣寫是因為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重構項目有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
