快速开始vue3

news2024/11/25 13:09:51

版本

node (20.11.1)
vue3 (3.4.21)

脚手架创建项目并运行

安装脚手架并创建项目

npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具
2）安装以下进行选择

## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

初始化git,并把代码上传到远程仓库

git init
git add .
git commit -m 'init'
git remote add origin 远程仓库地址
git push --set-upstream origin main

安装依赖并运行

npm install
npm run dev

vscode安装插件

vue官方插件

需要打开以下配置

测试代码

app.vue

<template>
  <h2>测试</h2>
  <Person/>
  <Hello/>
</template>

<script setup lang="ts">
  import Person from './components/Person.vue'

</script>

<style scoped>
</style>

Person.vue

<template>
  姓名: {{ name }} <br/>
  年龄: {{ age }}
  <button @click="changeName">修改姓名</button>
  <button @click="addAge">年龄+1</button>

</template>

<script setup lang="ts" name="aaa">

  import {ref} from 'vue'

  let name = ref("张三")
  let age = ref(0)

  function changeName() {
    name.value += '~'
  }

  function addAge() {
    age.value += 1
  }

</script>

重新运行代码

vite插件

vite-plugin-vue-setup-extend
扩展：上述代码，还需要编写一个不写setup的script标签，去指定组件名字，比较麻烦，我们可以借助vite中的插件简化

*npm i vite-plugin-vue-setup-extend -D
*修改vite.config.ts

import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [ VueSetupExtend() ]
})