Vite创建Vue2项目
Vite创建Vue2项目
1、简约版
npm create vite@latest
自定义项目名称
选择框架
选择形式
创建成功
// 默认生成的vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})
文件夹目录
打开项目终端，安包
npm i
启动项目
npm run dev
浏览器打开项目
http://127.0.0.1:5173/
配置localhost
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 新增配置localhost
server: {
host: '0.0.0.0',
port: 8080
},
})
浏览器打开项目
localhost:8080
2、创建流程
在 Vite创建项目 中讲到，Vite 官方对 Vue 的支持只针对于Vue3.x 版本，而对于 Vue2.x 是不支持的。使 Vite 支持 Vue2.x，是需要安装插件来实现 官方vue2插件
1、使用vite创建基础项目
npm create vite@latest
2、输入项目名
按个人需求取即可，我这里随便叫一个vite-vue2吧
? Project name: vite-vue2
3、选择框架
? Select a framework: » - Use arrow-keys. Return to submit.
> vanilla // 原生js
vue // vue3
react // react
preact // 轻量化react框架
lit // 轻量级web组件
svelte // svelte框架
这里需要选择的是vanilla，因为选择vue直接创建的就是vue3项目
? Select a variant: >>Use arrow-keys. Return to submint.
> vanilla
vanilla-ts
如果你要用typescript的话就选着vanilla-ts
4、进入项目安装vue2插件
官方处理方式
$ cd vue2
$ npm install
$ npm install vite-plugin-vue2 -D
新建vite.config.js文件
// vite.config.js
import { createVuePlugin } from 'vite-plugin-vue2'
export default {
plugins: [
createVuePlugin(/* options */)
],
}
5、安装vue
由于直接npm install vue安装的是最新的vue，即vue3，所以在安装vue的时候需要带上你所需的版本号，这里我用的是v2.6.14
$ npm install vue@2.6.14 -S
6、修改项目结构
- 创建src文件夹
- 将 main.js 移入src 文件夹中，并修改：
// main.js
import Vue from "vue";
import App from "./App.vue"
new Vue({
el: "#app",
render: (h) => h(App)
}).$mount();
- 修改
index.html中对main.js的引用路径：<script type="module" src="/src/main.js"></script> - 在src文件中创建
App.vue，并修改：
<template>
<div>Vue 2</div>
</template>
7、启动项目
- 进入项目：
cd vue2 - 安装依赖：
npm install - 运行项目：
npm run dev或npx vite - 打包项目：
npm run build或npx vite build
浏览器输入localhost:3000，显示页面即可