图解vite移动端项目配置插件

一、初始化样式

找到style.css文件，复制粘贴一下代码

初始化代码 

@charset "UTF-8";body,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,html,img,legend,li,ol,p,ul{margin:0;padding:0}button,fieldset,img,input{border:none;padding:0;margin:0;outline-style:none}ol,ul{list-style:none}input{padding-top:0;padding-bottom:0;font-family:SimSun,"宋体"}input,select{vertical-align:middle}input,select,textarea{font-size:12px;margin:0}textarea{resize:none}img{border:0;vertical-align:middle}table{border-collapse:collapse}body{font:12px/150% Arial,Verdana,"\5b8b\4f53";color:#666;background:#fff}.clearfix:after,.clearfix:before{content:"";display:table}.clearfix:after{clear:both}a{color:#666;text-decoration:none}a:hover{color:#c81623}h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:400;font-size:100%}em,i,s{font-style:normal;text-decoration:none}.col-red{color:#c81623!important}

二、安装path node第三方库  

运行后只有localhost的地址所以还要再添加一个ip地址访问（也可以不用）

添加@路径访问src文件夹 那这样就可以使用@来访问src文件了

npm i path

npm i @types/node -D

三、配置网路接口

找到vite.config.js文件，复制粘贴以下代码，之后重新启动项目

 源码

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  //配置网路接口
  server: {
    // host:"0.0.0.0",
    // hmr:true,
    open: true,
    port: 8080,
  }, //1.运行后 添加ip地址访问项目 不然只有一个localhost地址访问
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  }, //2.需要安装path  才可以添加@路径访问src文件夹 另外还需要安装node 不然dirname会有红色横线
});

四、安装 vant 4 插件

npm i vant

main.js全局配置引入

五、安装 axios 插件

npm install axios

npm install vue-axios

main.js全局配置引入

六、安装 bootstrap5 插件

安装 Bootstrap、 Popper，因为 Bootstrap的下拉菜单、弹出框和工具提示都依赖于 Popper来定位。如果您不打算使用这些组件，则可以在此处省略 Popper。

npm i --save bootstrap @popperjs/core

安装额外的依赖Sass来正确导入和捆绑 Bootstrap 的 CSS。

npm i --save-dev sass

安装图标库。

npm i bootstrap-icons

在src路径下assets文件夹里创建sass包内，创建style.scss文件

找到style.scss文件，复制粘贴以下代码

// Import all of Bootstrap's CSS
@import "bootstrap/scss/bootstrap";
// 图标
@import 'bootstrap-icons/font/bootstrap-icons.css';

main.js全局配置引入