01、App.vue代码如下:
<template> <div class="app"> <h1>好好学习,天天向上</h1> <Person/> </div> </template> <script> // JS或TS import Person from './view/PersonNew.vue' export default { // App为根组件 name: 'App', // 注册Person组件,注册后,在本单元中可以直接使用Person组件 components: {Person} } </script> <!--样式 scoped表示仅本单元有效--> <style scoped> .app { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; } </style>
02、代码如下:
<template> <div class="person"> <h2>姓名{{ name }}</h2> <h2>年龄{{ age }}</h2> <h2>地址{{ address }}</h2> <button @click="changeName">修改名字</button> <button @click="changeAge">修改年龄</button> <button @click="showTel">查看联系方式</button> </div> </template> <!--第一种写法,就是2个script标签--> <script lang="ts"> export default { name: 'PersonNew001', } </script> <!--需要写上setup--> <script lang="ts" setup> import {ref} from 'vue' // 定义数据 let name = ref('张三') let age = ref(18) let address = ref('圣弗兰-西斯科') // 对数据的修改都需要加上.value function changeName() { name.value = '李四' } function changeAge() { age.value += 1 } function showTel() { alert('13800138000') } </script> <!--样式 scoped表示仅本单元有效--> <style scoped> .person { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; button { margin: 0 5px; } } </style>
03、效果如下:
04、命令行安装npm i vite-plugin-vue-setup-extend -D,并引入这个插件,vite.config.js代码如下:
import {fileURLToPath, URL} from 'node:url' import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' // 引入vue-setup-extend插件 import vueSetupExtend from 'vite-plugin-vue-setup-extend' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), // 引入vue-setup-extend插件 vueSetupExtend() ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } }, server: { //这里就是代理,开启后怎么定义的,就在前面怎么加前缀 proxy: { '/proxy': { target: 'http://localhost/', changeOrigin: true, rewrite: (path) => path.replace(/^\/proxy/, '') } } } })
05、如图所示的引入
06、PersonNew.vue代码如下:
<template> <div class="person"> <h2>姓名{{ name }}</h2> <h2>年龄{{ age }}</h2> <h2>地址{{ address }}</h2> <button @click="changeName">修改名字</button> <button @click="changeAge">修改年龄</button> <button @click="showTel">查看联系方式</button> </div> </template> <!--第一种写法,就是2个script标签--> <!--<script lang="ts">--> <!--export default {--> <!-- name: 'PersonNew001',--> <!--}--> <!--</script>--> <!--需要写上setup--> <script lang="ts" setup name = "PersonNew002"> import {ref} from 'vue' // 定义数据 let name = ref('张三') let age = ref(18) let address = ref('圣弗兰-西斯科') // 对数据的修改都需要加上.value function changeName() { name.value = '李四' } function changeAge() { age.value += 1 } function showTel() { alert('13800138000') } </script> <!--样式 scoped表示仅本单元有效--> <style scoped> .person { background-color: #ddd; box-shadow: 0 0 10px; border-radius: 10px; padding: 20px; button { margin: 0 5px; } } </style>
07、效果如下
标签:TypeScript,name,vue,API,let,005,10px,import,ref From: https://www.cnblogs.com/tianpan2019/p/18364357