创建项目

本文从零开始不适用脚手架创建!

初始化项目

# 初始化package.json
npm init -y & git init

安装依赖

vue3

# 安装 vue3 (运行时依赖)
npm i vue

typescript

# typescript 核心库
# vue-tsc专门为 .vue 做类型检查
# @vue/tsconfig 官方提供的 tsconfig 共享配置
# @types/node 提供node.js的api
npm i typescript vue-tsc @vue/tsconfig @types/node -D

vite

# vite 核心组件库
# @vitejs/plugin-vue vite插件
# vite-plugin-vue-devtools 集成 Vue.js 开发者工具（Vue Devtools）
# npm-run-all并行运行多个npm脚本
npm i vite @vitejs/plugin-vue vite-plugin-vue-devtools npm-run-all -D

pinia

npm i pinia

vue-router

npm i vue-router

编写配置文件

typescript

// 编写tsconfig.app.json
// app代表纯前端项目
{
	"extends": "@vue/tsconfig/tsconfig.dom.json",
	"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
	"exclude": ["src/**/__tests__/*"],
	"compilerOptions": {
		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
		"paths": {
			"@/*": ["./src/*"]
		}
	}
}

// 编写tsconfig.json
{
	"files": [],
	"references": [
		{
			"path": "./tsconfig.app.json"
		}
	]
}

// env.d.ts 声明全局环境变量的类型
/// <reference types="vite/client" />

vite

// vite.config.ts
import { fileURLToPath, URL } from 'node:url'; // @types/node包
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueDevTools from 'vite-plugin-vue-devtools';

export default defineConfig({
	plugins: [vue(), vueDevTools()],
	resolve: {
		alias: {
			'@': fileURLToPath(new URL('./src', import.meta.url)),
		},
	},
});

编写代码

package.json

// package.json
// 添加或修改如下行
{
	"type": "module",
	"scripts": {
		"dev": "vite",
		"build": "run-p type-check \"build-only {@}\" --",
		"preview": "vite preview",
		"build-only": "vite build",
		"type-check": "vue-tsc --build"
	},
}

index.html(舞台)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<!-- 创建一个id叫app的容器 -->
		<div id="app"></div>
		<!-- 引入入口ts文件 -->
		<script type="module" src="/src/main.ts"></script>
	</body>
</html>

App.vue(剧本)

<!-- @/App.vue -->
<template>
	<h1>{{ word }}</h1>
</template>

<script setup lang="ts">
	const word = 'Hello World';
</script>

main.ts(导演)

// @/main.ts
import { createApp } from 'vue';
import App from '@/App.vue';

const app = createApp(App);
app.mount('#app');

启动项目

npm run dev

响应式

Setup

Setup语法糖简化了开发,下面的代码作用相同

<template>
	<h1>{{ word }}</h1>
</template>

<script lang="ts">
	import { ref } from 'vue';
	export default {
		name: 'Home',
		setup() {
			let word = ref('Hello World');
			return { word };
		},
	};
</script>

<template>
	<h1>{{ word }}</h1>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	let word = ref('Hello World');
</script>

ref & reactive

  • ref: 基本类型的响应式
  • reactive: 对象类型的响应式

ref也可以处理对象类型的响应式,底层使用的是reactive