vue3项目模板，开箱即用（附源码）

一个开箱即用的Vue 3项目模板，涵盖从项目创建到配置的全流程。通过使用Vue CLI生成项目，安装和配置常用的开发工具和库，包括Sass、Element Plus、Axios等。详细的代码示例展示了如何封装Axios请求、实现自动导入、管理API、配置跨域请求以及进行图片懒加载和自适应布局。此外，本文还介绍了如何在项目中使用AOS动画库，增添动效。

---

创建vue3项目

1. 使用vue的脚手架生成项目，命令：

npm init vue@latest

2. 根据绿色部分的提示进入到我们的项目，安装依赖并运行
3. 此时我们的项目已经包含了：vue3+vite+pinia+vue-router

安装常用配置

安装sass

npm install -D sass

安装element-plus

1. 安装

参考地址

npm install element-plus --save

2. 按需引入

参考地址
首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 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. 全量引入

参考地址
如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

// 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')

安装axios并封装

1. 安装

参考地址

npm install axios

2. 配置跨域

// vite.config.js
server: {
   
    host: "0.0.0.0",
    open: true,
    port: 1998,
    proxy: {
   
      "/api": {
   
        target: "http://shkjgw.shkjem.com",
        changeOrigin: true,
        cookieDomainRewrite: true,
        cookiePathRewrite: true,
        // rewrite: (path) => {
   
        //   console.log(path.replace(/^\/api/, ''))
        //   return path.replace(/^\/test/, '/api')
        // }
      }
    }
  },

3. 封装

在src下新建utils/axiosReq.js，代码如下

import axios from "axios"
import router from "@/router"
// 使用按需引入不需要手动引入下面的方法
// import { ElLoading, ElMessage, ElMessageBox } from "element-plus"
import {
    getToken, setToken } from "@/utils/auth"
let reqConfig, loadingE

const service = axios.create()

// 请求拦截
service.interceptors.request.use(
  (request) => {
   
    // token setting
    request.headers["AUTHORIZE_TOKEN"] = getToken()
    /* download file*/
    if (request.isDownLoadFile) {
   
      request.responseType = "blob"
    }
    /* upload file*/
    if (request.isUploadFile) {
   
      request.headers["Content-Type"] = "multipart/form-data"
    }
    reqConfig = request
    if (request.bfLoading) {
   
      loadingE = ElLoading.service({
   
        lock: true,
        text: "数据载入中",
        // spinner: 'el-icon-ElLoading',
        background: "rgba(0, 0, 0, 0.1)"
      })
    }
    /*
     *params会拼接到url上
     * */
    if (request.isParams) {
   
      request.params = request.data
      request.data = {
   }
    }
    return request
  },
  (err) => {
   
    Promise.reject(err)
  }
)
// 响应拦截
service.interceptors.response.use(
  (res) => {
   
    if (reqConfig.afHLoading && loadingE) {
   
      loadingE.close()
    }