一、使用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的项目