vite搭建项目

搭建框架

npm create vite

配置别名路径

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'; // 需要npm i - D @types/node
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
})

配置tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    // 需要告诉TS别名的路口，否则TS会报错
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./auto-imports.d.ts"
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}

配置路由

npm i vue-router

创建src/routes/index.ts

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
]
const router = createRouter({
  history: createWebHashHistory(), // createWebHistory()
  routes
})
export default router

配置自动化导入

ref、watch等属性以及组件无需引入，可以直接使用

安装依赖

npm install -D unplugin-vue-components unplugin-auto-import

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
export default defineConfig({
  plugins: [
    vue(),
    // 自动导入vue、vue-router
    AutoImport({
      imports: ['vue', 'vue-router'],
    }),
    // 自动导入组件
    Components({
      dirs: ['src/components'], // 默认是 ['src/components']
    })
  ],
})

配置tsconfig.json

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./auto-imports.d.ts" // 添加此处
  ],
}

配置后重启，会生成两个文件

使用

<template>
  <div id="app">124</div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script setup lang="ts">
const a = ref(1);
const b = reactive({a: 1, b: 2})
const c = computed(() => a.value * 2);
watch(b, (newVal, oldVal) => {
  console.log(newVal, oldVal)
})
const route = useRoute();
const router = useRouter();
onMounted(() => {
  console.log('mounted')
  console.log(route, router)
});
</script>

配置svg-icon

安装依赖

npm i -D vite-plugin-svg-icons

main.ts引入

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './routes'
import 'virtual:svg-icons-register'; // 引入
createApp(App).use(router).mount('#app')

vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
import { resolve } from 'path'; // 需要npm i - D @types/node
export default defineConfig({
  plugins: [
    vue(),
    // svg图标
    createSvgIconsPlugin({
      iconDirs: [resolve(__dirname, 'src/assets/svg')],
      symbolId: 'icon-[name]'
    })
  ],
})

创建组件
components/SvgIcon.vue

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName" />
  </svg>
</template>

<script lang="ts" setup>
import {ref} from 'vue';
const props = defineProps<{svgName ?:string}>();
const iconName = ref(`#icon-${props.svgName}`);

</script>

<style lang="scss" scoped>
.svg-icon {
  vertical-align: -0.1em;
  fill: currentColor;
}
</style>

使用

<svg-icon svg-name="vue" class="icon"></svg-icon>

配置sass

安装依赖

npm i -D sass sass-loader

创建scss文件（src/styles/base.scss）

// flex布局
@mixin flex($justify: flex-start, $align: flex-start, $direction: row, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

$theme-color: #2F54EB;
$theme-bg-color: #FFF;
$theme-text-color: #222222;

配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'; // 需要npm i - D @types/node

export default defineConfig({
  plugins: [vue()],
  // 配置别名路径
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
  // 配置scss
  css: {
    preprocessorOptions: {
      scss: {
        // 全局引入scss
        additionalData: `@import "@/styles/base.scss";`,
      },
    }
  }
})

使用

<style scoped lang="scss">
#app{
  background-color: $theme-color;
  @include flex();
}
</style>