vite +vue3.0项目

最新推荐文章于 2024-08-22 16:26:56 发布

waillyer

最新推荐文章于 2024-08-22 16:26:56 发布

阅读量234

点赞数 1

分类专栏： vue3 文章标签： vue

本文链接：https://blog.csdn.net/waillyer/article/details/120165889

版权

vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

安装

vitejs

#npm 6.x
npm init vite@latest my-vue-app --template vue
#npm 7+, 需要额外的双横线：
npm init vite@latest my-vue-app – --template vue

yarn

yarn create vite my-vue-app --template vue

使用 ant-design

文档https://2x.antdv.com/components/overview-cn/

yarn add ant-design-vue@next --save
npm i --save ant-design-vue@next

引用 antd

//main.js

import { createApp } from "vue";
import Antd from "ant-design-vue";
import App from "./App.vue";
import "ant-design-vue/dist/antd.css";
const app = createApp(App);
app.config.productionTip = false;

app.use(Antd);

// createApp(App).mount("#app");
app.mount("#app");

配置路由

现在我们安装 vue-router 版本的时候，默认还是安装的 3.x 版本的，由于 vue3 的更新发生很大的变化，所以为了兼容处理，vue-router 也将发布最新版 4.x 版本了。

yarn add vue-router@next --save

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
    // {
    //     path: "/",
    //     name: "login",
    //     component: () => import("../pages/Aaccount/login.vue"),
    // },
    {
        path: "/home",
        name: "Home",
        component: () => import("../pages/Home/index.vue"),
        redirect: "/user",
        children: [
            {
                path: "/user",
                name: "/user",
                component: () => import("../pages/Users/index.vue"),
            },
        ],
    },
];

const router = createRouter({
    //通过 createWebHashHistory() 创建 hash 模式。
    history: createWebHashHistory(),
    routes,
});

export default router;