Vue3入门到实战笔记01

基于Vite创建Vue3工程

一、创建Vue3工程

Vue3入门到实战笔记01_第1张图片

  1. npm create vite@latest
  2. 按照提示创建项目
  3. cd vue3study 进入所创建的项目目录
  4. npm install 安装项目需要的依赖包
  5. npm run dev 运行项目

二、项目内文件说明

  1. Vue3项目的入口文件改为index.html (vue2项目的入口文件是main.js),index.html当中引入了main.ts
  2. main.ts创建Vue实例,Vue3中是通过createApp函数创建一个应用实例
    Vue3入门到实战笔记01_第2张图片

三、拉开序幕的setup

1.setup概述

setupVue3中一个新的配置项,值是一个函数,它是 Composition API “表演的舞台”,组件中所用到的:数据、方法、计算属性、监视…等等,均配置在setup中。

  • setup函数返回的对象中的内容,可直接在模板中使用。
  • setup中访问thisundefined
  • setup函数会在beforeCreate之前调用,它是“领先”所有钩子执行的。
2.setup语法糖

setup函数有一个语法糖,这个语法糖,可以让我们把setup独立出去,代码如下:

<template>
  <div class="person">
    <h2>姓名:{{name}}</h2>
    <h2>年龄:{{age}}</h2>
    <button @click="changName">修改名字</button>
    <button @click="changAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>

<script lang="ts">
  export default {
    name:'Person',
  }
</script>

<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">
  console.log(this) //undefined
  
  // 数据(注意:此时的name、age、tel都不是响应式数据)
  let name = '张三'
  let age = 18
  let tel = '13888888888'

  // 方法
  function changName(){
    name = '李四'//注意:此时这么修改name页面是不变化的
  }
  function changAge(){
    console.log(age)
    age += 1 //注意:此时这么修改age页面是不变化的
  }
  function showTel(){
    alert(tel)
  }
</script>

扩展:上述代码,还需要编写一个不写setupscript标签,去指定组件名字,比较麻烦,我们可以借助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() ]
})
  • 第三步:

你可能感兴趣的:(前端,Vue,笔记)