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/进行访问

### Vite 安装教程 Vite 是一种现代化的前端构建工具,支持快速开发并优化了传统的打包流程。以下是关于如何安装配置 Vite 的详细说明。 #### 1. 创建一个新的项目目录 首先需要创建一个新的文件夹作为项目的根目录,并进入该文件夹: ```bash mkdir my-vite-project cd my-vite-project ``` #### 2. 初始化 `package.json` 文件 初始化一个基础的 Node.js 项目结构,执行以下命令会生成默认的 `package.json` 文件: ```bash npm init -y ``` 这一步完成后会在当前目录下生成一个初始版本的 `package.json` 文件[^4]。 #### 3. 安装 Vite 和其他必要的依赖项 对于标准的 Vite 设置,可以简单地通过以下命令全局或者局部安装 Vite: ##### 局部安装(推荐) 如果希望将 Vite 只用于特定项目,则可以通过如下方式将其添加到本地依赖中: ```bash npm install vite --save-dev ``` 此时可以在 `package.json` 中定义一些常用的脚本命令以便于后续操作,例如: ```json { "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" } } ``` 上述脚本分别对应开发模式启动、生产环境构建以及预览已构建的应用程序的功能[^1]。 #### 4. 配置框架插件 (可选) 根据实际需求可以选择不同的前端框架集成 Vite 。比如要搭建基于 Vue2 的应用就需要额外引入相关插件: - **Vue2 支持** 如果目标是兼容旧版 Vue(即 Vue2),那么还需要增加对应的适配器包: ```bash npm add vue@2.7.16 npm add -D @vitejs/plugin-vue2@2.3.1 ``` 之后记得再次运行完整的依赖解析过程以确保所有组件都能正常工作: ```bash npm install ``` 最后就可以按照常规方法开启服务啦: ```bash npm run dev ``` 以上就是整个设置过程中涉及的主要环节概述。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

计算机软件大师

您的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值