vue3的开发基本配置

一、vite 安装vue3模板

 npm create vite@latest

二、安装路由

 npm install vue-router@4

三、安装axios

 npm install axios

四、安装pinia

好用的状态管理器，如果不想用可以安装vuex

 npm install pinia

五、安装vueuse

这个是一个vue3的Vue Composition api的集合

npm i @vueuse/core

六、安装你要用的UI组件库

比如ant-design-vue

npm i --save ant-design-vue@next

七、安装eslint

ESLint fix自动修复所有格式问题
可以在package.json
写入lint这句话

  "scripts": {
      "lint": "eslint 'src/**/*.{js,ts,vue}' --fix"
  },

这个可以用可以不用，如果是团队最好用上
可参考https://uphgs.com/vue3-config-eslint.html进行配置

八、安装vite-plugin-optimize-persist插件## 标题

npm i -D vite-plugin-optimize-persist vite-plugin-package-config

ESLint fix自动修复所有格式问题
可以在package.json
// vite.config.ts

import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'

export default {
  plugins: [
    PkgConfig(),
    OptimizationPersist()
  ]
}

这个主要是解决vite首次加载缓慢问题的，
项目第一次装依赖会慢，之后在安装依赖就不会在启动缓慢了

九、简单配置vite.config

import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import OptimizationPersist from 'vite-plugin-optimize-persist'
import PkgConfig from 'vite-plugin-package-config'

function pathResolve(dir: string) {
	return resolve(process.cwd(), '.', dir)
}

// https://vitejs.dev/config/
export default defineConfig({
	resolve: {
		alias: {
			'@': pathResolve('src'),
			'/#': pathResolve('types'),
		},
	},
	server: {
		host: '127.0.0.1',
		port: 8081,
		// 是否自动在浏览器打开
		open: true,
		// 是否启用 TLS + HTTP/2
		https: false,
		// 代理
		proxy: {
			'/apis': {
				target: 'http://xxxx', // 服务器
				// changeOrigin: true,
				// rewrite: (path) => path.replace(/^\/apis/, '')
			},
		},
	},
	build: {
		assetsDir: 'static',
	},
	plugins: [vue(), PkgConfig(), OptimizationPersist()],
})