vite+vue3搭建uniapp开发环境
·
1.创建以javascript开发的项目
npx degit dcloudio/uni-preset-vue#vite my-vue3-project2.安装pinia
官网文档：https://pinia.vuejs.org/zh/getting-started.html
# 安装
npm install pinia3.安装pinia-plugin-persistedstate数据持久化插件
官网文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/
npm i pinia-plugin-persistedstate1. 配置pinia和持久化插件
在src目录下创建pinia文文件夹，在文件夹里创建index.js文件
index.js文件配置
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia;
在main.js文件使用pinia
import { createSSRApp } from "vue";
import App from "./App.vue";
// 引入pinia
import { pinia } from "./store";
export function createApp() {
const app = createSSRApp(App);
app.use(pinia);
return {
app,
};
}
4.安装自动自动导入地三方库插件unplugin-auto-import
官方文档：https://www.npmjs.com/package/unplugin-auto-import
# 安装
npm i unplugin-auto-import -D在vite.config.js 文件配置
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
//自动导入第三方库
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(), //加载vue
AutoImport({ imports: ["vue", "pinia"] }), //自动导入配置
uni()
],
resolve: {
alias: {
"@": path.resolve(__dirname, "src"), //配置路径别名
},
},
server: {
//解决跨域问题
port: 8090, // 端口
proxy: {
"/api": {
target: "http://192.168.25.133:8080",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});5.安装 unplugin-vue-components 自动将项目中使用的 Vue 组件自动按需引入插件
官方文档：https://github.com/unplugin/unplugin-vue-components
# 安装
npm i unplugin-vue-components -D在vite.config.js 文件配置
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
//自动导入第三方库
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
//按需加载组件配置
import Components from "unplugin-vue-components/vite"; // 按需加载自定义组件
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({ imports: ["vue", "pinia"] }), //自动导入第三方库
//按需加载组件配置
Components({
dirs: ["src/components"], // 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 import
extensions: ["vue"], // 组件的有效文件扩展名。
deep: true, // 是否搜索子目录。
dts: false, // 默认值：如果安装了 `typescript` 包，则为 `true`。
resolvers: [], // 自定义组件的解析器。
}),
uni(),
],
resolve: {
alias: {
"@": path.resolve(__dirname, "src"), //配置路径别名
},
},
server: {
//解决跨域问题
port: 8090, // 端口
proxy: {
"/api": {
target: "http://xs.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
6.安装迷你路由
官方文档：https://moonofweisheng.github.io/uni-mini-router/guide/installation.html
路由表插件安装
我们提供了两种方式来生成路由表：uni-parse-pages和uni-read-pages-vite，这两种方式都可以实现将pages.json中的路由信息转化为uni-mini-router需要的路由表信息，其中uni-read-pages-vite依赖vite，在编译当将读取pages.json生成的路由表填充全局变量uni-parse-pages而不依赖vite时，在应用每次热重加载时pages.json都会读取生成的路由表信息。
由于uni-app在编译到小程序端时无法触发vite热更新，所以目前只有使用uni-parse-pages生成路由表才可以实现路由信息热更新的功能。
#安装 路由
npm i uni-mini-router --save
# 路由表插件安装
npm i add uni-read-pages-vite --save配置路由表插件 在vite.config.js
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
//自动导入第三方库
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
//按需加载组件配置
import Components from "unplugin-vue-components/vite"; // 按需加载自定义组件
//配置路由表
import TransformPages from "uni-read-pages-vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({ imports: ["vue", "pinia"] }), //自动导入第三方库
//按需加载组件配置
Components({
dirs: ["src/components"], // 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 import
extensions: ["vue"], // 组件的有效文件扩展名。
deep: true, // 是否搜索子目录。
dts: false, // 默认值：如果安装了 `typescript` 包，则为 `true`。
resolvers: [], // 自定义组件的解析器。
}),
uni(),
],
//配置路由表
define: {
ROUTES: new TransformPages().routes, // 注入路由表
},
resolve: {
alias: {
"@": path.resolve(__dirname, "src"), //配置路径别名
},
},
server: {
//解决跨域问题
port: 8090, // 端口
proxy: {
"/api": {
target: "http://xs.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
1.项目src目录下（HbuilderX创建的项目可以在根目录下）创建router文件夹，并在该文件夹创建index.js
文件配置 uni-read-pages-vite方式
import { createRouter } from 'uni-mini-router'
const router = createRouter({
routes: [...ROUTES] // 路由表信息
})
export default router2.配置路由在main.js文件
import { createSSRApp } from "vue";
import App from "./App.vue";
// 引入pinia
import { pinia } from "./store";
//配置路由
import router from "./router";
export function createApp() {
const app = createSSRApp(App);
app.use(pinia);
app.use(router);
return {
app,
};
}
配置自动导入 在vite.config.js 文件
import { defineConfig } from "vite";
import uni from "@dcloudio/vite-plugin-uni";
//自动导入第三方库
import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
//按需加载组件配置
import Components from "unplugin-vue-components/vite"; // 按需加载自定义组件
//配置路由表
import TransformPages from "uni-read-pages-vite";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
//自动导入第三方库 vue pinia nui-mini-rrouter
imports: [
"vue",
"pinia",
{
from: "uni-mini-router",
imports: ["createRouter", "useRouter", "useRoute"],
},
],
}),
//按需加载组件配置
Components({
dirs: ["src/components"], // 配置需要默认导入的自定义组件文件夹，该文件夹下的所有组件都会自动 import
extensions: ["vue"], // 组件的有效文件扩展名。
deep: true, // 是否搜索子目录。
dts: false, // 默认值：如果安装了 `typescript` 包，则为 `true`。
resolvers: [], // 自定义组件的解析器。
}),
uni(),
],
//配置路由表
define: {
ROUTES: new TransformPages().routes, // 注入路由表
},
resolve: {
alias: {
"@": path.resolve(__dirname, "src"), //配置路径别名
},
},
server: {
//解决跨域问题
port: 8090, // 端口
proxy: {
"/api": {
target: "http://xs.com",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
});
7.axios安装使用请求数据接口
官方文档：https://axios.p2hp.com/docs/intro.html
#安装
npm install axios -S2. 使用uvui
官方文档：https://www.uvui.cn/components/waterfall.html
# 安装
npm i @climblee/uv-ui- 在项目根目录pages.json中配置easycom：
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
"^uv-(.*)": "@climblee/uv-ui/components/uv-$1/uv-$1.vue"
}
},
// 其他内容
pages:[
// ...
]
}
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
10
0- 0
已为社区贡献2条内容
所有评论(0)