uni-vue3-vite-ts-pinia 项目教程

姬忆慈Loveable

于 2024-08-16 09:34:05 发布

阅读量143

点赞数 3

本文链接：https://blog.csdn.net/gitblog_00989/article/details/141248728

版权

uni-vue3-vite-ts-pinia 项目教程

uni-vue3-vite-ts-piniaA template for uniapp with vue3.项目地址:https://gitcode.com/gh_mirrors/un/uni-vue3-vite-ts-pinia

1. 项目的目录结构及介绍

uni-vue3-vite-ts-pinia/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── pages/
│   ├── stores/
│   ├── App.vue
│   ├── main.ts
│   ├── manifest.json
│   ├── pages.json
│   ├── shims-vue.d.ts
├── .eslintrc.js
├── .gitignore
├── .prettierrc
├── index.html
├── package.json
├── tsconfig.json
├── vite.config.ts
├── README.md

目录结构说明

public/: 存放公共资源文件。
src/: 源代码目录。
- assets/: 存放静态资源文件，如图片、字体等。
- components/: 存放 Vue 组件。
- pages/: 存放页面组件。
- stores/: 存放 Pinia 状态管理文件。
- App.vue: 根组件。
- main.ts: 入口文件。
- manifest.json: 应用配置文件。
- pages.json: 页面配置文件。
- shims-vue.d.ts: Vue 类型声明文件。
.eslintrc.js: ESLint 配置文件。
.gitignore: Git 忽略文件配置。
.prettierrc: Prettier 代码格式化配置文件。
index.html: 项目主页。
package.json: 项目依赖和脚本配置文件。
tsconfig.json: TypeScript 配置文件。
vite.config.ts: Vite 配置文件。
README.md: 项目说明文档。

2. 项目的启动文件介绍

main.ts

main.ts 是项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 中。

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';
import piniaPluginPersist from 'pinia-plugin-persist-uni';

const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersist);

app.use(pinia);
app.mount('#app');

index.html

index.html 是项目的主页，包含一个根元素 #app，Vue 应用将挂载到这个元素上。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>uni-vue3-vite-ts-pinia</title>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

3. 项目的配置文件介绍

vite.config.ts

vite.config.ts 是 Vite 的配置文件，用于配置开发服务器、构建选项等。

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    port: 3000,
  },
});

tsconfig.json

tsconfig.json 是 TypeScript 的配置文件，用于配置 TypeScript 编译选项。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution":

uni-vue3-vite-ts-piniaA template for uniapp with vue3.项目地址:https://gitcode.com/gh_mirrors/un/uni-vue3-vite-ts-pinia

姬忆慈Loveable

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
uni-vue3-vite-ts-pinia 项目教程

uni-vue3-vite-ts-pinia 项目教程 uni-vue3-vite-ts-piniaA template for uniapp with vue3.项目地址:https://gitcode.com/gh_mirrors/un/uni-vue3-vite-ts-pinia 1. 项目的目录结构及介绍uni-vue3-vite-ts-pinia/├── public/├── s...
复制链接

扫一扫