以下是使用Vue 3和TypeScript搭建Vite项目的步骤，并包括基本的项目配置和屏幕适配：
- 安装Vite和Vue 3的相关依赖：
npm init vite@latest my-vue3-app --template vue-ts
cd my-vue3-app
npm install
- 修改Vite配置文件（
vite.config.ts），可以添加更多配置，如插件、别名等：
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// 添加别名
resolve: {
alias: {
'@': '/src',
},
},
});
- 在
src目录下创建一个styles文件夹，并添加variables.scss文件用于存放样式变量，以及一个index.scss作为入口文件：
// styles/variables.scss
$primary-color: #3498db;
$font-size-base: 16px;
// styles/index.scss
@import "./variables.scss";
body {
font-size: $font-size-base;
color: $primary-color;
}
- 在
main.ts中引入SCSS：
import { createApp } from 'vue';
import App from './App.vue';
import './styles/index.scss';
createApp(App).mount('#app');
- 屏幕适配方案可以使用CSS的视口单位
vw和vh，或者使用flexible.js进行移动端的屏幕适配。这里使用vw为例，在main.ts中添加适配代码：
// main.ts
const setRem = () => {
const baseSize = 37.5; // 以设计稿宽度750px为基准，750px设计稿宽对应100vw
document.documentElement.style.fontSize = (document.documentElement.clientWidth / baseSize) + 'px';
};
window.addEventListener('resize', setRem);
setRem();
- 在
index.html中添加以下meta标签，用于控制视口：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
- 在
App.vue中添加一个简单的组件示例：
<template>
<div id="app">
<h1>欢迎来到Vite + Vue 3 + TypeScript项目</h1>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name: 'App'
});
</script>
<style lang="scss">
#app {
text-align: center;
}
</style>
- 运行项目：
npm run dev
以上步骤构建了一个基础的Vite + Vue 3 + TypeScript项目，并简单地实现了样式变量的定义、SCSS的引入，以及移动端屏幕的基本适配。