利用vue3全家桶、vite、typescript、vant、scss、构建一个前端h5的项目

1. 安装vite

npm init @vitejs/app my-project --template vue-ts
cd my-project
npm install
npm run dev

2. 安装vant

npm i vant -S

3. 安装scss

npm i sass -D
npm i sass-loader -D

4. 在vite.config.ts中配置scss

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'

export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'vant',
          esModule: true,
          resolveStyle: (name) => {
            return `vant/es/${name}/style`;
          },
        },
      ],
    }),
  ],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/assets/scss/variables.scss";`,
      },
    },
  },
})

5. 安装axios

npm i axios -S

6. 新建src/api/index.ts

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000,
})

service.interceptors.request.use(
  (config) => {
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

service.interceptors.response.use(
  (response) => {
    const res = response.data
    if (res.code !== 0) {
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  (error) => {
    return Promise.reject(error)
  }
)

export default service

7. 新建src/views/Home.vue

<template>
  <div class="home">
    <van-button @click="onClick">按钮</van-button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { Toast } from 'vant'
import api from '@/api'

export default defineComponent({
  name: 'Home',
  setup() {
    const onClick = () => {
      Toast('Hello world!')
      api.get('/user').then((res) => {
        console.log(res)
      })
    }

    return {
      onClick,
    }
  },
})
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
}
</style>

8. 修改src/App.vue

<template>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'App',
})
</script>

<style lang="scss">
@import '@/assets/scss/common.scss';
</style>

9. 在src/main.ts中引入vant和scss

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import 'vant/lib/index.css'
import '@/assets/scss/index.scss'

createApp(App).use(store).use(router).mount('#app')

10. 运行项目

npm run dev

以上就是利用vue3全家桶、vite、typescript、vant、scss构建一个前端h5的项目的步骤。