使用vite构建Vue项目（element-plus + vue-router）

目录

1、检查环境（node、pnpm）

2、环境配置和启动服务

3、使用Hbuilderx导入项目

4、添加ElementPlus

5、在项目中引入路由router

6、测试是否配置成功

---

1、检查环境（node、pnpm）

在任意目录下运行命令：node -v  pnpm -v

2、环境配置和启动服务

在指定文件夹下创建vue项目，在命令行中运行命令（把其中的my-vue-app替换为你的项目名）：

pnpm create vite my-vue-app --template vue

继续运行以下命令，进入你的项目目录：

cd my-vue-app

继续运行以下命令，安装第三方支持文件，初始化项目依赖，确保项目能够正确地构建和运行：

pnpm install

继续运行以下命令，启动项目,确保项目已经被正确初始化：

pnpm run dev

在给出的网址下如果

3、使用Hbuilderx导入项目

4、添加ElementPlus

在项目文件下运行以下命令，下载element-plus的依赖：

pnpm install element-plus

在项目文件下运行以下命令，下载element-plus的图标库依赖：

pnpm install @element-plus/icons-vue

在main.js中导入element-plus，并注册：

//导入element-plus（完整引入）
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//引入ElementPlus的图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
//注册element-plus
app.use(ElementPlus )
//图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.mount('#app')

5、在项目中引入路由router

在src目录下添加一个文件夹pages，然后在该文件夹下创建两个Vue文件(Home.vue和About.vue):

Home.vue：

<template>
	<h1>首页</h1>
</template>

<script>
</script>

<style>
</style>

About.vue：

<template>
	<h1>关于我们</h1>
</template>

<script>
</script>

<style>
</style>

在项目文件下运行以下命令，下载vue-router的依赖：

pnpm add vue-router@4

在src目录下添加一个文件夹router，然后在该文件夹下创建一个js文件index.js：

index.js:

import { createWebHashHistory, createRouter } from 'vue-router'

//引入自定义的vue文件
import Home from '../pages/Home.vue'
import About from '../pages/About.vue'

//路由表
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
]

//创建路由对象
const router = createRouter({
  history: createWebHashHistory(),
  routes,
})

//导出路由，这样做是为了让其他部分的代码能够方便地导入和使用这个路由实例
export default router

在main.js中导入路由实例，并注册路由插件：

//导入路由实例
import router from './router'

const app = createApp(App)
//注册路由插件
app.use(router)
app.mount('#app')

6、测试是否配置成功

App.vue：

<template>
	<!-- 超链接 -->
	<router-link to="/">首页</router-link>&nbsp;
	<router-link to="/about">关于我们</router-link>
	
	<!-- 给定路由出口 -->
	<router-view></router-view>
</template>

运行该项目（在项目文件下的命令行中运行命令：pnpm run dev），从浏览器进入给定网页地址，分别点击“首页”和“关于我们”，页面上的文字会发生变化，则代表路由配置成功。