①Vue3 使用Vite或@vue/cli 创建项目


写下博客主要用来分享知识内容,并便于自我复习和总结。
如有错误之处,请各位大佬指出。


前言

2020年9月18日,Vue3.0版本算是发布了,虽然在很多方面有了较大提升,但显然它还需要不断地进行更新和调整。而且很多组件库和插件短期内不可能快速升级到Vue3.0,因此公司的项目短期内还没决定将Vue2.0全部升级到Vue3.0。虽然现在还未普及,但随着现在版本的发布,Vue3.0的学习需要提上日程,为之后的使用做准备了。所以现在记录一些,现阶段对Vue3.0版本需要了解的一些很基础的知识内容。

(需要补充一点的是:Vue3.0采用TypeScript重写,所以如果想阅读Vue3.0的源码需要学习TS,之后我也会发布TypeScript学习文章)


Vue3.0的新特性

①Vue3 使用Vite或@vue/cli 创建项目
之后的内容会围绕这些新特性进行学习。


创建项目

Vite

我在这里也是第一次知道Vite,这个Vite是Vue作者开发的一款意图取代webpack的工具。它的实现原理是利用ES6的import会发送请求去加载文件的特性,拦截这些请求,做一些预编译,省去webpack冗长的打包时间。(这种方式建出的项目是Vue3项目,和@vue/cli不同。详情见下面@vue/cli的建项目流程)

流程:
①Vue3 使用Vite或@vue/cli 创建项目


@vue/cli

流程:
①Vue3 使用Vite或@vue/cli 创建项目
具体:
首先是新建Vue3的项目工程,其中Vue-CLI的版本一定要在4.3.1及以上

查看@vue/cli版本方式:vue -V

如果是3.0版本以前都是叫做vue-cli,现在叫做@vue/cli。
因此如果是安装了老版本的vue-cli,先卸载老版本:npm uninstall vue-cli –g
然后安装新版本即可:npm install –g @vue/cli

当@vue/cli升到新版本后,node版本也需要提升,否则在之后的使用中会报错:
①Vue3 使用Vite或@vue/cli 创建项目
查看node版本方式:node –v。最低限度的node版本暂时不知道。

更新node.js:去本地下载路径中卸载老版本,然后去官网下载最新版本。

以上都做好了之后,我们像Vue2一样,去创造项目。

(2020/10/27时,自动生成的项目还是2.x,如果之后变成3.x,请忽略以下内容)

现在打开项目之后,先去package.json中,可以发现此时的vue还是2.x,
①Vue3 使用Vite或@vue/cli 创建项目
那么要想使用3.x需要手动升级到vue3。
升级方法:vue add vue-next
①Vue3 使用Vite或@vue/cli 创建项目
然后通过看项目结构,以及各个文件中的内容就可以发现,真的很简洁。现在去掉生成项目时的默认内容(assets和components中的内容),就可以开始我们的项目了。

现在升到3.x版本后,运行项目可能会出现以下提示:
①Vue3 使用Vite或@vue/cli 创建项目
我们只需要删除package.json中的依赖就可以了。
①Vue3 使用Vite或@vue/cli 创建项目