Vite-Vue3-Lowcode 项目使用教程

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

vite-vue3-lowcode/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   ├── main.ts
├── types/
├── .browserslistrc
├── .cz-config.js
├── .editorconfig
├── .env.development
├── .env.production
├── .eslintignore
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .npmrc
├── .prettierignore
├── .stylelintignore
├── LICENSE
├── README.EN.md
├── README.md
├── auto-imports.d.ts
├── package.json
├── tsconfig.json
├── vite.config.ts

目录结构介绍

• public/: 存放静态资源文件。
• src/: 项目源代码目录。
  • assets/: 存放静态资源，如图片、字体等。
  • components/: 存放可复用的 Vue 组件。
  • router/: 存放 Vue Router 相关配置。
  • store/: 存放 Vuex 状态管理相关配置。
  • views/: 存放页面级别的组件。
  • App.vue: 项目的根组件。
  • main.ts: 项目的入口文件。
• types/: 存放 TypeScript 类型定义文件。
• .browserslistrc: 配置目标浏览器版本。
• .cz-config.js: 配置 Commitizen 工具。
• .editorconfig: 配置编辑器风格。
• .env.development: 开发环境变量配置。
• .env.production: 生产环境变量配置。
• .eslintignore: 配置 ESLint 忽略的文件。
• .eslintrc.js: 配置 ESLint 规则。
• .gitattributes: 配置 Git 属性。
• .gitignore: 配置 Git 忽略的文件。
• .npmrc: 配置 npm 设置。
• .prettierignore: 配置 Prettier 忽略的文件。
• .stylelintignore: 配置 Stylelint 忽略的文件。
• LICENSE: 项目许可证。
• README.EN.md: 英文项目说明文档。
• README.md: 中文项目说明文档。
• auto-imports.d.ts: 自动导入的类型定义文件。
• package.json: 项目依赖和脚本配置。
• tsconfig.json: TypeScript 配置文件。
• vite.config.ts: Vite 配置文件。

2. 项目的启动文件介绍

main.ts

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

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(router)
app.use(store)
app.mount('#app')

App.vue

App.vue 是项目的根组件，包含了路由视图和全局样式。

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style>
/* 全局样式 */
</style>

3. 项目的配置文件介绍

vite.config.ts

vite.config.ts 是 Vite 的配置文件，包含了项目的基本配置、插件和优化选项。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src'
    }
  },
  server: {
    port: 3000
  }
})

.env.development 和 .env.production

这两个文件分别配置了开发环境和生产环境的环境变量。

# .env.development