关于vite:如何使用Vite创建Vue3的uniapp项目

我的项目构造

my-vue3-project├─ .env                           //默认环境变量├─ .env.development              //开发环境变量├─ .eslintrc-auto-import.json    //（autoimport变量，eslint配置）由auto-import插件生成├─ .eslintrc.js                 //eslint配置文件├─ .gitignore├─ auto-imports.d.ts            //（autoimport变量，ts申明文件）由auto-import插件生成├─ index.html├─ jsconfig.json├─ package-lock.json├─ package.json├─ src│  ├─ App.vue│  ├─ components│  ├─ main.js│  ├─ manifest.json                //uniapp我的项目配置文件│  ├─ pages│  │  └─ index│  │     └─ IndexView.vue│  ├─ pages.json                  //页面配置文件│  ├─ services                     // 申请后端服务目录│  │  ├─ api.js                  // 后端api│  │  └─ http.js                //申请│  ├─ shime-uni.d.ts│  ├─ static                    //动态文件目录│  │  └─ logo.png│  ├─ store                         //pinia全局状态库│  │  └─ useUserStore.js│  ├─ uni.scss│  └─ utils                        //公共的工具办法└─ vite.config.js

创立历程

我的项目创立¹

npx degit dcloudio/uni-preset-vue#vite my-vue3-project

• Vue3/Vite 版要求 node 版本^14.18.0 || >=16.0.0
• 如果应用 HBuilderX（3.6.7 以下版本）运行 Vue3/Vite 创立的最新的 cli 工程，须要在 HBuilderX 运行配置最底部设置 node 门路 为本人本机高版本 node 门路（留神须要重启 HBuilderX 才能够失效）
• HBuilderX Mac 版本菜单栏左上角 HBuilderX->偏好设置->运行配置->node 门路
• HBuilderX Windows 版本菜单栏 工具->设置->运行配置->node 门路

我的项目依赖装置

Eslint

Eslint 的相干配置可参考文章：Web 我的项目如何配置 Eslint
留神：在配置完 Eslint 之后，在我的项目中应用 uni 的时候会报 uni 未被定义的错，需在.eslintrc.js 中加上以下代码

globals: {  uni: true;}

vite.config.js 中 eslintPlugin 配置

import eslintPlugin from 'vite-plugin-eslint'export default defineConfig({  plugins: [      eslintPlugin({      cache: true,      include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue', 'src/*.nvue'],      failOnError: false // eslint报错不影响运行    }),  ]

Pinia²

装置

留神：在这个我的项目中装置的 vue 版本是：3.2.47，pinia：3.1 及以上版本须要依赖 vue：3.3 及以上版本能力运行胜利。

@REM npm 装置npm i pinia@2.0@REM node 装置yarn add pinia@2.0

装置依赖时呈现如下报错可尝试通过参考文章解决：npm 装置依赖时呈现 Peer Dependencies 抵触报错

While resolving: uni-preset-vue@0.0.0Found: vue@3.2.47node_modules/vue  peer vue@"^3.2.25" from @vitejs/plugin-vue@4.3.4  node_modules/@vitejs/plugin-vue    ...Conflicting peer dependency: vue@3.3.4node_modules/vue  peer vue@">= 2.5 < 2.7" from @vue/composition-api@1.7.2  node_modules/@vue/composition-api    peerOptional @vue/composition-api@"^1.4.0" from pinia@2.0.34    node_modules/pinia      pinia@"2.0.34" from the root projectFix the upstream dependency conflict, or retrythis command with --force or --legacy-peer-depsto accept an incorrect (and potentially broken) dependency resolution.

Luch-Request³

uniapp 原生的 uni.request 应用比拟麻烦，它并非应用 Promise 的模式也不反对申请拦挡和相应拦挡的配置，而 luch-request 基于 Promise 对象实现更简略的 request 应用形式，反对申请和响应拦挡

• 反对全局挂载
• 反对多个全局配置实例
• 反对自定义验证器
• 反对文件上传/下载
• 反对 task 操作
• 反对自定义参数
• 反对多拦截器
• 对参数的解决比 uni.request 更强

装置

npm install luch-request -S

Sass 反对⁴

装置

npm i sass sass-loader -D

unplugin-auto-import⁵

unplugin-auto-import 是为 Vite、Webpack、Rollup 和 esbuild 按需主动导入 API，同时反对 TypeScript。
应用它在 vue3 我的项目中应用预设导入的 api 就不须要 import，能够通过预设主动导入模块，加强开发体验

装置

npm i -D unplugin-auto-import

在 Vite.config.js 中退出如下配置

import AutoImport from "unplugin-auto-import/vite";export default defineConfig({  plugins: [    AutoImport({      // 须要主动引入的文件      include: [        /\.[j]sx?$/,        /\.vue$/,        /\.vue\?vue/,        /\.nvue$/,        /\.nvue\?nvue/,        /\.md$/,      ],      // 全局主动引入api预设      imports: [        // 插件预设反对导入的api        "vue",        // 'vue-router',        "pinia",        "uni-app",        // 自定义导入的api      ],      // eslint配置      eslintrc: {        enabled: true, // Default `false`        filepath: "./.eslintrc-auto-import.json", // Default `./.eslintrc-auto-import.json`        globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')      },      dts: "./auto-imports.d.ts",      // dts:false    }),  ],});

生成 eslint 配置文件并应用

通过执行命令npm run dev:h5 运行我的项目，运行胜利时我的项目根目录会生成auto-imports.d.ts和.eslintrc-auto-import.json两个文件，而后在.eslintrc.js 文件中的 extends 属性中，引入该文件

extends: [  'standard',  'plugin:vue/vue3-essential',  './.eslintrc-auto-import.json']

留神：引入后需从新运行我的项目能力失效

增加默认和开发环境变量文件

在我的项目根目录增加.env 和.env.development 文件，以配置环境变量
具体配置教程可参照官网：Vite 环境变量和模式

配置 UI 库 uni-ui⁶

装置

npm i @dcloudio/uni-ui

配置

vite.config.js

留神 cli 我的项目默认是不编译 node_modules 下的组件的，导致条件编译等性能生效 ，导致组件异样 须要在 vite.config.js 减少 @dcloudio/uni-ui 包的编译即可失常

transpileDependencies: ["@dcloudio/uni-ui"];

pages.json

失常来说这样子引入的话，应用组件时，须要在页面处 import 才能够应用，然而能够通过 npm+easycom 的模式来全局引入组件。在 pages.json 中退出如下代码，即可在应用组件而不需在页面处 import。

"easycom": {    "autoscan": true,    "custom": {        "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"    }}

我的项目到这里就完结了，这里提供该项目标 github 地址，不便拉取间接应用

这个我的项目中 master 分支中应用的 Eslint 格调为 Standard，而 prettier 分支应用的格调为 Prettier

https://github.com/luxigaola/my-uniapp-project