代码拉取完成,页面将自动刷新
vue vite
项目# 参考下面的文档
# https://www.jianshu.com/p/7108e1291c0e
pnpm create vite demo-vite-element-plus --template vue
cd demo-vite-element-plus
pnpm install
pnpm run dev
pnpm add element-plus vue-router@4 pinia axios
pnpm add -D sass
可以直接复制下面的
vite.config.js
的代码
pnpm add -D unplugin-vue-components unplugin-auto-import
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// ...
// },
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
// })
// }
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
const PORT = 5173;
// https://vitejs.dev/config/
export default ({ mode }) => {
let BASE = "/"
if (mode === "production") {
// 可以执行一些不同的配置,比如: BASE = "/public"
}
return defineConfig({
base: BASE,
server: {
port: PORT
},
css: {
preprocessorOptions: {
scss: {
// additionalData: `@use "~/styles/element/index.scss" as *;`,
},
},
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})
}
${pathSrc}/
HelloWorld
是 create 时,自动生成的Empty
,可以创建一个,如下:<script setup>
</script>
<template>
<div></div>
</template>
<style scoped>
</style>
Empty
组件 ,让示例代码更完整; 路由更合理;否则,可能会出现错误 <router-view></router-view>
提示找不到 /
;src/router/index.js
main.js
时,可以引用“路由”;/*
vue router 官方文档
https://router.vuejs.org/zh/guide/
*/
import { createRouter, createWebHashHistory } from 'vue-router'
// 组件
import HelloWorld from '../components/HelloWorld.vue'
import Empty from '../components/Empty.vue'
// 路由
const routes = [
{path: '/', component: Empty},
{path: '/hello', component: HelloWorld},
]
export const router = createRouter({
history: createWebHashHistory(),
routes,
})
router.push
import { useRouter } from 'vue-router'
const router = useRouter()
// 导航
function navigateTo(url) {
router.push(url)
changeShow(false)
}
main.js
import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
import { router } from './router/index'
const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')
App.vue
App.vue
中放入 <router-view></router-view>
,这样路由才有地方可以渲染;<router-view></router-view>
import { defineStore } from 'pinia'
import { ref } from 'vue'
// 示例代码参考: https://pinia.vuejs.org/zh/introduction.html#basic-example
// 使用组合API: https://pinia.vuejs.org/zh/core-concepts/#setup-stores
export const useCounterStore = defineStore('counter', () => {
const counter = ref(0)
function increment() {
counter.value++
}
return { counter, increment }
})
import { useCounterStore } from '../store/counter'
const counterStore = useCounterStore()
import { storeToRefs } from 'pinia'
const { counter } = storeToRefs(counterStore)
const { increment } = counterStore
咨询AI vite如何在打包时排除某些依赖?
: ./docs/d101_vite如何在打包时排除某些依赖_notes.md , 需要 vite-plugin-html
依赖,帮助修改 dist/index.html
pnpm add -D vite-plugin-html
vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { createHtmlPlugin } from 'vite-plugin-html'
const PORT = 5173;
// https://vitejs.dev/config/
export default ({ mode }) => {
let BASE = "/"
if (mode === "production") {
// 可以执行一些不同的配置,比如: BASE = "/public"
}
return defineConfig({
base: BASE,
server: {
port: PORT
},
css: {
preprocessorOptions: {
scss: {
// additionalData: `@use "~/styles/element/index.scss" as *;`,
},
},
},
plugins: [
vue(),
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
createHtmlPlugin(),
],
build: {
rollupOptions: {
output: {
manualChunks: {
// 将特定模块打包到特定chunk
'echarts': ['echarts'],
'element-plus': ['element-plus'],
},
},
},
},
})
}
关键是下面这段“配置”
plugins: [
// ...
createHtmlPlugin(),
],
build: {
rollupOptions: {
output: {
manualChunks: {
// 将特定模块打包到特定chunk
'echarts': ['echarts'],
'element-plus': ['element-plus'],
},
},
},
},
【注意】 'echarts': ['echarts'],
中,数组(['echarts']
)中的 echarts
才是模块的名字,不要写错; 比如 'react-vendor': ['react', 'react-dom'],
是将 react
和 react-dom
打包到 react-vendor
中;
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。