Vue3.0体验
使用vite初始化项目
npm i vite
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
安装vue-router@next
npm install vue-router@next --save
在src router文件夹新建index.js使用vue-router
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";
const routes = [
{
path: "/",
redirect: '/home',
},
{
path: "/home",
name: "Home",
component: Home,
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
export default router;
安装vuex@next
npm install vuex@next --save
在src store文件夹新建index.js使用vuex
import Vuex from "vuex";
export default Vuex.createStore({
state: {},
mutations: {},
actions: {},
modules: {},
});
修改main.js
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
createApp(App).use(router).use(store).mount("#app");
在入口文件App.vue中添加路由入口
<template>
<router-view />
</template>
添加webpack配置文件
在项目根目录新建vite.config.js,类似vue.config.js
module.exports = {
alias: {},
proxy: {},
};
最后重启项目
npm run dev
后续内容持续更新…