vite搭建vue3项目

酷啦啦诶

已于 2024-10-14 11:50:51 修改

阅读量700

点赞数 4

文章标签： javascript vue.js 开发语言

于 2024-10-09 16:24:41 首次发布

本文链接：https://blog.csdn.net/dlorwolleh/article/details/142758691

版权

一、创建vite项目

1.1 快速创建vite项目

npm create vite@latest
npm i

1.2 分步创建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>

1.3 环境变量配置

使用环境变量，是基于不同环境实现不同逻辑的，vite可以从更目录寻找.env.[mode] 文件加载额外的环境变量，这个的mode指development，production，text等

这是一个环境变量的配置示例

# 本地环境
VITE_ENV = development
#标题
VITE_APP_TITLE = 西堂ERP
#接口地址
VITE_APP_API_BASEURL= http://127.0.0.1:8000/
#本地端口
VITE_APP_PORT=9000
# 是否开启代理
VITE_APP_PROXY= true

环境变量在vite.config.js中的使用,可以配置指定端口，以及代理

import {defineConfig,loadEnv} from "vite"
import Vue from  '@vitejs/plugin-vue'
export default defineConfig(({command,mode})=>{
  
  const env = loadEnv(mode,process.cwd(),'')
  return {
    plugins:[
      Vue(),
    ],
    server:{
      host:'0.0.0.0',
      port:env.VITE_APP_PORT,
      proxy:{
        "api":{
          target:env.VITE_APP_API_BASEURL,
          changeOrigin:true,
          rewrite:(path)=>path.replace(/^\/api/,"")
        }
      }
    } 
  }
})

二、路由安装

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()]
    })]
})