创建Vue3工程

一、使用Vue-cil创建工程

先全局安装Vue脚手架:

npm install -g @vue/cli

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

vue -V

版本尽量在4.5及以上 。

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

vue create 项目名称

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

创建Vue3工程_第1张图片

回车,选择 [Vue 3] :

创建Vue3工程_第2张图片

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

创建Vue3工程_第3张图片

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

npm run serve

创建Vue3工程_第4张图片

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

创建Vue3工程_第5张图片

创建Vue3工程_第6张图片

 

二、使用Vite创建工程 

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

(一)Vite的优势

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

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

创建Vue3工程_第7张图片

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

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

创建Vue3工程_第8张图片

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

(二)创建方法

npm init vite-app 项目名称

创建Vue3工程_第9张图片

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

创建Vue3工程_第10张图片

这里会弹出提示,需要进入项目并安装依赖

cd 项目名称

npm i

创建Vue3工程_第11张图片

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

npm run dev

创建Vue3工程_第12张图片

按住Ctrl点击 http://ip地址:xxxx 进入项目:

创建Vue3工程_第13张图片

创建Vue3工程_第14张图片

你可能感兴趣的:(Vue,vue.js,前端,javascript)