Vue3实战系列：结合 Ant-Design-of-Vue

学习是一个循循渐进的过程任何事物都在更新我们也要不断地更新特别是技术,计算机行业的迭代速度很快，前端在计算机领域里。 Vue3.0 的三种方式

1、命令行工具 (CLI) npm/cnpm/yarn install -g @vue/cli@next

2、Vite Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码
3、Webpack

代码实践：

1.入口页面main.js:

Vue 3 的创建 Vue 实例形式，通过 createApp 的形式;如下图:

2.添加路由Vue-Router

Vue3需要使用cnpm install vue-router@next -S进行安装在src下面建立router文件夹并且建立index.js 通过 createRouter 创建路由实例，history 属性作为控制路由模式的参数，createWebHashHistory 方法返回的是 hash 模式，createWebHistory 返回的是 history 模式，本项目采用 hash 模式同样，我们需要在 mian.js 中引入 router 实例

3.全局添加Vuex vuex 更新到了 v4.0.0-beta.4 版本通过cnpm/npm vuex@next -S然后再src里面建立store文件夹并且建立index.js

vue3使用如下图:

4.引入 Antd for Vue3 版本组件库

安装：cnpm i --save ant-design-vue@next -S

在main.js里面引入ant-design-vue 例:import 'ant-design-vue/dist/antd.css';

vue 3 新增的 setup 方法，颠覆了之前传统的 options 属性方式，我们可以将逻辑都写在 setup 方法中。

vue3两种声明变量的方式:

   1.ref：它用于声明简单的基础类型变量，如单个数字、boolean、字符串等等
   2.reactive：它用于对象引用类型的复杂变量

所有声明好的变量和方法，如果想在 template 模板里使用的话，必须在 setup 方法里 return，否则无法调用。记住返回什么就是声明，如返回 count，模板中就用 {{ count }}，返回 state，模板中就使用 {{ state.a }} 总结一下是通过学习写的小的实例:希望大家能够学习并且指出一定的问题一起加油！！！！