Vue與Typescript建置項目
這次帶給大家Vue與Typescript建置項目，Vue與Typescript建置專案的注意事項有哪些，以下就是實戰案例，一起來看一下。
Typescript 在前端圈已經逐漸普及，Vue 2.5.0 改進了類型聲明，使得對TypeScript 更加友好
不過要想在專案中直接使用TypeScript 仍然需要對專案進行一些改造
PS: 建議使用 Visual Studio Code 進行開發
一、安裝相依
首先還是用vue-cli 產生專案
vue init webpack demo
然後安裝必要依賴項：typescript、ts-loader、vue-class-component
npm install typescript vue-class-component -D
npm install ts-loader@3.3.1 -D
上面安裝ts-loader 的時候，指定了版本3.3.1
#這是因為在寫這篇部落格的時候（2018-03- 14），在安裝ts-loader 的最新版4.0.1 的情況下，啟動專案會報錯
另外還有幾個函式庫可以按需引入：
tslint: 規格ts 程式碼，需要配合tsllint-loader 使用，最好再加上tslint-config-standard;
vue-property-decorator: vue-class-component 的擴展，增加了幾個結合Vue 特性的裝飾器（@Emit，@Prop 等）；
vuex-class: 在vue-class-component 基礎上加強了對vuex 的支援。
二、設定Webpack
然後修改./build/webpack.base.conf.js 檔案：
在resolve.extension 中加入'.ts'，使引入ts 檔案時不用寫.ts 後綴
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
}在module.rules 中新增webpack 對ts 檔案的解析
三、其他設定
在專案根目錄下建立tsconfig.json 檔案：
// tsconfig.json{ "compilerOptions": { // 与 Vue 的浏览器支持保持一致
"target": "es5", // 这可以对 `this` 上的数据属性进行更严格的推断
"strict": true, // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
"module": "es2015", "moduleResolution": "node"
}
}完整的tsconfig.json 配置項目可以參考官方文檔
在./src 目錄建立vue-shim.d.ts 文件，讓ts 識別.vue 文件：
// vue-shim.d.tsdeclare module "*.vue" {
import Vue from "vue";
export default Vue;
}四、檔案改造
將src 目錄下的所有js 檔案後綴改為.ts
然後將webpack 設定檔./build/webpack.base.conf.js 中的入口entry 修改為main.ts
改造之後的ts 檔案不會辨識.vue 檔，所以在引入.vue 檔案的時候，需要手動新增.vue 後綴
在所有 .vue 檔案中，都需要在
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
分享PyCharm專案打包的簡易方法
Dec 30, 2023 am 09:34 AM
簡單易懂的PyCharm專案打包方法分享隨著Python的流行，越來越多的開發者使用PyCharm作為Python開發的主要工具。 PyCharm是功能強大的整合開發環境，它提供了許多方便的功能來幫助我們提高開發效率。其中一個重要的功能就是專案的打包。本文將介紹如何在PyCharm中簡單易懂地打包項目，並提供具體的程式碼範例。為什麼要打包專案？在Python開發
AI攻克費馬大定理？數學家放棄5年職業生涯，將100頁證明變代碼
Apr 09, 2024 pm 03:20 PM
費馬大定理，即將被AI攻克？而整件事最有意義的地方在於，AI即將解決的費馬大定理，正是為了證明AI無用。曾經，數學屬於純粹的人類智力王國；如今，這片疆土正被先進的演算法所破解，所踐踏。圖片費馬大定理，是一個「臭名昭著」的謎題，在幾個世紀以來，一直困擾著數學家。它在1993年被證明，而現在，數學家們有一個偉大計畫：用電腦把證明過程重現。他們希望在這個版本的證明中，如果有任何邏輯上的錯誤，都可以由電腦檢查出來。專案網址：https://github.com/riccardobrasca/flt
深入了解PyCharm：快速刪除項目的方法
Feb 26, 2024 pm 04:21 PM
標題：深入了解PyCharm：刪除專案的高效方式近年來，Python作為一種強大而靈活的程式語言，受到越來越多開發者的青睞。在Python專案的開發中，選擇一個高效的整合開發環境至關重要。 PyCharm作為一款功能強大的整合開發環境，為Python開發者提供了許多便利的功能和工具，其中包括快速、有效率地刪除專案目錄。以下將著重介紹如何使用PyCharm中的刪除
PyCharm實用技巧：將項目轉換為可執行EXE文件
Feb 23, 2024 am 09:33 AM
PyCharm是一款功能強大的Python整合開發環境，提供了豐富的開發工具和環境配置，讓開發者更有效率地編寫和除錯程式碼。在使用PyCharm進行Python專案開發的過程中，有時候我們需要將專案打包成可執行的EXE文件，以便在沒有安裝Python環境的電腦上執行。本文將介紹如何使用PyCharm將專案轉換為可執行的EXE文件，同時給出具體的程式碼範例。首
基礎教學：使用IDEA建立Maven項目
Feb 19, 2024 pm 04:43 PM
IDEA（IntelliJIDEA）是一款強大的整合開發環境，可協助開發人員快速且有效率地開發各種Java應用程式。在Java專案開發中，使用Maven作為專案管理工具能夠幫助我們更好地管理依賴函式庫、建置專案等。本文將詳細介紹如何在IDEA中建立一個Maven專案的基本步驟，同時提供具體的程式碼範例。步驟一：開啟IDEA並建立新專案開啟IntelliJIDEA
建置流暢無阻：如何正確配置Maven鏡像位址
Feb 20, 2024 pm 08:48 PM
建置流暢無阻：如何正確配置Maven鏡像位址在使用Maven建置專案時，配置正確的鏡像位址是非常重要的。正確配置鏡像位址可以加快專案建置的速度，避免網路延遲等問題。本文將介紹如何正確配置Maven鏡像位址，並給出特定的程式碼範例。為什麼需要設定Maven鏡像位址Maven是專案管理工具，可以自動化建置專案、管理依賴、產生報表等。在Maven建置專案時，通常
PyCharm教學：如何在PyCharm中移除項目？
Feb 24, 2024 pm 05:54 PM
PyCharm是一款功能強大的Python整合開發環境（IDE），提供了豐富的功能幫助開發者更有效率地編寫和管理Python專案。在使用PyCharm開發專案的過程中，有時候我們需要刪除一些不再需要的專案以釋放空間或清理專案清單。本文將詳細介紹如何在PyCharm中刪除項目，並提供具體的程式碼範例。如何刪除項目開啟PyCharm，進入項目清單介面。在項目清單中，
使用PyCharm簡化專案打包：簡單操作使你的程式碼成為獨立應用
Feb 03, 2024 am 09:41 AM
利用PyCharm輕鬆打包專案：簡單操作讓你的程式碼成為獨立應用引言：在Python的開發過程中，我們常常會使用一些外部函式庫和模組來幫助我們實現功能。但是當我們將程式碼分享給其他人使用時，他們可能沒有安裝我們使用的這些程式庫和模組，導致無法正常運行程式碼。為了解決這個問題，我們可以使用PyCharm提供的打包工具，將我們的程式碼和依賴項一起打包成一個獨立的應用程序，讓其他
