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 devnpx vite
  • 打包项目:npm run buildnpx vite build

浏览器输入localhost:3000,显示页面即可

Logo

前往低代码交流专区

更多推荐