使用vue3+ts+vite从零开始搭建bolg(二)

二、全局变量

2.1element-ui集成

pnpm i element-plus
pnpm i element-plus @element-plus/icons-vue

main.ts配置文件

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//@ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

app.use(ElementPlus, {
  locale: zhCn,
})

2.2src别名配置

vite.config.ts文档中配置

import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve('./src'),
    },
  },
})

tsconfig.ts配置

 "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,
    "baseUrl": "./", // 解析非相对模块的基地址，默认是当前目录
    "paths": {
      //路径映射，相对于baseUrl
      "@/*": ["src/*"]
    },

2.3项目环境变量配置

.env.development文件

# 变量必须以VITE_为前缀才能暴露给外部读取
NODE_ENV = 'development'
VITE_APP_TITLE = 'ts_blog'
VITE_APP_BASE_API = '/api'
VITE_SERVE = '服务器地址'

.env.production文件

NODE_ENV = 'production'
VITE_APP_TITLE = 'ts_blog'
VITE_APP_BASE_API = '/api'
VITE_SERVE = '服务器地址'

.env.test文件

NODE_ENV = 'test'
VITE_APP_TITLE = 'ts_blog'
VITE_APP_BASE_API = '/api'

package.json中的scripts配置项

"build:test": "vue-tsc && vite build --mode test",
"build:pro": "vue-tsc && vite build --mode production"

2.4svg图标配置

svg:用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看

pnpm i vite-plugin-svg-icons -D

vite.config.ts配置

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

plugins: [
    vue(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    }),
  ],

新建component文件夹在src下，建立如图文件

SvgIcon的index.vue文件

<template>
  <svg :style="{ width, height }">
    <use :xlink:href="prefix + name" :fill="color"></use>
  </svg>
</template>

<script lang="ts" setup>
defineProps({
  prefix: {
    type: String,
    default: '#icon-',
  },
  name: String,
  color: {
    type: String,
    default: 'black',
  },
  width: {
    type: String,
    default: '16px',
  },
  height: {
    type: String,
    default: '16px',
  },
})
</script>

<style scoped></style>

main.ts

//svg
import 'virtual:svg-icons-register'
import globalComponent from '@/components'

app.use(globalComponent)

component中的index.ts,注册全局组件

import SvgIcon from './SvgIcon/index.vue'

const allglobalComponent: any = { SvgIcon }

export default {
  install(app: any) {
    Object.keys(allglobalComponent).forEach((key) => {
      app.component(key, allglobalComponent[key])
    })
  },
}

2.5集成sass

在src下建立styles文件夹，和如图文件

reset.scss

/**
 * ENGINE
 * v0.2 | 20150615
 * License: none (public domain)
 */

*,
*:after,
*:before {
  box-sizing: border-box;

  outline: none;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  font: inherit;
  font-size: 100%;

  margin: 0;
  padding: 0;

  vertical-align: baseline;

  border: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
  &:before,
  &:after {
    content: '';
    content: none;
  }
}

sub,
sup {
  font-size: 75%;
  line-height: 0;

  position: relative;

  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

input,
textarea,
button {
  font-family: inhert;
  font-size: inherit;

  color: inherit;
}

select {
  text-indent: 0.01px;
  text-overflow: '';

  border: 0;
  border-radius: 0;

  -webkit-appearance: none;
  -moz-appearance: none;
}
select::-ms-expand {
  display: none;
}

code,
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

index.scss

@import './reset.scss';

vite.config.ts

css: {
    preprocessorOptions: {
      scss: {
        javascriptEnabled: true,
        additionalData: '@import "./src/styles/variable.scss";',
      },
    },
  },