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')
相关推荐
牧羊狼的狼29 分钟前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手2 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one2 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲2 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell2 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830944 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮4 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel5 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
前端工作日常5 小时前
我学习到的Vue2.6的prop修饰符
vue.js
gnip5 小时前
JavaScript事件流
前端·javascript