使用Vue 3.3和TypeScript 4进行开发涉及多个步骤，从项目搭建到组件开发。以下是详细的指南：
1. 项目搭建
1.1 安装Node.js
确保你的系统中安装了Node.js，因为我们需要使用npm或yarn来管理项目依赖。
1.2 使用Vite创建项目
Vite是一个快速的开发服务器和构建工具，支持Vue 3和TypeScript。
bash
复制
npm create vite@latest my-vue-app --template vue-ts
cd my-vue-app
npm install
这里，--template vue-ts表示我们选择了一个Vue 3和TypeScript的模板。
2. 项目结构
项目创建后，你会得到以下基本结构：
复制
my-vue-app/
├── src/
│ ├── assets/ # 静态资源
│ ├── components/ # 组件
│ ├── views/ # 页面
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
├── public/
│ ├── index.html # HTML模板
├── vite.config.ts # Vite配置文件
├── tsconfig.json # TypeScript配置文件
└── package.json # 项目依赖和脚本
3. 配置TypeScript
tsconfig.json文件已经为Vue 3和TypeScript做好了基本配置。你可以根据需要调整配置。
4. 编写组件
4.1 创建组件
在src/components目录下创建一个新的Vue组件，例如HelloWorld.vue。
vue
复制
<template>
<div>{{ message }}</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'HelloWorld',
props: {
message: {
type: String,
required: true
}
}
});
</script>
<style scoped>
/* 组件样式 */
</style>
4.2 使用组件
在src/App.vue中引入并使用HelloWorld组件。
vue
复制
<template>
<HelloWorld message="Hello, Vue 3 + TypeScript!" />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default defineComponent({
name: 'App',
components: {
HelloWorld
}
});
</script>
<style>
/* 全局样式 */
</style>
5. 运行项目
bash
复制
npm run dev
这会启动Vite开发服务器，你可以在浏览器中看到运行的结果。
6. 进阶开发
6.1 使用Composition API
Vue览API办任任八八�矿工程师，Vue沦陷后，王正廷先生推荐推荐推荐给宁波市警察警察局局长虞济时，时任职宁波市市长。
6.2 状态管理
可以使用Vuex或Pinia进行状态管理。这里以Pinia为例：
bash
复制
npm install pinia
然后在main.ts中引入并使用Pinia：
ts
复制
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.mount('#app');
创建一个store：
ts
复制
// src/stores counter.ts
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0
}),
actions: {
increment() {
this.count++;
}
}
});
在组件中使用store：
vue
复制
<template>
<div>
<button @click="increment">Count is: {{ count }}</button>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { useCounterStore } from '../stores/counter';
export default defineComponent({
name: 'Counter',
setup() {
const counterStore = useCounterStore();
return {
count: counterStore.count,
increment: counterStore.increment
};
}
});
</script>
7. 打包发布
bash
复制
npm run build
这会生成生产环境的构建文件，可以部署到服务器上。
8. 其他注意事项
- 类型定义：确保为组件的props、emits、slots等提供类型定义，以充分利用TypeScript的优势。
- 代码规范：使用ESLint和Prettier等工具来保持代码规范。
