搭建腳手架

創建項目：



然后按照它的指示運行項目

配置文件

安裝構建 vue-router：

npm i vue-router@next

創建 router/index.js 文件：

import { createRouter, createWebHistory } from 'vue-router'const routes = [{path: '/',name: 'Home',// 按需加載component: () => import('../views/Home.vue')} ]const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes })export default router

安裝構建 vuex

npm i vuex@next

創建 store/index.js 文件

import { createStore } from 'vuex'export default createStore({state: {},mutations: {},actions: {},modules: {} })

在 main.js 中使用 router 和 store:

import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store'// 掛載實例 const app = createApp(App) app.use(store) app.use(router) app.mount('#app')

創建 views/Home.vue 文件：

<template><div class="home">首頁</div> </template><script>export default {name: 'Home',components: {},}; </script><style scoped></style>

更改 App.vue 文件：

<template><div id="app"><router-view/></div> </template><style> html, body, #app {width: 100%;height: 100%; } </style>

使用 vite 安裝 vue3 時，如果使用了 process.env，會遇到 process 未定義的情況，原因是 process.env 已經被移除了。解決辦法是在 vite.config.ts 中增加 define：

import { defineConfig } from 'vite' // ... export default defineConfig({// ...define: {'process.env': {}} })

運行項目看看

npm run dev

CSS 重置

在 public 目錄下新建一個 css 文件夾，在 public/css 目錄下新建 reset.css，把瀏覽器自主設置的樣式去掉；

代碼網址：CSS Tools: Reset CSS

/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126License: none (public domain) */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block; } body {line-height: 1; } ol, ul {list-style: none; } blockquote, q {quotes: none; } blockquote:before, blockquote:after, q:before, q:after {content: '';content: none; } table {border-collapse: collapse;border-spacing: 0; }

然后在 index.html 的 head 標簽中引用：

<link rel="stylesheet" href="./public/css/reset.css">

安裝 Ant Design Vue

在項目目錄終端輸入一下命令：

npm install ant-design-vue@next --save

在 main.js 文件中引入：

import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css'const app = createApp(App); app.config.productionTip = false;app.use(store) app.use(router) app.use(Antd); app.mount('#app');

引入本地圖片

將圖片放置在 src/static 文件中引用即可：

總結

以上是生活随笔為你收集整理的【Vue3】创建 vite + vue3 + Ant Design Vue 项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。