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 文件中，都需要在
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Kongsi cara mudah untuk membungkus projek PyCharm
Dec 30, 2023 am 09:34 AM
Kongsi kaedah pembungkusan projek PyCharm yang mudah dan mudah difahami Dengan populariti Python, semakin ramai pembangun menggunakan PyCharm sebagai alat utama untuk pembangunan Python. PyCharm ialah persekitaran pembangunan bersepadu yang berkuasa yang menyediakan banyak fungsi mudah untuk membantu kami meningkatkan kecekapan pembangunan. Salah satu fungsi penting ialah pembungkusan projek. Artikel ini akan memperkenalkan cara untuk membungkus projek dalam PyCharm dengan cara yang mudah dan mudah difahami, dan memberikan contoh kod khusus. Mengapa projek pakej? Dibangunkan dalam Python
Bolehkah AI menakluki teorem terakhir Fermat? Ahli matematik melepaskan 5 tahun kerjayanya untuk mengubah 100 halaman bukti menjadi kod
Apr 09, 2024 pm 03:20 PM
Teorem terakhir Fermat, akan ditakluki oleh AI? Dan bahagian yang paling bermakna dari keseluruhannya ialah Teorem Terakhir Fermat, yang akan diselesaikan oleh AI, dengan tepat untuk membuktikan bahawa AI tidak berguna. Suatu ketika dahulu, matematik tergolong dalam alam kecerdasan manusia yang tulen kini, wilayah ini dihuraikan dan diinjak oleh algoritma canggih. Imej Teorem Terakhir Fermat ialah teka-teki "terkenal" yang telah membingungkan ahli matematik selama berabad-abad. Ia telah terbukti pada tahun 1993, dan kini ahli matematik mempunyai rancangan besar: untuk mencipta semula bukti menggunakan komputer. Mereka berharap bahawa sebarang ralat logik dalam versi bukti ini boleh disemak oleh komputer. Alamat projek: https://github.com/riccardobrasca/flt
Melihat lebih dekat pada PyCharm: cara cepat untuk memadamkan projek
Feb 26, 2024 pm 04:21 PM
Tajuk: Ketahui lebih lanjut tentang PyCharm: Cara yang cekap untuk memadamkan projek Dalam beberapa tahun kebelakangan ini, Python, sebagai bahasa pengaturcaraan yang berkuasa dan fleksibel, telah digemari oleh semakin ramai pembangun. Dalam pembangunan projek Python, adalah penting untuk memilih persekitaran pembangunan bersepadu yang cekap. Sebagai persekitaran pembangunan bersepadu yang berkuasa, PyCharm menyediakan pembangun Python dengan banyak fungsi dan alatan yang mudah, termasuk memadamkan direktori projek dengan cepat dan cekap. Berikut akan memberi tumpuan kepada cara menggunakan padam dalam PyCharm
Petua Praktikal PyCharm: Tukar Projek kepada Fail EXE Boleh Laku
Feb 23, 2024 am 09:33 AM
PyCharm ialah persekitaran pembangunan bersepadu Python yang berkuasa yang menyediakan pelbagai alatan pembangunan dan konfigurasi persekitaran, membolehkan pembangun menulis dan menyahpepijat kod dengan lebih cekap. Dalam proses menggunakan PyCharm untuk pembangunan projek Python, kadangkala kita perlu membungkus projek ke dalam fail EXE boleh laku untuk dijalankan pada komputer yang tidak mempunyai persekitaran Python yang dipasang. Artikel ini akan memperkenalkan cara menggunakan PyCharm untuk menukar projek kepada fail EXE boleh laku dan memberikan contoh kod khusus. kepala
Tutorial asas: Buat projek Maven menggunakan IDEA
Feb 19, 2024 pm 04:43 PM
IDEA (IntelliJIDEA) ialah persekitaran pembangunan bersepadu yang berkuasa yang boleh membantu pembangun membangunkan pelbagai aplikasi Java dengan cepat dan cekap. Dalam pembangunan projek Java, menggunakan Maven sebagai alat pengurusan projek boleh membantu kami mengurus perpustakaan bergantung, membina projek, dsb. Artikel ini akan memperincikan langkah asas tentang cara membuat projek Maven dalam IDEA, sambil memberikan contoh kod khusus. Langkah 1: Buka IDEA dan cipta projek baharu Buka IntelliJIDEA
Tutorial PyCharm: Bagaimana untuk mengalih keluar item dalam PyCharm?
Feb 24, 2024 pm 05:54 PM
PyCharm ialah persekitaran pembangunan bersepadu (IDE) Python yang berkuasa yang menyediakan fungsi yang kaya untuk membantu pembangun menulis dan mengurus projek Python dengan lebih cekap. Dalam proses membangunkan projek menggunakan PyCharm, kadangkala kita perlu memadam beberapa projek yang tidak lagi diperlukan untuk mengosongkan ruang atau membersihkan senarai projek. Artikel ini akan memperincikan cara memadamkan projek dalam PyCharm dan memberikan contoh kod khusus. Cara memadam projek Buka PyCharm dan masukkan antara muka senarai projek. Dalam senarai projek,
Binaan licin: Cara mengkonfigurasi alamat imej Maven dengan betul
Feb 20, 2024 pm 08:48 PM
Binaan licin: Cara mengkonfigurasi alamat imej Maven dengan betul Apabila menggunakan Maven untuk membina projek, adalah sangat penting untuk mengkonfigurasi alamat imej yang betul. Mengkonfigurasi alamat cermin dengan betul boleh mempercepatkan pembinaan projek dan mengelakkan masalah seperti kelewatan rangkaian. Artikel ini akan memperkenalkan cara mengkonfigurasi alamat cermin Maven dengan betul dan memberikan contoh kod tertentu. Mengapa anda perlu mengkonfigurasi alamat imej Maven ialah alat pengurusan projek yang boleh membina projek secara automatik, mengurus kebergantungan, menjana laporan, dsb. Apabila membina projek di Maven, biasanya
Optimumkan proses pembungkusan projek Maven dan tingkatkan kecekapan pembangunan
Feb 24, 2024 pm 02:15 PM
Panduan langkah pembungkusan projek Maven: Optimumkan proses binaan dan tingkatkan kecekapan pembangunan Apabila projek pembangunan perisian menjadi semakin kompleks, kecekapan dan kelajuan pembinaan projek telah menjadi pautan penting dalam proses pembangunan yang tidak boleh diabaikan. Sebagai alat pengurusan projek yang popular, Maven memainkan peranan penting dalam pembinaan projek. Panduan ini akan meneroka cara meningkatkan kecekapan pembangunan dengan mengoptimumkan langkah pembungkusan projek Maven dan menyediakan contoh kod khusus. 1. Sahkan struktur projek Sebelum mula mengoptimumkan langkah pembungkusan projek Maven, anda perlu mengesahkan terlebih dahulu
