前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)

这篇文章距离上次修改已过237天，其中的内容可能已经有所变动。

以下是使用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的引入，以及移动端屏幕的基本适配。

前端vue3+typescript搭建vite项目(初识vite+项目配置完善+屏幕适配)

评论已关闭

推荐阅读