Vue3的初步了解

260 阅读1分钟

前言

  • 在对于vue来说vue3相对于vue2又增添了一些简单的语法,在vue2中有很多的缺点就比如说, 1.性能比react低

2.打包文件没有react轻简

3.对未来必然流行的TS没有react支持得好

创建Vue3.0项目

1、首先先要检查一下本电脑的脚手架至最新的版本。

yarn: yarn global add @vue/cli

npm : npm install -g @vue/cli

2、创建一个文件夹右键在终端打开。或者将文件夹直接拖到终端。在终端输入 vue create + 文件名字(名字随意)。

image.png

选择最后一个 Manually select features(自定义选项)。
第一个:Choose Vue version(选择Vue版本)
第二个:Babel(选择语言)
第三个:TypeScript(Ts)
第四个:Progressive Web App (PWA) Support(进步Web应用(PWA)支持)
第五个:Router(路由)
第六个:Vuex(Vuex存储)
第七个:CSS Pre-processors(css)
第八个:Linter / Formatter(短绒/格式化程序)
第九个:Unit Testing(单元测试)
第十个:E2E Testing(E2E测试) image.png

3、看自己需要哪些直接一路回车就好,在这里会有一个选项。我们直接选3.x (Preview)就好了。

image.png

4、成功之后cd project-name进入文件夹

image.png

5、在vscode中打开就是这样子的,运行 yarn serve或者是npm run serve,就可以打开了。

image.png —— 在创建Vue3.0中还有另一种创建项目的方法,上面的这一种运行起来有一些慢,但是第二种,运行速度就很快,但是学要自己自行安装 routerstore等等。 详情请看vite中文文档cn.vitejs.dev/guide/#comm…