使用vue3.0的体验感悟

　　介绍

使用vue3.0的体验感悟?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<强>环境搭建

直接使用脚手架,如果本地没有安装的可以执行脚手架安装命令:

 npm安装- g @vue/cli

如果本地安装过的,可以尝试更新一下:

npm更新- g @vue/cli

测试vue-cli版本:

　　4.4.1 @vue/cli

接下来创建一个vue项目:

在出现的命令交互窗口选择手动选择特点:

Vue CLI v4.4.1 　　,# 63;请选择一个预设: 　　常用配置(路由器,vuex sass,巴别塔,eslint) 　　sass(路由器,vuex sass,巴别塔,eslint) 　　测试(少,巴别塔,eslint) 　　eslint违约(巴别塔) 　　,# 10095;手动选择功能

随后勾选以下选项,一般开发商业项目都需要这些:

 Vue CLI v4.4.1
　　,# 63;请选择一个预设:手动选择功能
　　,# 63;检查你的项目所需的特性:
　　,# 9673;巴别塔
　　,# 9711;打印稿
　　,# 9711;先进的Web应用程序(PWA)支持
　　,# 9673;路由器
　　,# 9673;Vuex
　　,# 10095;及# 9673;CSS预处理程序
　　,# 9673;短绒/格式化程序
　　,# 9711;单元测试
　　,# 9711;E2E测试

回车后根据自己的习惯选择好,就开始创建项目。注意这时候还是vue2的项目环境,接下来就是升级为vue3的运行环境。

<>强升级为vue3.0项目

vue-cli还没有直接支持vue3.0,需要依赖插件升级,输入指令:

 cd vue3-demo
　　vue添加vue-next

执行完上述命令后,会自动安装vue-cli-plugin-vue-next插件,它会将项目升级为vue3.0的依赖环境,包括vue-router和vuex都会升级为4。x的版本。

<强>最新版vue-cli可以直接创建vue3项目了(2020.09更新)

今天将vue-cli更新到了4.5.4版本,发现可以直接创建vue3项目了。使用vue创建vue3-demo命令创建一个测试项目,会出现以下选项:

使用vue3.0的体验感悟

,可以直接选择默认的vue3配置,也可以选择最后一项来手动配置,这里演示手动配置,选择手动选择特性,回车:

使用vue3.0的体验感悟

根据需要选择,注意第一项表明了可以选择vue版本,选完后回车:

使用vue3.0的体验感悟

这里选择vue的版本,直接选择3。x回车即可。这样就能创建一个基于vue3搭建的项目了。

<强> vue3.0特性体验

按照上面步骤升级为vue3.0项目后,会自动帮我们将一些文件改成vue3.0的写法。

vue3创建vue实例不需要使新用的方式了,来看src/主要。js文件:

进口{createApp} & # 39; vue # 39; 　　从& # 39;进口程序。/App.vue& # 39; 　　从& # 39;进口路由器。/路由器# 39; 　　从& # 39;进口商店。/商店# 39; 　　 　　createApp (App) .use(路由器).use(存储).mount(& # 39; #应用# 39;)

现在是函数式风格来创建vue实例,还记得vue2是怎么创建实例的吗,对比下:

//Vue2创建实例
　　
　　从& # 39;进口Vue Vue # 39;
　　从& # 39;进口程序。/应用# 39;
　　从& # 39;进口路由器。/路由器# 39;
　　从& # 39;进口商店。/商店# 39;
　　
　　新Vue ({
　　艾尔:& # 39;#应用# 39;
　　路由器,
　　商店,
　　呈现:h=比;h(应用)
　　})

你喜欢哪一种方式?我比较喜欢vue3.0的函数式风格。

看看路由配置文件:src/路由器/索引。js 

进口{createRouter, createWebHistory} & # 39; vue-router& # 39;
　　从& # 39;进口回家. ./视图/Home.vue& # 39;
　　
　　const路线=[
　　｛
　　路径:& # 39;/& # 39;
　　名称:& # 39;回家# 39;
　　组件:回家
　　},
　　｛
　　路径:& # 39;/关于# 39;
　　名称:& # 39;关于# 39;//代码分隔路线水平//生成一个单独的块(约。(哈希). js)这条路线//访问延迟加载时的路线。
　　组件:()=比;进口(/* webpackChunkName:“about"*/& # 39;. ./视图/About.vue& # 39;)
　　}
　　］
　　
　　const路由器=createRouter ({
　　历史:createWebHistory (process.env.BASE_URL),
　　路线
　　}）
　　
　　出口的默认路由器

这是升级后路由配置方法,可以看到与vue2版本有很大的区别。现在创建路由实例需要手动引入createRouter方法,创历史建模式路由也需要手动引入createWebHistory方法,这达到Tree-Shaking的目的,即不会把所有的api都打包进的来,只会打包你用到的api, vue3将都会使用这种形式只

使用vue3.0的体验感悟