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

参考链接:

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

1. 创建一个Vite项目

安装 vite 并创建项目， 输入项目名， 模板采用 vue ，其他的根据情况，可以先全部No
yarn create vite

创建完成后， 进入项目，在运行前需要先安装下依赖。

cd <your-vue-app-name>
yarn install
yarn dev

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

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

<template>
  <div class="hello">
    <input type="text" v-model="num1" >
    +
    <input type="text" v-model="num2" >
    =
    {{result}}
  </div>
</template>


<script>
  import {reactive,computed} from "vue"
  export default {
    name : "HelloWorld",
    props :{
      msg :String
    },
    data(){
      return {
        num1:0,num2:0,result:0
      };
    },
    computed:{
      result(){
        return parseInt(this.num1) + parseInt(this.num2)
      }
    }
  }
</script>

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

v-model 用来绑定值
@keyup 当输入框中的数据变动的时候，值同步变动，并触发事件
采用了 setup 与 ref ，改变了值的引用方式

<template>
  <div class="hello">
    <input type="text" v-model="num1" @keyup="add()">
    +
    <input type="text" v-model="num2"  @keyup="add()">
    =
    {{result}}
  </div>
</template>


<script>
  import {ref} from "vue"
  export default {
    name : "HelloWorld",
    props :{
      msg :String
    },
    setup(){
      const num1 = ref(0)
      const num2 = ref(0)
      const result = ref(0)
      function add(){
        result.value = parseInt(num1.value) + parseInt(num2.value)
      }
      return {
        num1,num2,result,add
      }
      const state = reactive({
        num1:0,
        num2:0,
        result:computed(()=>parseInt(num1) + parseInt(num2))
      });
      return {
        state
      };
    }
  }
</script>

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

这里采用了一个 reactive 对象来将多个状态进行了封装。 有点类似于 java 中的一个类，包含有多个属性的感觉了。
v-model 绑定属性的时候，也要采用 state 中对象的属性名了。 而最终模板中需要能使用到，还是要 return

<template>
  <div class="hello">
    <input type="text" v-model="state.num1" @keyup="add()">
    +
    <input type="text" v-model="state.num2"  @keyup="add()">
    =
    {{state.result}}
  </div>
</template>


<script>
  import {reactive} from "vue"
  export default {
    name : "HelloWorld",
    props :{
      msg :String
    },
    setup(){
      function add(){
        state.result = parseInt(state.num1) + parseInt(state.num2)
      }
      const state = reactive({
        num1:0,
        num2:0,
        result:0
      });
      return {
        state,add
      };
    }
  }
</script>

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

这里采用了一个 reactive 对象来将多个状态进行了封装。 有点类似于 java 中的一个类，包含有多个属性的感觉了。
v-model 绑定属性的时候，也要采用 state 中对象的属性名了。 而最终模板中需要能使用到，还是要 return
这里 state 和 add 都可以 提到 setup 外面。 这样它们就会变成了一个 公共变量或公共方法，其他组件也将可以使用

<template>
  <div class="hello">
    <input type="text" v-model="state.num1" @keyup="add()">
    +
    <input type="text" v-model="state.num2"  @keyup="add()">
    =
    {{state.result}}
  </div>
</template>


<script>
  import {reactive} from "vue"
  export default {
    name : "HelloWorld",
    props :{
      msg :String
    },
    setup(){
      function add(){
        state.result = parseInt(state.num1) + parseInt(state.num2)
      }
      const state = reactive({
        num1:0,
        num2:0,
        result:0
      });
      return {
        state,add
      };
    }
  }
</script>

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

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

<template>
  <div class="hello">
    <input type="text" v-model="state.num1" >
    +
    <input type="text" v-model="state.num2" >
    =
    {{state.result}}
  </div>
</template>


<script>
  import {reactive,computed} from "vue"
  export default {
    name : "HelloWorld",
    props :{
      msg :String
    },
    setup(){
      const state = reactive({
        num1:0,
        num2:0,
        result: computed(()=>parseInt(state.num1) + parseInt(state.num2))
      });
      return {
        state
      };
    }
  }
</script>