Vue + TypeScript 踩坑總結

本文轉載自查看原文 2019-12-09 22:00 6513 TypeScript/ 坑點總結/ vue/ Javascript

Vue+TS 踩坑記錄與方案總結

前言

vue 和 TypeScript 結合的情況下，很多寫法和我們平時的寫法都不太一樣，這里總結我項目開發過程中遇到的問題和問題的解決方案
有些問題可能還沒解決，歡迎各位大佬給與提點。
另外，使用本文前可以先看vue 官方文檔關於 typescript 的使用講解

整個 vue 項目的目錄結構

大體用 vue-cli 創建的項目，結構基本不變。

這里只寫我后來為了解決問題改動的地方

main.ts 中，提示`import App from './App.vue'`處，找不到 App.vue 這個模塊

解決方案： 1、將 shims-vue.d.ts 文件一分為二。
2、在 shims-vue.d.ts 文件同級目錄下新建 vue.d.ts（名字不一定叫 vue，如 xxx.d.ts 也可以），然后此文件包含代碼如下

// vue.d.ts
declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

3、而原來的 shims-vue.d.ts 代碼修改、新增如下：

// shims-vue.d.ts
import Vue from 'vue'
import VueRouter, { Route } from 'vue-router'
import { Store } from 'vuex'
declare module 'vue/types/vue' {
 interface Vue {
 $router: VueRouter;
 $route: Route;
 $store: Store<any>;
 // 以下是在main.ts中掛載到Vue.prototype上的變量
 $api: any;
 $mock: any;
 $configs: any;
 }
 }

main.ts 中，往 Vue 的原型 prototype 上掛載全局變量

1、main.ts 配置

// main.ts
import api from "./api/request";
import mock from "./api/mock";
import configs from "./utils/config";
Vue.prototype.\(api = api; Vue.prototype.\)mock = mock;
 Vue.prototype.$configs = configs;

2、shims-vue.d.ts 配置

// shims-vue.d.ts 新增如下
declare module 'vue/types/vue' {
  interface Vue {
    // ...
    // 以下是在main.ts中掛載到Vue.prototype上的變量
    $api: any;
    $mock: any;
    $configs: any;
  }
}

全局組件注冊

注冊

// main.ts
import Page from "@/components/page.vue";
import AllComponent from "@/common/AllComponent.vue";
Vue.component("Page", Page);
Vue.component("all-component", AllComponent);

使用

寫法一：
<Page />
寫法二：
<all-component />

SFC 單 vue 文件組件的基本寫法和結構

一個簡陋的 demo，展示 ts 下的 vue 文件中，對於相關功能的使用，重點關注<Script>里的代碼

<template>
  <!-- 結構示例，指令基礎用法同vue -->
  <div class="minos-system-setting" v-if="hideHeader">
    <h3>結構示例</h3>
    <span>{{ selfKey1 }}</span>
    <ul>
      <li :key="item" v-for="item in fatherKey">{{ item }}</li>
    </ul>
    <button @click="addText">追加文字</button>
    <AnotherVue :class="['default-class', selfKey1.length > 10 ? 'one' : 'two']" />
  </div>
</template>
<script lang="ts">
 import { Component, Vue, Prop, Watch } from "vue-property-decorator";
 import { Route } from "vue-router";
 import AnotherVue from "@/components/AnotherVue.vue";
 @Component({
 // 組件注冊
 components: {
 AnotherVue
 // 'another-vue': AnotherVue
 },
 // 過濾器
 filters: {
 filterFn1() {}
 },
 // 屬性傳遞
 props: {
 hideHeader: {
 type: Boolean,
 required: false,
 default: false // 默認屬性的默認值
 }
 }
 })
 export default class ComponentName extends Vue {
 @Prop({
 type: Boolean,
 required: false,
 default: false // 默認屬性的默認值
 })
 private hideHeader!: boolean | undefined;
 @Prop() private fatherKey: string[]; // 其他沒有默認值的傳值
 selfKey1: string = "自己的一個變量";
 // 生命周期
 created() {}
 mounted() {}
 // 計算屬性
 get computedKey() {
 return this.selfKey1.length;
 }
 // 監聽器
 @Watch("computedKey")
 getcomputedKey(newVal) {
 console.log(newVal);
 }
 // 導航守衛函數
 private beforeRouteEnter(to: Route, from: Route, next: () => void): void {
 console.log("beforeRouteEnter", to, from, next);
 next();
 }
 // 方法
 addText() {
 this.selfKey1 += "，追加文字！";
 }
 }
 </script>
 <style lang="scss" scoped>
 @import "@/assets/styles/demo.scss";
 </style>

computed 計算屬性的寫法

// 計算屬性
get computedKey() {
  return this.selfKey1.length
}

watch 監聽器的使用

同一個 vue 頁面中使用

import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
@Watch('boxHeight')
 getboxHeight(val) { // get+上邊括號里的名字
 // xxx
 }

父子兩個 vue 頁面傳值后使用 watch 監聽

子組件監聽從父組件傳過來的值 1、父組件用屬性傳值【前提是父組件引入子組件、注冊並調用了】

<ziZuJian :oneKey="oneKeyObj" />

2、子組件要使用的工具引入工作

import { Component, Vue, Prop, Watch } from "vue-property-decorator";

3、子組件 Prop 接受

export default class ZiZuJian extends Vue {
  @Prop() private oneKey: object
}

4、子組件 Watch 監聽

@Watch('oneKey')
getoneKey(newVal,oldVal) {
  // 監聽成功后要做
  log(newVal)
  this.myfunction(newVal)
}

5、父組件（內部）改動值，會被子組件監聽

export default class FuZuJian extends Vue {
  oneKeyObj = {}
  ...
  mounted(){
    $.ajax().then(()=>{
      // 適時情況下改動props傳遞的值，就會被子組件監聽到改變
      oneKeyObj = {
        name : '測試'
      }
      oneKeyObj.age = 18
    })
  }
}

Watch 監聽 store 中的數據改變

主要思路是計算屬性獲取 state 里的數據，watch 再監聽計算屬性

import { Component, Vue, Prop, Watch } from 'vue-property-decorator' // 引入Watch
get stateSomeKey() { // 計算屬性
  // 監聽state下的stateSomeKey對象中的keyName屬性，return返回該值
  return this['$store'].state.stateSomeKey.keyName
}
@Watch('stateSomeKey') // 與上邊計算屬性同名
getstateSomeKey(val) { // get+上邊括號里的名字
  // 監聽到變化后，執行對應的內容
  this.myFunction()
  ...
}

其中，第七行，監聽器那里也可以這麽寫

@Watch('stateSomeKey') // 與上邊計算屬性同名
watchMenuState(val) { // 這里可以這么寫：或用watch+上邊括號里的名字也可以（雖然不太確定為什么，只是代碼這么寫成功了）
  // 下同
  // ...
}

vue+ts 中，使用 filter 過濾器

定義：（在@Component 里邊，寫 filters，注意 s 單詞）

<script lang="ts"> import { Component, Vue, Prop } from "vue-property-decorator"; @Component({ filters: { filterValue(value) { return Number(value).toLocaleString(); } // otherFilterFn(value) { 其他filter示例 // return ... // } }, components: {} }) export default class Container extends Vue { // ... } </script>

使用：同之前，正常使用：

<span v-if="showSpan">{{showValue | filterValue}}</span>

自定義指令過濾器【待補充】

// 待補充

watch 監聽 router 的變化

1、shims-vue.d.ts 的設置

// shims-vue.d.ts
import Vue from 'vue'
import VueRouter, {Route} from 'vue-router';
declare module 'vue/types/vue' {
 interface Vue {
 $router: VueRouter; // 這表示this下有這個東西
 $route: Route;
 }
 }

2、main.ts 的設置

// main.ts
import { Component } from "vue-class-component";
Vue.config.productionTip = false;
Component.registerHooks([
  "beforeRouteEnter", //進入路由之前
  "beforeRouteLeave", //離開路由之前
  "beforeRouteUpdate"
]);

3、需要監聽路由鈎子的 SCF 組件：

<script lang="ts"> // xxx.vue 的script標簽內 import { Component, Vue, Prop, Watch } from "vue-property-decorator"; import { Route, RawLocation } from 'vue-router'; // # 下邊兩段，看你需要什么了： // 1/監聽路由變化
 @Watch('$route',{ immediate: true })
 private changeRouter(route: Route){
 console.log(route)
 }
 // 2/定義路由鈎子函數
 private beforeRouteEnter(to: Route, from: Route, next: () => void): void {
 console.log('beforeRouteEnter', to, from, next)
 next(); // 沒有next將不會進入路由內部，跟vue文檔用法一致
 }
 private beforeRouteUpdate(to: Route, from: Route, next: () => void): void {
 console.log('beforeRouteUpdate'); // 暫時不生效，版本問題
 next();
 }
 private beforeRouteLeave(to: Route, from: Route, next: () => void): void {
 console.log('beforeRouteLeave');
 next();
 }
 </script>

監聽路由的第二種寫法 (如果只是想更新視圖的話可以考慮監聽路由)

@Watch('$route')
routeWatch() {
	this.loadData();
}

main.ts 中注冊路由導航守衛並在組件中使用路由鈎子函數

基本同上
1、shims-vue.d.ts 的設置

// shims-vue.d.ts
import Vue from 'vue'
import VueRouter, {Route} from 'vue-router';
declare module 'vue/types/vue' {
 interface Vue {
 $router: VueRouter; // 這表示this下有這個東西
 $route: Route;
 }
 }

2、main.ts 的設置

// main.ts
import { Component } from "vue-class-component";
Component.registerHooks([
  "beforeRouteEnter", //進入路由之前
  "beforeRouteLeave", //離開路由之前
  "beforeRouteUpdate"
]);

3、需要監聽路由鈎子的 SCF 組件：

<script lang="ts"> // xxx.vue 的script標簽內 import { Component, Vue, Prop, Watch } from "vue-property-decorator"; import { Route, RawLocation } from 'vue-router'; // # 下邊兩段，看你需要什么了： // 1/監聽路由變化
 @Watch('$route',{ immediate: true })
 private changeRouter(route: Route){
 console.log(route)
 }
 // 2/定義路由鈎子函數
 private beforeRouteEnter(to: Route, from: Route, next: () => void): void {
 console.log('beforeRouteEnter', to, from, next)
 next(); // 沒有next將不會進入路由內部，跟vue文檔用法一致
 }
 private beforeRouteUpdate(to: Route, from: Route, next: () => void): void {
 console.log('beforeRouteUpdate'); // 暫時不生效，版本問題
 next();
 }
 private beforeRouteLeave(to: Route, from: Route, next: () => void): void {
 console.log('beforeRouteLeave');
 next();
 }
 </script>

父子傳值 - 子組件修改觸發父組件的方法執行

父組件內部：
1、調用子組件、並綁定傳值：

<ZiZuJian @chuanDiGuoQu="FuQinZiJiYong"></ZiZuJian>

准備好一會會被子組件觸發的函數：

FuQinZiJiYong(){
  console.log('我是父親內部待被觸發的方法')
}

子組件 ZiZuJian 內部在需要觸發的地方執行$emit

export default class Menu extends Vue {
  // 在需要觸發的地方，執行如下代碼
  this.$emit('chuanDiGuoQu', '')
}

最后還有另一種網友總結很麻煩的寫法：參見地址

@Prop 默認參數

第一種：github 找到的 demo 這樣。如下代碼中hideHeader就是由默認參數的父組件傳過來的屬性

export default class ComponentName extends Vue {
  @Prop({
    type: Boolean,
    required: false,
    default: false // 默認屬性的默認值
  })
  private hideHeader!: boolean | undefined
}

第二種：vue 原生的寫法，並寫到了@component 構造器中就好了：如果不傳值此函數默認就是 true，傳 false 就是 false 了。並且能嚴格判斷只能傳 Boolean 類型。挺好。

@Component({
  props: {
    hideHeader: {
      type: Boolean,
      required: false,
      default: false // 默認屬性的默認值
    }
  }
})

中央總線注冊與使用【待解決】

// 待解決

vue + ts 中使用 vue-echarts

安裝

npm i -S vue-echarts echarts

main.ts 中引入並注冊

// main.ts
// 引用
import ECharts from "vue-echarts";
// 用到的模塊要單獨引用
import "echarts/lib/chart/line"; // 線圖為例，其他圖一樣
import "echarts/lib/component/title.js"; // 標題
import "echarts/lib/component/legend"; // 圖例
import "echarts/lib/component/tooltip"; // 提示框
import "echarts/lib/component/toolbox"; // 工具（如下載功能與按鈕）
// 注冊
 Vue.component("v-chart", ECharts);

vue.config.js 中設置

// vue.config.js
module.exports = {
  // For Vue CLI 3+, add vue-echarts and resize-detector into transpileDependencies in vue.config.js like this:
  transpileDependencies: ["vue-echarts", "resize-detector"]
};

tsconfig.json 中也要設置

// tsconfig.json
{
  "compilerOptions": {
    "types": ["webpack-env", "echarts"]
  }
}

SFC 應用

<v-chart :options="echartsOptions" id="myCharts" ref="myCharts" />

vue + ts 中使用 Element-ui

// main.ts
import ElementUI from "element-ui";
Vue.use(ElementUI);

全局 scss 變量

在 assets/styles 下新建_variable.scss 文件，用於存放 scss 變量。
然后再 vue.config.js 中設置全局變量

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: ` @import "@/assets/styles/_variable.scss"; `
      }
    }
  }
};

alias 別名設置

同時解決問題alias 配置的路徑別名，在 vscode 中報錯模塊查找失敗和問題vue-cli 配置了 resolve alias 來聲明的路徑別名，在引用了 ts 后，vscode 會報錯不能識別、模塊查找失敗。其中，vscode 報錯在 win 環境還需要一個插件安裝，解決方案見下邊 vue.config.js 配置

// vue.config.js
module.exports = {
  chainWebpack: config => {
    // 別名配置
    config.resolve.alias
      .set("comp", resolve("src/components"))
      .set("css", resolve("src/assets/styles"));
    // ...同上，路徑核對好就行
  }
};

jsconfig.json 配置。注意這里的名字要和上邊 set 后邊的名字保持一致

// jsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "src/*" // 這個本來就有
      ],
      // 后邊追加
      "comp/*": [
        "src/components/*"
      ],
      "css/*": [
        "src/assets/styles/*"
      ],
      // ... 同上，路徑核對好就行
    },
  }
};

SCF 使用設定的別名

// main.ts
import MyError from "view/error/Error.vue";

/* SCF單頁中scss路徑引用 */
@import "css/_variable.scss";

請求接口的代理設置

vue.config.js 配置

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://11.11.11.111/", // 示例ip地址，也可以填域名，需要的是后端接口地址的相同部分
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }
};

axios 請求地址時的寫法：
注意/api一定要有，且在路徑的最前邊，代替相同的路徑。

axios
  .get("/api/wo/de/di/zhi") // 前邊的'/api'一定要有，它代表的就是vue.config.js中proxy.target的路徑
  .then(() => {
    // 接口成功...
  });

本地服務域名修改

vue.config.js 配置

// vue.config.js
module.exports = {
  devServer: {
    disableHostCheck: true, // 用域名代替localhost,禁用主機檢查
    host: "www.haha.com"
    // 另外端口也可以在這里改，只不過我寫到了package.json總，見下邊
  }
};

package.json dev 命令的配置

{
  "scripts": {
    "dev": "npm run serve",
    "serve": "vue-cli-service serve --port 80 --open", # 端口設置為80，--open運行完畢后自動打開地址
  }
}

本地 host 配置

127.0.0.1 www.haha.com # 這里注意和vue.config.js中的host的值對應

此時，npm run dev成功后，瀏覽器跑項目輸入地址http://www.haha.com即可

vue + ts 在 vscode 中的問題

vue-cli 配置了 resolve alias 來聲明的路徑別名，在引用了 ts 后，vscode 會報錯不能識別、模塊查找失敗：

1、擴展商店安裝插件 - Path Intellisense

2、配置代碼（vscode setting.json 中設置）

"path-intellisense.mappings": {
  "@": "\${workspaceRoot}/src"
}

3、在 package.json 統計目錄下創建 jsconfig.json 文件，並填入下邊代碼

// jsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

2019/12/09 ...持續更新中...

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue.js使用typescript踩坑記 vue引入vant踩坑總結 vue + threejs 項目踩坑總結 vue踩坑以及自己的解決辦法總結， vue踩坑總結 & 優化點 vue-awesome-swiper踩坑總結 Vue3 + TypeScript + vue-class-component +Webpack 實戰踩坑【FastAPI】踩坑總結 MySql踩坑總結 Vue + TypeScript + Element 搭建簡潔時尚的博客網站及踩坑記