vite搭建vue2项目

1. 创建项目

注意:这里vite的版本采用2.8.0的,最新的版本创建后续会出现问题

js 复制代码
npm init vite@2.8.0
2. 安装vite对vue2支持的插件
js 复制代码
yarn add vite-plugin-vue2@1.9.3 -D
3. 在根目录vite.config.js文件,来注册插件
js 复制代码
import { defineConfig } from 'vite' // 动态配置函数
import { createVuePlugin } from 'vite-plugin-vue2'
import { resolve } from 'path'

export default () =>
	defineConfig({
		plugins: [createVuePlugin()],
		server: {
			open: true, //自动打开浏览器
			port: 1567 //端口号
		},
		resolve: {
            // 别名
			alias: [
				{
					find: '@',
					replacement: '/src'
				}
			]
		}
	})
4. 安装vue依赖
js 复制代码
yarn add vue@2.x vue-template-compiler@2.x -S	
5.修改main.js
js 复制代码
import Vue from 'vue'
import App from './App.vue'

new Vue({
	render: h => h(App)
}).$mount('#app')
6. 安装vue-router
js 复制代码
yar add vue-router@3.5.2 -S

新建router目录,添加需要的页面

js 复制代码
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        meta: { title: '首页' },
        component: () => import('@/views/home/index.vue')
    }
]

const router = new VueRouter({
    mode: 'history',
    base: '/',
    routes
})
export default router
7. 在main.js里注册
js 复制代码
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
8. 安装vuex
js 复制代码
yarn add vuex@3.6.2 -S
  1. 创建store目录,并在store目录下创建index.js
js 复制代码
// index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // 使用Vuex
export default new Vuex.Store({
	state: {
		count: 0
	},
	mutations: {
		increment(state) {
			state.count++
		}
	},
	actions: {},
	modules: {}
})
  1. 全局注册
js 复制代码
import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import store from './store'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
相关推荐
yi碗汤园1 分钟前
【超详细】C#自定义工具类-StringHelper
开发语言·前端·unity·c#·游戏引擎
麦麦大数据26 分钟前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
Kevin Wang7271 小时前
解除chrome中http无法录音问题,权限
前端·chrome
vipbic1 小时前
使用Cursor开发Strapi5插件bag-strapi-plugin
前端·ai编程·cursor
专注前端30年1 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
ikoala1 小时前
Node.js 25 正式发布:性能飙升、安全升级、全面向 Web 靠拢!
前端·面试·node.js
陈振wx:zchen20081 小时前
前端-ES6-11
前端·es6
菜鸟una2 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年2 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js2 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发