Vue3.2+Vite+ts+element-plus+pinia搭建完美前端工程化项目

使用Vue3.2+Vite+ts+element-puls+pinia搭建前端项目

一、package.json

{
  "name": "vue-main-web",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --mode dev",
    "build": "vue-tsc --noEmit && vite build --mode production",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.0.5",
    "normalize.css": "^8.0.1",
    "pinia": "^2.0.11",
    "pinia-plugin-persist": "^1.0.0",
    "vue": "^3.2.25",
    "vue-router": "^4.0.13"
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "@vitejs/plugin-vue": "^2.2.0",
    "less": "^4.1.2",
    "minimist": "^1.2.5",
    "sass": "^1.49.9",
    "sass-loader": "^12.6.0",
    "typescript": "^4.5.4",
    "vite": "^2.8.0",
    "vue-tsc": "^0.29.8"
  }
}

二、main.ts

import "normalize.css"
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import Router from './router/router'
import store from './store'

const app = createApp(App)

app.use(ElementPlus)
app.use(Router)
app.use(store)

app.mount('#app')

三、vite.config.ts

使用minimist获取命令行

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const path = require('path')
// 获取命令行script脚本 --mode的值
const modeEnv = require('minimist')(process.argv.slice(2)).env

// 用于告诉开发者当前代码所处环境
switch (modeEnv) {
  case 'dev':
    console.log('开发环境')
    break;
  case 'test':
    console.log('测试环境')
    break;
  case 'production':
    console.log('生产环境')
    break;
}

// 不同环境的服务器部署位置(之所以这么做，是因为import.meta.env在构建之前无法读取到)
const baseMap = {
  dev: './',
  test: '',
  production: '',
}

// https://vitejs.dev/config/
export default defineConfig({
  base: (baseMap as any)[modeEnv] || '',
  resolve: {
    alias: {
      '@': path.resolve(__dirname,'./src'), // 增加常用@符号
    }
  },
  build: {
    // vite内置了 rollup-plugin-terser 这个插件
    terserOptions: {
      compress: {
        drop_console: modeEnv === 'production' ? true : false // 是否在构建时去掉console
      }
    }
  },
  server: {
    host: '0.0.0.0',
    port: 8888,
    hmr: {
      overlay: true
    },
    proxy: {
      '/api': {
        target: 'http://xxx',
        changeOrigin: true,
      },
    }
  },
  plugins: [vue()]
})

四、env.d.ts

/// 

declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

/**
 * 当定义.env[*]文件时，为了typescript的自动提示，在此进行变量类型定义
 */
interface ImportMetaEnv {
  // 路由base路径
  VITE_APP_BASE: string;
  // 代码运行环境
  VITE_APP_ENV: string;
}

五、pinia入口及使用

1. 入口

import {createPinia} from "pinia";
import piniaPluginPersist from "pinia-plugin-persist";

const store = createPinia()

store.use(piniaPluginPersist)

export default store

2. 使用 user.ts

import {defineStore} from 'pinia'

export const useUserStore = defineStore(
    "main_user_info",
    {
        state: () => {
            return {
                name: '张三',
                age: 12
            }
        },
        actions: {
          changeName () {
              this.age++
          }
        },

        // 开启数据缓存，必须执行过 actions中的方法才会缓存至Storage中
        persist: {
            enabled: true
        }
    }
)