一切项目的起点,从创建一个项目开始。
首先可以先了解一下vue3官方中文文档,然后我们开始vue3的安装以及创建第一个项目。
官方对js包管理为我们提供了两个选择,npm和yarn。大家可以任意选择,下面就用yarn来演示。
1.全局安装vue3.0
yarn global add @vue/cli@next
安装成后会有如下提示:
当然,如果你不是第一次安装,安装的速度会比较快,而且一般不会有warning,不过都没影响,提示安装成功就可以进行下面的操作。
2.创建项目
创建一个名为demo的项目
yarn create vite-app demo
创建成功后,如下提示:
3.安装依赖
进入项目根目录,安装依赖:
cd demo //进入项目根目录 yarn //安装依赖
安装成功后提示如下:
当然你也能在你的项目文件夹里看到你安装好的项目目录以及依赖文件夹:
4.运行项目
到了这一步我们就可以开始启动我们的项目了
yarn dev #启动项目
启动成后我们就可以通过访问我们的项目地址来实时预览项目,着手开发了
比如我的就可以访问:http://localhost:3000/ 或者 把localhost换成你本机ip就行了
5.打包项目
当然,当一个项目完成后,接下来的操作就是打包项目。vue3.0开发者首推的vite工具,从开始的时候我们也用到了,关于vite的优缺点,相信网上也有不少人讨论,但至于好不好用,用了才知道。
yarn build //项目打包
打包成功,你就会在项目文件下看到多出一个dist文件夹,这里面就是打包好的项目文件。
6.插件更新
当然,如果我们想把我们的插件更新到最新版本,也可以进行下面操作。有时候可能兼容性问题需要把插件更新或者回退,都可以一键操作(所有操作都在根目录下进行):
vue upgrade --next