Vue and Typescript build project
This time I will bring you a Vue and Typescript construction project. What are the precautions for Vue and Typescript construction projects? The following is a practical case, let’s take a look.
Typescript has gradually become popular in the front-end circle. Vue 2.5.0 has improved the type declaration, making it more friendly to TypeScript
However, if you want to use TypeScript directly in the project, you still need to make some modifications to the project.
PS: It is recommended to use Visual Studio Code for development
##1. Install dependencies
First use vue-cli to generate the projectvue init webpack demo
npm install typescript vue-class-component -D
npm install ts-loader@3.3.1 -D
When installing ts-loader above, version 3.3.1 was specified
This is because when writing this blog(2018-03- 14) , when the latest version 4.0.1 of ts-loader is installed, starting the project will report an error
In addition, there are several libraries that can be introduced on demand:tslint: Standardize ts code and need to be used with tsllint-loader. It is best to add tslint-config-standard;
vue-property-decorator: Extension of vue-class-component, adding several decorators that combine Vue features (@Emit, @Prop, etc.);
vuex-class: Enhanced support for vuex based on vue-class-component.
2. Configure Webpack
Then modify the ./build/webpack.base.conf.js file:
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
}3. Other configurations
Create the tsconfig.json file in the project root directory:// tsconfig.json{ "compilerOptions": { // 与 Vue 的浏览器支持保持一致
"target": "es5", // 这可以对 `this` 上的数据属性进行更严格的推断
"strict": true, // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
"module": "es2015", "moduleResolution": "node"
}
}// vue-shim.d.tsdeclare module "*.vue" {
import Vue from "vue";
export default Vue;
}4. File transformation
Change the suffix of all js files in the src directory to .ts
When introducing the .vue file, you need to manually add the .vue suffix
.vue files, you need to add the lang="ts" identifier in
AI-powered app for creating realistic nude photos Online AI tool for removing clothes from photos. Undress images for free AI clothes remover Swap faces in any video effortlessly with our completely free AI face swap tool! Easy-to-use and free code editor Chinese version, very easy to use Powerful PHP integrated development environment Visual web development tools God-level code editing software (SublimeText3)
Hot AI Tools
Undresser.AI Undress
AI Clothes Remover
Undress AI Tool
Clothoff.io
Video Face Swap
Hot Article
Hot Tools
Notepad++7.3.1
SublimeText3 Chinese version
Zend Studio 13.0.1
Dreamweaver CS6
SublimeText3 Mac version
Hot Topics
Share an easy way to package PyCharm projects
Dec 30, 2023 am 09:34 AM
Share the simple and easy-to-understand PyCharm project packaging method. With the popularity of Python, more and more developers use PyCharm as the main tool for Python development. PyCharm is a powerful integrated development environment that provides many convenient functions to help us improve development efficiency. One of the important functions is project packaging. This article will introduce how to package projects in PyCharm in a simple and easy-to-understand way, and provide specific code examples. Why package projects? Developed in Python
Can AI conquer Fermat's last theorem? Mathematician gave up 5 years of his career to turn 100 pages of proof into code
Apr 09, 2024 pm 03:20 PM
Fermat's last theorem, about to be conquered by AI? And the most meaningful part of the whole thing is that Fermat’s Last Theorem, which AI is about to solve, is precisely to prove that AI is useless. Once upon a time, mathematics belonged to the realm of pure human intelligence; now, this territory is being deciphered and trampled by advanced algorithms. Image Fermat's Last Theorem is a "notorious" puzzle that has puzzled mathematicians for centuries. It was proven in 1993, and now mathematicians have a big plan: to recreate the proof using computers. They hope that any logical errors in this version of the proof can be checked by a computer. Project address: https://github.com/riccardobrasca/flt
A closer look at PyCharm: a quick way to delete projects
Feb 26, 2024 pm 04:21 PM
Title: Learn more about PyCharm: An efficient way to delete projects. In recent years, Python, as a powerful and flexible programming language, has been favored by more and more developers. In the development of Python projects, it is crucial to choose an efficient integrated development environment. As a powerful integrated development environment, PyCharm provides Python developers with many convenient functions and tools, including deleting project directories quickly and efficiently. The following will focus on how to use delete in PyCharm
PyCharm Practical Tips: Convert Project to Executable EXE File
Feb 23, 2024 am 09:33 AM
PyCharm is a powerful Python integrated development environment that provides a wealth of development tools and environment configurations, allowing developers to write and debug code more efficiently. In the process of using PyCharm for Python project development, sometimes we need to package the project into an executable EXE file to run on a computer that does not have a Python environment installed. This article will introduce how to use PyCharm to convert a project into an executable EXE file, and give specific code examples. head
Basic tutorial: Create a Maven project using IDEA
Feb 19, 2024 pm 04:43 PM
IDEA (IntelliJIDEA) is a powerful integrated development environment that can help developers develop various Java applications quickly and efficiently. In Java project development, using Maven as a project management tool can help us better manage dependent libraries, build projects, etc. This article will detail the basic steps on how to create a Maven project in IDEA, while providing specific code examples. Step 1: Open IDEA and create a new project Open IntelliJIDEA
Smooth build: How to correctly configure the Maven image address
Feb 20, 2024 pm 08:48 PM
Smooth build: How to correctly configure the Maven image address When using Maven to build a project, it is very important to configure the correct image address. Properly configuring the mirror address can speed up project construction and avoid problems such as network delays. This article will introduce how to correctly configure the Maven mirror address and give specific code examples. Why do you need to configure the Maven image address? Maven is a project management tool that can automatically build projects, manage dependencies, generate reports, etc. When building a project in Maven, usually
PyCharm Tutorial: How to remove items in PyCharm?
Feb 24, 2024 pm 05:54 PM
PyCharm is a powerful Python integrated development environment (IDE) that provides rich functions to help developers write and manage Python projects more efficiently. In the process of developing projects using PyCharm, sometimes we need to delete some projects that are no longer needed to free up space or clean up the project list. This article will detail how to delete projects in PyCharm and provide specific code examples. How to delete a project Open PyCharm and enter the project list interface. In the project list,
Optimize the Maven project packaging process and improve development efficiency
Feb 24, 2024 pm 02:15 PM
Maven project packaging step guide: Optimize the build process and improve development efficiency. As software development projects become more and more complex, the efficiency and speed of project construction have become important links in the development process that cannot be ignored. As a popular project management tool, Maven plays a key role in project construction. This guide will explore how to improve development efficiency by optimizing the packaging steps of Maven projects and provide specific code examples. 1. Confirm the project structure. Before starting to optimize the Maven project packaging step, you first need to confirm
