1.安装vite
使用 NPM:
$ npm create vite@latest
然后按照提示操作即可！
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:
# npm 6.x
npm create vite@latest my-vue-app --template vue
# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue
2.引入elementPlus
element-plus.gitee.io/zh-CN/guide…
使用包管理器
# NPM
$ npm install element-plus --save
快速开始
本节将介绍如何在项目中使用 Element Plus。
用法
完整引入
如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')
按需导入
您需要使用额外的插件来导入要使用的组件。
自动导入推荐
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中
Vite
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
3.安装vue-router
npm
npm install vue-router@4
javascript
创建文件夹router，文件index.js
import {
createRouter,
createWebHashHistory
} from 'vue-router'
import Home from '../components/Home.vue'
const routes = [
{ path: '/', component: Home },
]
const router =createRouter({
history:createWebHashHistory(),
routes, // `routes: routes` 的缩写
})
export default router
App.vue
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
通过调用 app.use(router)，我们可以在任意组件中以 this.$router 的形式访问它，并且以 this.$route 的形式访问当前路由：
// Home.vue
export default {
computed: {
username() {
// 我们很快就会看到 `params` 是什么
return this.$route.params.username
},
},
methods: {
goToDashboard() {
if (isAuthenticated) {
this.$router.push('/dashboard')
} else {
this.$router.push('/login')
}
},
},
}
要在 setup 函数中访问路由，请调用 useRouter 或 useRoute 函数。
捕获所有路由或 404 Not found 路由
routes:
{ path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound },
404.vue
<template>
<div>
<el-result
icon="warning"
title="404提示"
sub-title="您找的页面走丢了~"
>
<template #extra>
<el-button type="primary" @click="$router.push('/')">返回首页</el-button>
</template>
</el-result>
</div>
</template>
<script setup>
</script>
<style scoped>
</style>
4.使用widcss
安装
安装相关包：
npm i -D vite-plugin-windicss windicss
然后，在你的 Vite 配置中添加插件：
vite.config.js
import WindiCSS from 'vite-plugin-windicss'
export default {
plugins: [
WindiCSS(),
],
}
最后，在你的 Vite 入口文件中导入 virtual:windi.css：
main.js
import 'virtual:windi.css'
案例：
