项目启动

安装vite

// 安装vite
1、npm create vite@latest

// 安装vite同时构建一个 Vue 项目
2、npm create vite@latest my-vue-app -- --template vue

更新node版本

使用Vite打包工具，需要Node.js版本 14.18+，16+。本地node版本@14.15.0，运行下面代码升级node到稳定版。

全局安装一个管理node版本的管理模板n,不行执行npm i -g n --force

$npm i -g n

安装最近的稳定版本，不行执行 sudo n stable

$ n stable
// $ n latest  //最新的版本
// $ n 版本号  //如 n 10.0.0

npm --save 的含义

npm 5.0.0 之前，有 --save 参数才会把模块写入到 packages.json。现在已经是内置参数，不用额外写了

1、npm常用的安装命令

npm i             就是npm install 简写
npm i xxx -D      就是 npm i xxx --save-dev
npm i xxx -S      就是 npm i xxx --save
npm i xxx -g      就是 全局安装
npm i xxx         就是 npm i xxx --save

2、命令参数详解

npm i xxx --save-dev 是把依赖写入进devDependencies对象里面 npm i xxx --save 是把依赖写入进dependencies对象里面 npm i xxx -g 就是安装到全局下，在命令行的任何地方都可以操作，不会提示“命令不存在等错误”

3、依赖和开发时依赖

devDependencies 是开发环境下的依赖，这里是开发环境下的依赖，上线后非必需，比如：webpack，gulp等压缩打包工具.

dependencies 是生产环境下的依赖，项目刚需的依赖在这里，比如UI框架，字体文件等线上必需的东西.

一般这个配置在package.json文件中.

vite-plugin-style-import 插件

动态按需引入组件样式，注释部分为常用的 UI 组件库，按照自己的需要引入。

安装：npm i vite-plugin-style-import -D;

使用：

//=====vite.config.js====
//import styleImport, {
  // AndDesignVueResolve,
  //VantResolve,
  // ElementPlusResolve,
  // NutuiResolve,
  // AntdResolve
//} from 'vite-plugin-style-import'

//2.0之后版本用createStyleImportPlugin
import { createStyleImportPlugin, VantResolve} from 'vite-plugin-style-import';

export default  ({ mode }) => defineConfig({
  plugins: [
    createStyleImportPlugin({
      resolves: [
        // AndDesignVueResolve(),
        VantResolve(),
        // ElementPlusResolve(),
        // NutuiResolve(),
        // AntdResolve()
      ],
    })
  ],
  define: {
    'process.env': {}
  }，
  
})

出现 Error: Cannot find module ‘consola‘

因为插件的使用了 consola 包，但是我们没有安装。所以需要安装 consola;

$ npm i consola -D

遇到的问题

@引入文件路径报错

解决方法：vite.config.js配置中添加alias属性并进行配置

resolve: {
  alias: {
   '@': '/src'
  }
}

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }  
  }
}

运行报错：process is not defined

router配置时使用到process.env.BASE_URL报错

原因是使用 vite 安装 vue3 时，如果使用了 process.env，会遇到 process 未定义的情况，原因是 process.env 已经被移除了。解决办法是在 vite.config.ts 中增加 define：

//=======vite.config.js========
import { defineConfig } from 'vite'
// ...
export default defineConfig({
  // ...
  define: {
    'process.env': {}
  }
})

axios 请求拦截器中配置请求头（headers）报错

代码：

let $http = Axios.create({...})
$http.interceptors.request.use(function (config) {
    config.headers.common['Session-Id'] = sessionId;
}

报错提示： TypeError: Cannot set properties of undefined (setting 'Session-Id')；

解决：修改代码为config.headers['Session-Id'] = sessionId成功。

分析：之前项目中这样写是没问题的，想应该是axio的版本不同引起的，查看版本号发现以前项目axios的版本是"^0.24.0"，现在的是"^1.2.0"，两个版本打印config.headers看会发现是不一样的东西，高版本直接输出的是AxiosHeaders对象，输出默认配置项$http.defaults.header才是一样的。看源码也可以对比出来。

请求接口报401，返回 "Token not provided"

解决方法：请求头Authorization的值以Bearer开头。

原因：

* 低版本安卓手机/ios首页白屏打不开页面（偶发性）

问题描述：进到首页没东西展示，只出现顶部的静态样式。这中情况在某些手机上出现了几次。

问题出现的原因：

获取用户信息有错误
动态加载api文件出错，
账号权限问题，未配置

分析过程：前端打印发现没带上data参数带了个{}空对象而显示授权页认为需要手机去调。后端同事想查看日志确认一下发现进来的时候路径是正常有带的，只是重定向的时候把参数丢失了。后天没获取到data参数，可能连参数校验都不通过，都还没到解密那一步。所以前端判断应该是接口请求前的代码逻辑出现了问题。最后发现是参数转义的问题。

修改代码：(主要问题是replaceAll兼容性导致的)

\s匹配任何空白字符，包括空格、制表符、换页符等等。等价于 [ \f\n\r\t\v]。注意 Unicode 正则表达式会匹配全角空格符。 +匹配前面的子表达式一次或多次。要匹配 + 字符，请使用\+。

总结：

url中传递的参数带有加号+，会被浏览器转换成空格，这样会导致后台获取到无效的参数；
低版本浏览器普遍不支持replaceAll

VueUse工具库集体用法@vueuse/core详解

一、什么是VueUse

VueUse(官方链接)不是Vue.use，它是为Vue 2和3服务的一套Vue Composition API的常用工具集，是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式，省去程序员自己写相关代码。

VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说，这就是一个工具函数包支持了更好的逻辑分离，它可以帮助你快速实现一些常见的功能，免得你自己去写，解决重复的工作内容。以及进行了机遇 Composition API 的封装。

VueUse不是Vue.use ！！！它是一个基于 Composition API 的实用函数集合。

二、如何引入

import { 具体方法 } from '@vueuse/core'

三、项目中使用

插件的使用与学习

jest: Jest是Facebook开源的一套JavaScript测试框架；
Lodash: Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库；
Vant: Vant 是一个轻量、可靠的移动端组件库，目前 Vant 官方提供了Vue 2 版本和微信小程序版本，并由社区团队维护 React 版本和支付宝小程序版本；
qs: qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装（axios 自带qs , // import qs from 'qs'）；
js-cookie：JavaScript Cookie是一个简单、轻巧的JavaScript API，专门用于处理cookie；
qrcode: 生成二维码的 JavaScript 库；
jsqrcode: 识别图片是否为二维码

vite项目启动