下面是详细攻略。
搭建vite项目
- 全局安装
vite：
npm install -g vite
- 创建一个项目目录，进入项目目录，初始化
package.json文件：
mkdir my-vite-project
cd my-vite-project
npm init -y
- 安装依赖：
npm install vite vue vue-router
- 在项目目录下创建
src目录，并新建一个index.html作为入口文件，并在其中引入vue和vue-router：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>My Vite Project</title>
</head>
<body>
<div id="app"></div>
<script type="module">
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");
</script>
</body>
</html>
- 在
src目录下创建App.vue组件，并添加一些内容：
<template>
<div>
<h1>{{ message }}</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello, Vue!",
};
},
};
</script>
- 创建路由配置文件
router.js：
import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";
const routes = [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/about",
name: "about",
component: About,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
- 在
src目录下创建views子目录，并在其中分别创建Home.vue和About.vue组件，分别添加一些内容：
<!-- Home.vue -->
<template>
<div>
<h2>Home</h2>
<p>Welcome to my home page!</p>
</div>
</template>
<script>
export default {};
</script>
<!-- About.vue -->
<template>
<div>
<h2>About</h2>
<p>Learn more about me.</p>
</div>
</template>
<script>
export default {};
</script>
- 在
package.json文件中添加一条启动命令：
{
"scripts": {
"dev": "vite"
}
}
- 运行项目：
npm run dev
打开浏览器，访问http://localhost:3000即可看到页面。
配置路由和element-plus
- 安装
element-plus：
npm install element-plus
- 在
main.js中引入element-plus：
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')
- 修改
App.vue，添加element-plus的el-header组件和el-main组件，并将原有的内容放在el-main组件中：
<template>
<div>
<el-header>
<el-menu :default-active="$route.path" mode="horizontal">
<el-menu-item index="/">Home</el-menu-item>
<el-menu-item index="/about">About</el-menu-item>
</el-menu>
</el-header>
<el-main>
<h1>{{ message }}</h1>
<router-view></router-view>
</el-main>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello, Vue!",
};
},
};
</script>
- 在
router.js中修改路由配置，将component属性改为component: () => import('./views/xxx.vue')的形式，这样可以实现路由懒加载：
const routes = [
{
path: "/",
name: "home",
component: () => import("./views/Home.vue"),
},
{
path: "/about",
name: "about",
component: () => import("./views/About.vue"),
},
];
至此，我们就完成了使用vite搭建项目并配置路由和element-plus的工作。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：一文教会你搭建vite项目并配置路由和element-plus - Python技术站
微信扫一扫 
支付宝扫一扫 