【Vue项目实践】vue创建一个新项目

参考链接:

1. Vite+Electron快速构建一个VUE3桌面应用(一)

1. 创建一个Vite项目

安装 vite 并创建项目， 输入项目名， 模板采用 vue ，其他的根据情况，可以先全部No
yarn create vite
创建完成后， 进入项目，在运行前需要先安装下依赖。
cd
yarn install
yarn dev


这样就可以运行一个 vue 项目了

2. 创建一个页面，进行最简单的加法计算. 这是vue 2中的语法

3. 创建一个页面实现一个简单的加法。 vue 3 语法

v-model 用来绑定值

@keyup 当输入框中的数据变动的时候，值同步变动，并触发事件

采用了 setup 与 ref ，改变了值的引用方式

4. 创建一个页面实现一个简单的加法。 vue 3 语法

这里采用了一个 reactive 对象来将多个状态进行了封装。 有点类似于 java 中的一个类，包含有多个属性的感觉了。

v-model 绑定属性的时候，也要采用 state 中对象的属性名了。 而最终模板中需要能使用到，还是要 return

5. 创建一个页面实现一个简单的加法。 vue 3 语法

这里采用了一个 reactive 对象来将多个状态进行了封装。 有点类似于 java 中的一个类，包含有多个属性的感觉了。

v-model 绑定属性的时候，也要采用 state 中对象的属性名了。 而最终模板中需要能使用到，还是要 return

这里 state 和 add 都可以 提到 setup 外面。 这样它们就会变成了一个 公共变量或公共方法，其他组件也将可以使用

6. 创建一个页面实现一个简单的加法。 vue 3 语法. 推荐

减少 keyup 这种事情监听。 直接采用 vue 中的computed 进行计算

作者：panie
出处：http://www.cnblogs.com/panie2015/

如果您希望与我交流互动，欢迎加我微信

本文内容为作者辛苦整理书写，欢迎转载，但请保留文章出处