Vue3-Day1

Vue3-Day1

先安装NVM

使用VSCode需要安装的插件

Vue-Official

之后使用NVM命令安装NPM

nvm install latest

之后就可以基于 Vite 的构建项目，并进行设置

npm create vue@latest

会看到如下配置

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

安装一个Vue3语法插件

npm install vite-plugin-vue-setup-extend -D

修改vite.config.ts文件内容

import {fileURLToPath, URL} from 'node:url'

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// 这里添加
import vueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vite.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        vueDevTools(),
        // 这里添加
        vueSetupExtend()
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        },
    },
})

只用在setup的script里面写一个name即可，不需要写两个script了

Vue3组合式语法（非响应式数据）

<template>
  <div class="person">
    <h2>{{ a }}</h2>
    <h2>name:{{ name }}</h2>
    <h2>age:{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">tel</button>
  </div>

</template>

<script setup lang="ts">
  let a = 666
  // data
  let name = 'zhangsan'
  let age = 18
  let tel = 13812341234

  // function  
  function changeName() {
    name = 'lisi'
  }

  function changeAge() {
    age += 1
  }

  function showTel() {
    alert(tel)
  }
</script>


<style>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }

  button {
    margin: 0 5px;
  }
</style>