一、 创建vite项目
快速创建vite项目
npm create vite@latest
npm i
分步创建vite项目
// 命令会生成package.json默认文件
npm init -y
//安装开发环境下vite的依赖
npm i vite -D
//安装vue的依赖
npm i vue
//安装开发环境下解析vite的插件@vitejs/plugin-vue
npm i @vitejs/plugin-vue -D
- 配置vite.config.js文件
import {defineConfig} from "vite"
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins:[Vue()]
})
- 新建App.vue文件
<template>
hello
</template>
- 新建main.js
import {createApp} from "vue"
import App from './App.vue'
const app = createApp(App);
app.mount('#app')
- 新建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./src/main.js"></script>
</body>
</html>
二、路由安装
2.1 安装插件
npm i vue-router -D
2.2 使用路由
- App.vue修改
<template>
<router-view></router-view>
</template>
- main.js修改
import {createApp} from "vue"
import App from './App.vue'
import router from "./router";
const app = createApp(App);
app.use(router)
app.mount('#app')
- 创建router.js
import {createRouter,createWebHashHistory} from "vue-router"
const router = createRouter({
routes:[
{
component:()=>import('../pages/print_setting.vue')
},
{
path:'/print_setting',
component:()=>import('../pages/print_setting.vue')
}
],
history:createWebHashHistory()
})
export default router
2.3 文件路由
每次新建页面都需要配置路由，繁琐且管理不便，我们映入自动路由插件vite-plugin-pages
npm i -D vite-plugin-pages
- 在vite.config.js配置插件
import {defineConfig} from "vite"
import Vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'
import Pages from 'vite-plugin-pages'
export default defineConfig({
plugins:[
Vue(),
Pages({
dirs:'pages',
extensions: ['vue']
}),
AutoImport({import:['vue','vue-rouetr']}),
Components({
resolvers:[ElementPlusResolver()]
})
]
})
- 在router.js中使用插件
import {createRouter,createWebHashHistory} from "vue-router"
import routes from '~pages'
const router = createRouter({
routes,
history:createWebHashHistory()
})
export default router
三、按需加载组件插件安装
在页面中使用组件每次都需要import组件，unplugin-vue-components可以使页面不需要手动import组件，自动按需引入
npm i unplugin-vue-components -D
- 修改vite.config.js，使用该插件，并加入element-plus解析器
import {defineconfig} from "vite"
import Vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components'
export default defineconfig({
plugins:[Vue(),Components()]
})
组件的映入可以自动，当然vue等的引入也可以自动
npm i -D unplugin-auto-import
- 重新配置vite.config.js,这里自动引入配置了vue和vue-rouetr的自动引入
import {defineConfig} from "vite"
import Vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins:[Vue(),AutoImport({import:['vue','vue-rouetr']}),Components({
resolvers:[ElementPlusResolver()]
})]
})
四、安装element-plus插件
npm i element-plus -D
- 修改vite.config.js 使自动解析能够解析elemt-plus引用
import {defineConfig} from "vite"
import Vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins:[Vue(),Components({
resolvers:[ElementPlusResolver()]
})]
})