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、修改项目结构

1. 创建src文件夹
2. 将 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，显示页面即可