前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)
以下是使用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的引入,以及移动端屏幕的基本适配。
评论已关闭