资阳地网站seo,有限责任公司自然人投资或控股,建设商城网站费用,做网站主要学什么文章目录 1.创建Vue3.0工程1.1使用vue-cli创建1.2 使用vite创建工程1.3.分析Vue3工程结构 2.常用Composition2.1 拉开序幕的setup2.2 ref函数_处理基本类型 1.创建Vue3.0工程
1.1使用vue-cli创建
查看vue/cli版本#xff0c;确保vue/cli版本在4.5.0以上 如果不是#xff0… 文章目录 1.创建Vue3.0工程1.1使用vue-cli创建1.2 使用vite创建工程1.3.分析Vue3工程结构 2.常用Composition2.1 拉开序幕的setup2.2 ref函数_处理基本类型 1.创建Vue3.0工程
1.1使用vue-cli创建
查看vue/cli版本确保vue/cli版本在4.5.0以上 如果不是则重新安装或升级你的vue/cli
npm install -g vue/cli创建vue项目去你想创建的目录下执行该语句
vue create vue3_teat出现报错解决问题参考博客npm install安装时一直idealTree:npm: sill idealTree buildDeps解决方案 需要更换一下镜像网站进入cmd后输入
npm config set registry https://registry.npmmirror.com查看是否成功
npm config get registry创建成功页面 启动项目注意路径要切换到项目里
cd vue3_test
npm run serve最后复制地址到浏览器运行查看
1.2 使用vite创建工程
什么是vite? --新一代前端构建工具 现在这一代构建工具是webpack vite的启动速度会更快动态引用代码分割
传统构建与vite构建对比 传统的是先打包好再启动服务器vite是先启动服务器再按需编译不再等待整个应用编译完成。
1.3.分析Vue3工程结构 构造函数与工厂函数区别 构造函数需要通过new关键字调用工厂函数无需通过new关键字调用
2.常用Composition
2.1 拉开序幕的setup
1.Vue3中的一个新的配置项值为一个函数 2.组件中所用到的数据、方法等均要配置在setup中
3.setup函数的两种返回值 如果返回一个对象则对象中的属性方法在模板中均可以直接使用 即我写在return里面的属性、方法在template中是可以直接使用的 如果返回一个渲染函数则可以自定义渲染内容
templateh1我是App组件/h1h2姓名{{name}}/h2h2年龄{{age}}/h2button clicksayHello说话/button
/templatescript
export default {name: App,//此处只是测试一下setup暂时不考虑响应式的问题setup:function(){//数据所谓数据就是直接定义变量let name 张三let age 18//方法function sayHello(){alert(我叫${this.name}我${this.age}岁了你好啊)}return{name,age,sayHello}}
}
/script
4.vue2与vue3尽量不要混用 vue2配置data,methos,computed…)中可以访问到setup中的属性方法。 但是setup中不能访问到vue2配置datamethodscomputed… 如果有重名setup优先 5.setup不能是一个async函数因为返回值不再是return的对象而是promise模板看不到return对象中的属性
2.2 ref函数_处理基本类型
