vite创建vue2项目的步骤
时间: 2025-01-08 10:38:39 浏览: 7
### 创建 Vue 2 项目使用 Vite
尽管官方更推荐 Vite 配合 Vue 3 使用,但也可以通过一些配置来支持 Vue 2。下面是如何利用 Vite 来搭建一个基于 Vue 2 的开发环境。
#### 安装 Node.js 和 npm
确保本地已经安装了最新版本的 Node.js 及其包管理工具 npm。这一步骤对于后续命令行操作至关重要[^1]。
#### 初始化新项目并安装依赖项
打开终端,在期望的位置创建一个新的文件夹作为项目的根目录,并进入该文件夹:
```bash
mkdir vue2-vite-project && cd $_
```
初始化 Git 版本控制系统以便于管理和追踪代码变更:
```bash
git init
```
执行 `npm` 命令以快速建立 package.json 文件而无需回答过多问题:
```bash
npm init -y
```
接着添加 Vite CLI 工具到全局环境中(如果尚未完成),这样可以在任何地方调用 vite 命令:
```bash
npm install --global create-vite@latest
```
现在可以借助 `create-vite` 脚手架来构建自定义模板的应用程序结构:
```bash
npx create-vite .
```
当提示选择框架时输入 `vue` 并按回车键确认;之后会询问是否要覆盖现有文件,这里可以选择否(n),因为之前已有的配置不会影响接下来的操作。
#### 修改默认设置适应 Vue 2
由于 Vite 默认针对的是 Vue 3 生态圈,所以需要做一些调整让其兼容 Vue 2 应用。编辑 `package.json` 中 scripts 字段下的 dev 和 build 指令如下所示:
```json
{
"scripts": {
"dev": "vite",
"build": "vite build"
}
}
```
同时还需要更改 `main.js` 或者其他入口 JS 文件顶部引入语句中的 Composition API 插件为 Options API 形式的 Vue 实例化方式:
```javascript
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
```
最后更新 `public/index.html` 内部 script 标签指向正确的路径以及移除不必要的属性:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Vue 2 Project</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
```
此时应该能够顺利启动服务器查看效果了!
阅读全文