shanghai
devilsmell@sina.com

vue3之多页面应用

that is another site

vue3之多页面应用

vue/cli已经出来很长时间了,最近有时间玩了一下,感觉比vue2更加简洁,配置起更加方便,话不多说开搞。

在安装vue3之前首先要把原来的vue2卸载了,命令vue uninstall -g vue-cli或者yarn global remove vue-cli,

卸载完成之后开始安装vue3,命令vue install -g @vue/cli 或者 yarn global add @vue/cli

安装完成之后开始新建项目,命令vue create + 项目名字

如上两个选项第一个是默认安装,第二个是手动安装,我们选择第二个,如下:

这个页面我们来选择所要使用的一些模块,可以根据情况自行选择,我的选择如下:

按回车键进入如下页面:

上面可以根据自己情况选择,第三个选项问你是否选择history模式。

安装完成之后目录如下:

命令npm run serve启动项目,启动完之后就可以直接访问了。

vue3没有了build文件和config配置文件,我们可以手动在根目录下添加一个vue.config.js文件,配置信息如下:

常用的配置如上所示:其中配置了多页面的应用pages在src目录新建目录如下:

main.ts配置如下:

router.ts代码如下:

这样多页面就可以使用了,自己在网上查了很多资料,看了很多博客,自己又摸索了很长时间学到的一点东西与大家分享一下,其中还有很多不足,请大家多多指正,共同学习共同进步。

想要了解的更加清晰请移步官网 https://cli.vuejs.org/zh/guide/

发表评论

电子邮件地址不会被公开。 必填项已用*标注