搭建框架
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>