创建项目目录

mkdir project_name

安装vite

npm init vite@latest project_name

framework选择Vue
variant选择JavaScript

进入项目目录

cd project_name

在当前目录创建环境配置文件

根据各自环境需求创建相应的环境配置文件
测试环境配置文件: .env.development
生产环境配置文件: .env.production

project_name/.env.development
project_name/.env.production

文件内容demo：

VITE_API_URL=http://127.0.0.1:9696      #api接口地址
VITE_SITE_PORT=9797                     #站点监听端口

配置vite.config.js，全局引入环境变量及配置@别名

project_name/vite.config.js：

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path"

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    define:{
      'process.env': env                        //注入配置文件环境变量
    },
    plugins: [vue()],
    resolve: {
      alias: {
        "@": resolve(__dirname, "./src")        //注入静态目录别名@
      }
    },
    server: {
      host: '0.0.0.0',
      port: Number(env.VITE_SITE_PORT),         //使用环境配置文件监听的端口
      open: true,                               //运行时自动打开网页
    }
  })
}

安装sass支持

npm install -D sass-loader sass

安装vue-router

npm install -S vue-router@next

新建路由配置文件index.js

project_name/src/router/index.js：

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
    {
        path: "/",
        name: "home",
        //记得顺便新建home文件的index.vue组件
        component: () => import("@/views/home/index.vue"),
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
});

export default router;

在src/main.js里面引用路由配置文件

project_name/src/main.js：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from "./router"

const app = createApp(App);
app.use(router);
app.mount('#app');

在App.vue里面使用vue-router

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

安装axios

npm install axios

在src下创建目录util及api.js文件

project_name/src/util/api.js：

请求接口及拦截处理需自行封装，以下是简单的demo：

import axios from 'axios';

const instance = axios.create({
  baseURL: process.env.VITE_API_URL || '/', // 设置基本 URL
  timeout: 120*1000 // 请求超时时间120秒
})

const _get = async(url, data) => {
    instance.defaults.headers.common['Authorization'] = "xxxx";
    return new Promise((resolve, reject) => {
      instance.get(url, data)
      .then(response => {
          resolve(resp.data);
      })
      .catch(error => reject(error));
    });
}

export default {
    _get:_get,
    // ...
}

添加自适应相关插件

amfe-flexble 根据当前页面的尺寸去设置根元素的font-size

npm i -S amfe-flexible

postcss-pxtorem 将px转换成rem

npm install postcss-pxtorem --save

在 main.js 中引入 amfe-flexble

import 'amfe-flexible'

vite.config.js中的配置
import postCssPxToRem from 'postcss-pxtorem'

export default defineConfig({
    plugins: [
        vue(),
    ],
    css: {
        postcss: {
            plugins: [
                postCssPxToRem({
                    // 自适应，px>rem转换
                    rootValue: 37.5,// 75表示750设计稿，37.5表示375设计稿
                    propList: ['*'],// 需要转换的属性，这里选择全部都进行转换
                    // selectorBlackList:['norem']，// 过滤掉norem-开头的class，不进行rem转换
                }),
            ],
        },
    }
});