Vue3+script setup+ts+Vite+Volar project

I haven’t written for a long time. Recently I saw that Vue3.2 was released. Oh, is it time to start writing again?
In fact, I haven’t used Vue3 to develop any actual projects myself, but now there are new things coming out…
The migrant workers in the new era really work with their left hand, play with their right hand, and also use their hands to study.

What? You mean dating? xswl, how can a migrant worker like me be qualified to date?

I have to curl up. Let me take a look at what my friends posted on their circle of friends. Well, it's still the Eternal Fragrance

Okay, without further ado, let’s get started~

Create a vue + ts project using Vite

Refer to Vite official guide

Execute and create a project template

	$ npm init vite@latest
	√ Project name: ... v3_demo
	√ Select a framework: » vue
	√ Select a variant: » vue-ts
	
	Scaffolding project in C:\Users\admin\Desktop\v3_demo...
	
	Done. Now run:
	
	  cd v3_demo
	  npm install
	  npm run dev

Project directory structure description

	
	├── public # static resources that do not need to be packaged │ └── favicon.ico
	├── src
	│ ├── api # Backend API interface encapsulation │ ├── assets # Static resources that need to be packaged │ ├── components # Public components │ ├── composables # General composable API
	│ ├── layout # Page layout template │ ├── plugins # Plugins │ ├── router # Routing │ ├── store # Vuex storage │ ├── styles # Styles │ └── index.scss # Global common styles │ ├── utils # Tool module │ ├── views # Routing page │ ├── App.vue # Root component │ ├── main.ts # Entry module │ ├── shims-vue.d.ts # Supplement .vue module type declaration │ └── vite-env.d.ts # Supplement vite type declaration ├── .gitignore
	├── README.md
	├── index.html
	├── package-lock.json
	├── package.json
	├── tsconfig.json
	└── vite.config.ts

After creating the project, you must install the dependency package and run it again, but you will find that the run directly reports an error.

admin@DESKTOP-ABKQLS5 C:\Users\admin\Desktop\v3_demo
$ npm run dev

> [email protected]
> vite

events.js:292
throw er; // Unhandled 'error' event
^

Error: spawn C:\Users\admin\Desktop\v3_demo\node_modules\esbuild\esbuild.exe ENOENT
at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21)
Emitted 'error' event on ChildProcess instance at:
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
at onErrorNT (internal/child_process.js:465:16)
at processTicksAndRejections (internal/process/task_queues.js:80:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn C:\\Users\\admin\\Desktop\\v3_demo\\node_modules\\esbuild\\esbuild.exe',
path: 'C:\\Users\\admin\\Desktop\\v3_demo\\node_modules\\esbuild\\esbuild.exe',
spawnargs: [ '--service=0.12.22', '--ping' ]
}

Solution: node ./node_modules/esbuild/install.js

In the projects created by Vite, ESLint is not available by default.

Description of TS in Vite

Vite naturally supports the import of .ts files.
Vite only performs the translation of .ts files and does not perform any type checking. And assume that type checking is already taken care of by your IDE or build process (you can run tsc --noEmit in your build script or install vue-tsc and then run vue-tsc --noEmit to type check your *.vue files).
Vite uses esbuild to translate TypeScript into JavaScript, which is about 20~30 times faster than tsc. At the same time, the time it takes for HMR updates to be reflected in the browser is less than 50ms.
Note that because esbuild only performs transpilation without type information, it does not support TypeScript-specific features such as constant enums and implicit “type-only” imports. You must set "isolatedModules": true in compilerOptions in your tsconfig.json so that TS will warn you about features that don't work with isolated compilation mode.

vue-tsc and tsc
tsc can only verify ts code types
vue-tsc can verify the types in ts + Vue Template (based on Volar)
It is recommended to add a scripts script in package.json to perform TS type verification separately:

"scripts": {
	  ...
	  "build": "npm run tsc && vite build",
	  "tsc": "vue-tsc -noEmit"
	}

-noEmit means only verify the type and do not output the compilation result

To skip third-party package type checking, add in tsconfig.json:

	{
	  "compilerOptions": {
	    ...
	    "baseUrl": "./",
	    "skipLibCheck": true
	  }
	}

The specific TS syntax of Vue3 will not be described here. Friends who don’t know can directly refer to the official documentation

Three syntaxes of Vue 3

There are four ways to write the word "Xiang" in "Xiangxiangdou", and there are also three syntaxes for "Vue3" in "Working People". Times are changing, but our original intentions remain the same. Please read the following.

Option API

I won't go into details about this. Anyone who knows how to write Vue will know it. This is the most commonly used option API in Vue2.

Composition API

Combination API is the most talked-about syntax update since the birth of Vue3, and it is also the basis of our script setup syntax below.

If you don’t know how to use the front-end yet, hurry up and learn it! Composition API

script setup (syntactic sugar for the Composition API)

<script setup> is compile-time syntax sugar for using the Composition API in a single-file component (SFC). Compared to ordinary

Less boilerplate, cleaner code.
Ability to declare props and emit events using pure Typescript.
Better runtime performance (templates are compiled into render functions in the same scope as them, without any intermediate proxy).
Better IDE type inference performance (less work for the language server to extract types from your code).

I won’t post screenshots of Yuxi You’s article here. Script setup has officially graduated from the experimental state and is now available in a stable version.

In the script tag with setup added, we don't need to declare and methods. This way of writing will automatically expose all top-level variables and functions to the template for use.

Here I want to emphasize that " exposing to the template is not the same as exposing to the outside world "

Taking the HelloWorld.vue project template as an example, the syntax of the Composition API is:

	
	<script lang="ts">
	import { ref, defineComponent } from "vue";
	export default defineComponent({
	  name: "HelloWorld",
	  props: {
	    msg: {
	      type: String,
	      required: true,
	    },
	  },
	  setup: () => {
	    const count = ref(0);
	    return { count };
	  },
	});
	</script>

After using setup:

	<script lang="ts" setup>
	import { ref, defineProps } from "vue";
	const count = ref(0);
	const props = defineProps({
	  msg: {
	    type: String,
	    required: true,
	  },
	});
	</script>
	

For specific syntax, refer to script setup

Install Volar

Volar is a plugin for vscode, which provides some pretty cool features.

The installation method is very simple. Just search for volar in the vscode plug-in market and click to install.

Here are a few features that I am very happy with:

Editor Quick Split
Vue single-file component, according to the function, there are three root elements: template, script, and style.
After installing Volar, a small icon will appear in the upper right corner of vscode

Click it, and our vue file is split into three windows according to the function, and each window is responsible for its own function. The other two root elements are merged.

In other words, we can easily distinguish template, script, and style, split a file into three windows, and use it as three files. All the plug-ins will help you complete it. We only need to click.

Class reference in style

You can see that above the class name .someclass, there is a small icon called 1 reference, which means that the current class has one reference. If we click on this 1 reference, a pop-up window will appear, which shows the specific usage location of the current class.

Class Tracing

On an element in the template that uses the class attribute, hold down ctrl + left click

It will jump directly to the location of the class name

Conclusion

The above is the basic process of creating a vue3 + script setup + ts + vite + volar project. Of course, it is not over yet, because we also need to install vue-router@4 and vuex@next as well as UI component libraries , but those are relatively basic and can be easily done by friends.

This is the end of this article about Vue3+script setup+ts+Vite+Volar project. For more related Vue3+script setup+ts+Vite+Volar content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!