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

后续内容持续更新…

项目地址

https://github.com/woyehaizaixiang/vue-next

Table of Contents