vue3 + vite 安装配置及项目创建

一、安装vue

VUE官网:https://cn.vuejs.org/,它有两种方法进行安装,第一种通过<script> 标签 CDN 引入方式。关键代码如下:

复制代码
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

第二种方法则是通过npm命令进行安装,其中命令如下所示。

复制代码
npm install vue -g

执行命令截图如下所示

二、安装Vite

其中Vite的官网地址:https://www.vitejs.net/,安装命令如下所示:

复制代码
npm install vite -g create-vite

安装截图如下所示。

三、用Vite创建项目

首先进入项目的目录,通过如下命令进行创建项目:create-vite app,通过vscode打开项目文件夹,进入到项目目录,其中截图如下所示

通过键盘上下键选择Vue,点回车

通过键盘上下键选择TypeScript,点回车

四、进入项目安装依赖

通过cd进入app目录,输入命令npm install 进行安装。

安装成功结果如下

五、启动app项目

在项目目录中执行命令npm run dev

在浏览器中输入http://localhost:5173/进行访问

相关推荐
天呐草莓4 分钟前
部署 Vue 项目到阿里云云服务器
服务器·前端·vue.js
初遇你时动了情4 分钟前
不用每个请求都写获取请求 类似无感刷新逻辑 uniapp vue3 react实现方案
javascript·react.js·uni-app
海阔天空095 分钟前
Cesium三维地形渲染
vue.js·github
27669582927 分钟前
京东最新滑块 分析
linux·前端·javascript·h5st·京东滑块·京东m端滑块·京东逆向
加洛斯7 分钟前
Pinia入门指南:三步上手,搞定状态管理
前端·vue.js
前端西瓜哥11 分钟前
图形编辑器:类 Figma 所见即所得文本编辑(2)
前端
拖拉斯旋风12 分钟前
🧠 `useRef`:React 中“默默记住状态却不打扰 UI”的利器
前端·javascript·react.js
用户6803257543212 分钟前
vue 上传文件到 OSS
前端
POLITE312 分钟前
Leetcode 3.无重复字符的最长子串 JavaScript (Day 4)
javascript·算法·leetcode