创建Vue3工程

一、使用Vue-cil创建工程

先全局安装Vue脚手架：

npm install -g @vue/cli

安装完成后输入如下命令就可以查看到Vue的版本：

vue -V

版本尽量在4.5及以上 。

输入如下指定常见Vue项目：

vue create 项目名称

注意：项目名中不要有大写字母、空格、中文 

回车，选择 [Vue 3] :

等待安装，等到出现Successfully created project 就是创建成功：

输入如下指令运行创建的项目：

npm run serve

按住Ctrl点击 http://localhost:xxxx 进入项目：

二、使用Vite创建工程 

在使用Vite创建的工程中，我们打包项目的速度就会更快。

（一）Vite的优势

下图为传统打包工具的工作流程：

将所有代码打包完毕后给出打包完毕的服务器。

下图为Vite打包工具的工作流程：

先给出服务器，根据用户的需要立即打包需要展示的代码。

但我们在目前阶段很少使用Vite来创建项目，或许在以后会成为主流。

（二）创建方法

npm create vue@latest

如果出现 Ok to proceed，直接y+回车 

 

输入项目名称，根据自己的需要选择项目依赖

在路径下就会出现创建的项目

我们在VSCode中打开项目，如果是第一次打开Vue3的项目，就会在右下角弹出一个安装依赖的弹窗，直接点击安装即可。

输入npm i 安装项目的依赖

启动项目

npm run dev

按住Ctrl点击下面的连接，就能打开Vue3的项目