1.首先npm镜像切换
javascript
npm config get registry //查看当前镜像
npm config set registry https://registry.npmjs.org/ //国外
npm config set registry https://registry.npmmirror.com/ //淘宝
2.环境变量的配置
.env.development的内容如下
javascript
VITE_APP_BASE_URL = http://xxx:90/api
NODE_ENV='development'
在vite.config.js使用环境变量的VITE_APP_BASE_URL变量
javascript
import { loadEnv } from 'vite'
const env = loadEnv(mode, process.cwd())
console.log(env.VITE_APP_BASE_URL)
server: {
open: true,
port: 8081,
proxy: {
'/api': {
target: env.VITE_APP_BASE_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
3.SCSS全局变量
vite.config.js配置
javascript
css: {
preprocessorOptions: {
scss: {
additionalData: `@import "${resolve(__dirname, 'src/styles/variables.scss')}";`
}
}
}
在其他地方就能只用variables.scss的变量
javascript
// 字体颜色
$primary-color: #3498db; // 主色
$secondary-color: #2ecc71; // 次色
4.SVG图标配置
javascript
npm install vite-plugin-svg-icons -D
vite.config.js配置
javascript
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
plugins: [
vue(),
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
symbolId: 'icon-[name]',
}),
],
在main.js引入
javascript
import 'virtual:svg-icons-register'
新建SvgIcon.vue
javascript
<template>
<svg aria-hidden="true">
<use :href="symbolId" :fill="color" />
</svg>
</template>
<script>
import { defineComponent, computed } from 'vue'
export default defineComponent({
name: 'SvgIcon',
props: {
prefix: {
type: String,
default: 'icon',
},
name: {
type: String,
required: true,
},
color: {
type: String,
default: '#333',
},
},
setup(props) {
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
return { symbolId }
},
})
</script>
在组件怎么使用src/assets/icons的图标
javascript
<template>
<div>
<SvgIcon name="home"></SvgIcon>
</div>
</template>
<script>
import SvgIcon from '@/components/SvgIcon.vue'
</script>
5.Vite自动导入插件,自动import ref,reactive,computed等
javascript
npm install unplugin-auto-import -D
vite.config.js配置
javascript
import AutoImport from 'unplugin-auto-import/vite'
plugins: [
vue(),
// 自动导入vue变量
AutoImport({
imports: ['vue', 'vue-router', 'pinia'],
dts: false,
})
]
6.prettier配置
javascript
npm install prettier -D
新建文件.prettierignore 和 .prettierrc
.prettierrc代码
javascript
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"endOfLine": "auto",
"singleQuote": true,
"trailingComma": "all",
"quoteProps": "as-needed",
"bracketSpacing": true,
"arrowParens": "always"
}
在package.json配置自动格式化脚本
javascript
"scripts": {
"format": "prettier --write src/"
},