目录
vue脚手架创建文件及注意事项
一、注意：用脚手架创建vue3的文件夹时需要脚手架版本在4.5.0版本以上才支持
二、查看脚手架的版本：vue -V
三、如果脚手架的版本过低，可以执行：npm install -g @vue/cli（重新安装脚手架最新版本）
四、使用脚手架创建vue3文件夹，在桌面上建一个：进入cmd，输入cd Desktop进入桌面，输入vue create （创建的文件名称），回车后先选择vue3
五、关闭语法检查：在vue.config.js中写入：
六、vue3里的template中可以不写跟标签
setup
1.理解：vue3中的一个新的配置项，值为一个函数。
2.里面可以写的东西：
·赋值变量：
·方法函数：
注意：如果在字符串中插入变量名时要用${}方法，且字符串用``包裹
3.一定要在setup中写返回的东西
·返回对象（常用）
注意：在setup(){}写的返回值时迎合中的{{name}}插值用的，如果不写页面中渲染不出来
vue脚手架创建文件及注意事项
一、注意：用脚手架创建vue3的文件夹时需要脚手架版本在4.5.0版本以上才支持
二、查看脚手架的版本：vue -V
三、如果脚手架的版本过低，可以执行：npm install -g @vue/cli（重新安装脚手架最新版本）
四、使用脚手架创建vue3文件夹，在桌面上建一个：进入cmd，输入cd Desktop进入桌面，输入vue create （创建的文件名称），回车后先选择vue3
五、关闭语法检查：在vue.config.js中写入：
代码语言：javascript复制const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false
})六、vue3里的template中可以不写跟标签
setup
1.理解：vue3中的一个新的配置项，值为一个函数。
2.里面可以写的东西：
·赋值变量：
代码语言：javascript复制 let name = 'lqj';
let age = 20;·方法函数：
代码语言：javascript复制 function sayhello(){
alert(`我叫${name},我${age}岁了,你好啊`)
}注意：如果在字符串中插入变量名时要用${}方法，且字符串用``包裹
3.一定要在setup中写返回的东西
·返回对象（常用）
代码语言：javascript复制 return{
name,
age,
sayhello
}注意：在setup(){}写的返回值时迎合<template>中的{{name}}插值用的，如果不写页面中渲染不出来
·返回一个函数（渲染函数）
代码语言：javascript复制 import {h} from 'vue'
export default {
name:'App',
setup(){
return ()=> h('h1','lqj')
}
}展示：
显示返回对象：
template：
代码语言：javascript复制<template>
<h1>用户信息</h1>
<h2>姓名：{{name}}</h2>
<h2>年龄：{{age}}</h2>
<button @click="sayhello">说话</button>
</template>script：
代码语言：javascript复制<script>
import {h} from 'vue'
export default {
name: 'App',
// 此处只是测试setup暂时不考虑响应式的问题。
setup(){
// 数据
let name = 'lqj';
let age = 20;
// 方法
function sayhello(){
alert(`我叫${name},我${age}岁了,你好啊`)
}
// 返回一个对象（常用）
return{
name,
age,
sayhello
}
}
}
</script>
显示返回函数（渲染函数）：
template：
代码语言：javascript复制<template>
</template>script：
代码语言：javascript复制<script>
import {h} from 'vue'
export default {
name: 'App',
// 此处只是测试setup暂时不考虑响应式的问题。
setup(){
// 返回一个函数（渲染函数）
return ()=> h('h1','lqj')
}
}
</script>
ONEPIECE是真是存在的！
