【VUE3.0体验】升级VUE3.0，并新建项目

前言，去年刚学了VUE2.0，结合去年学的技术栈 .net core 3.1，IdentityServer4、Docker建立的微服务框架，再配合ElementUI做了一个后台管理项目，前后端分离，前段时间用uniapp写了一个微信小程序，还没深入，清明小长假准备看看去年更新的vue3技术，别的不说了，先开始吧。

使用的是MAC系统，安装步骤如下：

npm install -g @vue/cli 

新建项目

vue create vuedemo

后面的 cd vuedemo，npm install 这些根据提示安装即可。

下面说一下新出来的特性 setup和Composition API 

在components文件夹中新建一个新组件，hello1.vue

在app.vue中将hello1.vue换成起始界面

然后做一个列表显示，并可以添加的功能，代码如下

<template>
  <div v-for="(item, index) in state.users" :key="item.id">
    <div>{{ index }}--{{ item.name }}</div>
  </div>
  <input type="button" value="测试" @click="adduser" />
</template>
<script>
import { reactive } from "@vue/reactivity";
export default {
  name: "hello1",
  setup() {
    let state = reactive({
     users: [
       {
         id: 1,
         name: "a1",
         sex: "男",
       },
       {
         id: 2,
         name: "a2",
         sex: "女",
       },
       {
         id: 3,
         name: "a3",
         sex: "男",
       },
     ],
   }); //reactive用来存放数据，感觉相当于data，简单数据可以用ref，
   function adduser() {
     state.users.push({ id: 4, name: "a4", sex: "女" });
   }
    return { state, adduser };//抛出后可以让外界使用
  },
};

下一步，可以将里面的逻辑代码提出来

<template>
  <div v-for="(item, index) in state.users" :key="item.id">
    <div>{{ index }}--{{ item.name }}</div>
  </div>
  <input type="button" value="测试" @click="adduser" />
</template>
<script>
import { reactive } from "@vue/reactivity";
export default {
  name: "hello1",
  setup() {
    let {state,adduser) = UserManage();
};
function UserManage()
{
     users: [
       {
         id: 1,
         name: "a1",
         sex: "男",
       },
       {
         id: 2,
         name: "a2",
         sex: "女",
       },
       {
         id: 3,
         name: "a3",
         sex: "男",
       },
     ],
   }); //reactive用来存放数据，感觉相当于data，简单数据可以用ref，
   function adduser() {
     state.users.push({ id: 4, name: "a4", sex: "女" });
   }
    return { state, adduser };//抛出后可以让外界使用
 }

这时候就有意思，将逻辑代码另写成文件如何，这里再调用。

在src目录中新建bll目录，新建 user.js文件 

--bll/user.js
import { reactive } from "@vue/reactivity";
//这里说一下，exprot后面写default时，被调用，也就是被import时，不需要加大括号，否则需要加大括号。
export function UserManage() { 
    let state = reactive({
        users: [
            {
                id: 1,
                name: "a1",
                sex: "男",
            },
            {
                id: 2,
                name: "a2",
                sex: "女",
            },
            {
                id: 3,
                name: "a3",
                sex: "男",
            },
        ],
    });
    function adduser() {
        state.users.push({ id: 4, name: "a4", sex: "女" });
    }
    return { state, adduser };
}

逻辑提出以后，修改vue文件 

-- hello.vue
<template>
  <div v-for="(item, index) in state.users" :key="item.id">
    <div>{{ index }}--{{ item.name }}</div>
  </div>
  <input type="button" value="测试" @click="adduser" />
</template>
<script>
import { UserManage } from "../bll/user";
export default {
  name: "hello1",
  setup() {
    let { state, adduser } = UserManage();
    return { state, adduser };
  },
};
</script>

好了，先研究到这里，后面花点时间争取把原来的项目升级成vue3。