()()实践

2022-09-10 12:45 来源：读者提供作者：网友发布浏览：0

核心提示Vue 3 出来之后，很多人有如下想法，“又要学新东西啦”、“我学不动了”等等。但是事物总有它的两面性，前端知识更新的很快，利好勤奋好学的同学。计算机行业的迭代速度很快，前端在计算机领域里，算是前浪被拍在沙滩上比较快的。我很羡慕还在学校的同

Vue 3出来后，很多人都有以下想法:“我又要学新东西了”“我学不会了”等等。

但凡事总有两面性，前端知识更新快，对好学的同学有好处。计算机行业的迭代速度很快，前端在计算机领域，也就是说前浪拍在沙滩上比较快。

我很羡慕还在上学的同学，因为现在的大学生获取的信息比我在大学的时候多了很多。希望你能珍惜这个机会，好好学习新知识，进入社会不要挨打。

学习一项新技术，我觉得最好的方法是通过Demo创建使用场景，通过API查看。需要做到什么程度？

很可能，你可以对任何场景使用任何API。用简单的英语来说，你可以用Vue 3重构之前用Vue2.x写的代码。

一个

构建Vue3.0的三种方式

目前构建Vue 3项目有三种方式。

1、命令行工具

对于Vue 3，您应该使用在npm上作为@vue/cli@next提供的Vue CLI v4.5。要升级，您需要在全球范围内重新安装最新版本的@vue/cli:

yarn global add @ vue/CLI @ next # or NPM install-g @ vue/CLI @ next

2、邀请

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

通过在终端中运行以下命令，您可以使用Vite快速设置Vue项目。

使用npm:

npm init vite-app cd npm安装npm运行开发

3、网络包

很久以前，Vue-CLI不支持创建Vue 3项目。Vue团队做了一个Webpack项目配置，放在Github里，可以直接克隆使用。

git clone file/tupian/20220910/vue-next-webpack-preview demo v3 CD demo v3 NPM安装NPM运行Dev不特别推荐使用这种方法。现在有以上两种方法~ ~

代码实践

我们选择更新鲜的Vite来建立项目，如果我们想玩最时尚的。我的本地节点版本是v12.6.0，尽量保持一致。

构建项目

m init vite-app todo-v3cd todo-v3 NPM install//建议使用淘宝镜像cnpm installnpm run dev。

启动后，显示如下，表示成功:

“登录页面

首先看到的是main.js的变化:

//Vue 3.0从“Vue”导入{ createApp }从“导入应用程序”。/App.vue“导入”。/index . CSS ' create App . mount//Vue 2 . XIM import Vue from ' Vue ' import App from '。/App.vue'new Vue})。$mount

第一段代码是创建Vue 3的Vue实例的表单，类似于通过createApp的表单进行React。

第二段是Vue 2.x的Vue实例形式的创建，是以new的形式创建的。

添加路由Vue-路由器

到目前为止，vue-router-next已经更新到版本4.0.0-beta.12

如果您使用cnpm install vue-router安装路由，它将被下载到vue-router 3.x版本，我们需要使用:

cnpm安装vue-router@next -S

安装完成后，我们开始配置项目路径，在src目录下新建一个rourer文件夹，在文件夹下新建一个index.js文件，并添加以下内容:

从“vue-router”导入{createRouter，createWebHashHistory}导出默认createRouter，routes: []})

Vue 2.x的路由模式通过将模式选项设置为历史或哈希来控制。

在Vue 3中，路由实例由createRouter创建，历史属性作为控制路由模式的参数。createWebHashHistory的方法返回哈希模式，createWebHistory返回历史模式。本项目采用哈希模式。

同样，我们需要在mian.js中引入路由器实例:

从“vue”导入{ createApp }从“导入应用程序”。/App.vue“导入路由器自”。/router“import”。/index.css'createApp.use.mount

添加全局状态Vuex

Vuex已经更新到版本4 . 0 . 0-beta 4，所以我们需要按照以下说明进行安装:

cnpm i vuex@next -S

接下来，在src目录中创建store文件夹，然后创建一个新的index.js文件，并添加如下代码:

//vue 3 import { createstore } from ' vuex ' export default createstore { return { author:" thirteen " }；},});

对比Vue 2.x写作:

//Vue 2 . XIM import Vuex from ' Vuex ' Vue . useexportdefaultnew Vuex。商店

此外，还使用了一种新的编写方法，通过在vuex内部抛出的createStore方法来创建Vuex实例。

接下来我们将其引入main.js:

从“vue”导入{createapp}从“导入应用程序”。/app.vue '导入路由器自'。/router '从导入存储'。/store“导入”。/index.css'//chain调用createApp.use.use.mount

Vue3版本3组件库的Antd简介

Antdv2.x是汤金洲开发的适应Vue 3.0的新一代组件库。让我们试一试。在这里，我们在传递以下命令后下载它:

cnpm i -保存ant-design-vue@next -S

将ant-design-vue组件引入mian.js如下:

从“vue”导入{ createApp }，从“ant-design-vue”导入Antd从'导入应用程序。/App.vue“导入路由器自”。/router“从导入存储”。/store ' import ' ant-design-vue/dist/antd . CSS '；“导入”。/index.css'//本教程采用组件库createApp.use.use.use.mount的全局引入

检查测试是否成功。顺便解释一下Vue 3如何声明变量，如何通过方法改变变量。代码如下:

单击我并添加{{ count }}单击我并添加a{{ state.a }}单击我并添加b{{ state.b }}

如上面的代码所示，Vue 3新加入的设置方法颠覆了之前传统的选项属性模式，我们可以在设置方法中编写所有的业务逻辑。

我们有两种声明变量的形式:

Ref:用于声明简单的基本类型变量，如单个数、布尔、字符串等。反应式:用于对象引用类型的复杂变量。

如果要在模板中使用所有声明的变量和方法，它们必须在setup方法中返回，否则不能被调用。请记住，您返回的是一个声明。例如，如果返回count，将在模板中使用{{ count }}。如果返回state，将在模板中使用{{ state.a }}。效果如下:

三

待办事项

首先，我们创建一个新的views文件夹来放置页面组件，并在views中创建新的todo.vue文件，如下所示:

待办内容

#components-layout-demo-basic {min-height: 100vh;max-width: 40%;margin: 0 auto;background-color: #ededed; }#components-layout-demo-basic.ant-layout-header,#components-layout-demo-basic.ant-layout-footer {background: #7dbcea;text-align: center;color: #fff; }

介绍antd-v的布局组件，并给出一些基本样式。

然后转到App.vue和router/index.js，进行以下更改:

// App.vueimport {createRouter，createWebHashHistory } from ' vue-router ' export默认createRouter，routes: [ {path: '/todo '，component: =>import } ]})

最后，页面显示如下，表明配置成功:

添加待办事项输入框:

添加待办事项列表

如下图所示:

使用以下代码添加“待办事项”和“待办事项”模板:

待办事项列表添加待办事项列表和传递待办事项列表。

效果如下:

接下来，我们来补充相应的代理逻辑:

待办事项列表添加待办事项列表{{ item.content }}待办事项列表。

使用setup中的computed方法接收回调函数，回调函数中的变量将被监控。例如，已经监控了上述state.todoList。如果我们在handleCheck方法中修改了待办事项的状态，它也会被computed监控，所以模板template会被刷新。效果如下:

四

摘要

Vue 3.0还有很多值得探索的知识。以上内容只是简单的教你如何入门和构建项目，以及如何通过新的API结合组件库进行练习。后续我会继续整理其他实用技巧。源代码已经开源到GitHub vue3-examples仓库。仓库地址:https://github.com/newbee-ltd/vue3-examples.这个仓库会不定期的更新各种Vue3.0相关的知识以及各种Demo和Vue3整合的小技巧。可以关注一下，有什么建议也欢迎给我留言。

●程序员副业:我写作赚的第一笔收入

●Vue+Spring Boot前后分离的商城项目开源！

●《2020年总结》。这半年我做过哪些副业？

●程序员副业:996我们还要做副业吗？

●程序员副业:谈谈制作网络视频课程的体会。

●我写了一个地铁上的开源商城项目。

●开源项目在闲鱼和b站上被转卖？这是什么肮脏的操作？