从0到1搭建vue3+vite项目, 开箱即用, 也许你看过很多,但这个不能错过

前言

之前都是改开源框架, 或者改老项目, 使用起来总有些磕磕绊绊
虽然一直在做vue3项目, 但是一直没有自己手动搭建配置
这次花时间心思自己操作下来, 还是获益颇多, 以此记录

一. 创建项目

1. npm create vite@latest
2. Project name: » admin
3. Select a framework: » Vue
4. Select a variant: » JavaScript 
(PS: 是的, 我这里选择JavaScript而非TypeScript, 
你如果不熟悉hooks,
不太了解enum,
不会定义interface,
不怎么用extends, 
只知道数据类型any, 
建议你选择JavaScript)

二. 安装依赖

1. 安装router: npm install vue-router@4
2. 安装pinia: npm install pinia
3. 安装axios: npm install axios
4. 安装element-puls: npm install element-plus
5. 安装element-plus的icon: npm install @element-plus/icons-vue
6. 安装vue3的语法糖api自动导入: npm i unplugin-auto-import -D
7. 安装vue3的语法糖自定义name: npm i vite-plugin-vue-setup-extend -D
8. 安装sass: npm add -D sass 
9. 安装pxtorem: npm install postcss-pxtorem
10. 安装css自动补全: npm install autoprefixer

以上先安装, 我一步步解释

三. 配置依赖

1. 先看package.json, 重点说一下postcss配置, 我的设计稿1920, 这里配合 flexble.js使用, 
就能实现屏幕分辨率响应式了, 1366*768, 1400*1050, 1600*900, 1920*1080 等等,
页面都不会挤压变形,字体都是正常

{
  "name": "admin",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build:prod": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "axios": "^1.4.0",
    "postcss-pxtorem": "^6.0.0",
    "autoprefixer": "^10.3.6",
    "element-plus": "^2.3.4",
    "pinia": "^2.1.1",
    "vue": "^3.2.47",
    "vue-router": "^4.2.0"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "sass": "1.56.1",
    "unplugin-auto-import": "^0.16.0",
    "vite-plugin-vue-setup-extend": "0.4.0",
    "vite": "^4.3.2"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 192,
        "propList": [
          "*"
        ]
      }
    }
  }
}

2. 再看main.js中配置, 重点说一下 import '@/utils/flexble ,就是刚刚提到的实现分辨率适配; 
还有ElementPlus 的组件默认大小,初始化时统一配置好
其他的引入就不说了,一眼懂

import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import "element-plus/dist/index.css"
import '@/assets/styles/index.scss'
import elementIcons from '@/components/icons/elementIcon.js'

import App from './App.vue'
import store from './store'         // 缓存
import router from "./router";      // 路由
import directive from './directive' // 封装自定义指令
import plugins from './plugins' // 封装统一弹框提示
const app = createApp(App)

app.use(router)
app.use(store)
app.use(plugins)
directive(app)
app.use(elementIcons)
app.use(ElementPlus, {
    locale: locale,
    // 支持 large、default、small
    size: 'default'
})
import '@/utils/flexble'
app.mount('#app')

3. 再来看 vite.config.js 的配置,  重点说一下vue3的setup语法糖配置, 
unplugin-auto-import/vite是自动导入vue3的api的, 不需要在每个组件单独引入
vite-plugin-vue-setup-extend是自定义组件名称的, 不需要在每个组件定义
补充一下, 有些小伙伴没有热加载, 把 server > hmr: true, 即可

import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend(),
    AutoImport({
      // 后续vue/vue-router/pinia的API都不需要再单独import到setup里面了
      imports: [
            'vue',
            'vue-router',
            'pinia'
        ],
        dts: false
    })
  ],
  resolve: {
    // 路径别名
    alias: {
      // 设置路径
      '~': path.resolve(__dirname, './'),
      "@": path.resolve(__dirname, "./src")
    }
  },
  server: {
    port: 80,
    host: true,
    open: true,
    hmr: true
  }
})

四. 封装

1. 封装请求: 思路是创建通用请求接口 > 请求拦截器 > 响应拦截器; 

通用请求: 使用 import.meta.env.VITE_APP_BASE_API就能获取当前是环境的配置,
         前提是你已经创建了.env.development和.env.production文件
请求拦截: 这里可以自己加token, 请求头的一些逻辑
响应拦截: 这里可以自己加code, 重复请求的一些逻辑

2. 封装弹框: 想法是element-plus的交互提示太多, 把 message, notify, confirm, loading 
交互统一放在一个地方管理, 方便团队代码一致性

3. 封装自定义指令: 思路是拓展自定义指令到项目中, 我的代码中只写了一个复制指令 v-copyText
可以按照这个继续拓展别的自定义指令

五. 最后

码云地址: https://gitee.com/zhouzheng123456/vue3vite
有想法的小伙伴可以说说