Vue Admin Work X 项目教程

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

vue-admin-work-x/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   ├── components/
│   ├── layouts/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   ├── main.ts
│   └── ...
├── .browserslistrc
├── .env.development
├── .env.production
├── .eslintrc.js
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── babel.config.js
├── package.json
├── tsconfig.json
└── vue.config.js

目录结构介绍

• public/: 存放静态资源文件，如 index.html。
• src/: 项目的主要源代码目录。
  • assets/: 存放静态资源文件，如图片、字体等。
  • components/: 存放项目中使用的 Vue 组件。
  • layouts/: 存放页面布局组件。
  • router/: 存放 Vue Router 相关配置文件。
  • store/: 存放 Vuex 状态管理相关文件。
  • views/: 存放页面视图组件。
  • App.vue: 项目的根组件。
  • main.ts: 项目的入口文件。
• .browserslistrc: 配置项目支持的浏览器版本。
• .env.development: 开发环境的环境变量配置。
• .env.production: 生产环境的环境变量配置。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件配置。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• babel.config.js: Babel 配置文件。
• package.json: 项目依赖和脚本配置。
• tsconfig.json: TypeScript 配置文件。
• vue.config.js: Vue CLI 配置文件。

2. 项目的启动文件介绍

main.ts

main.ts 是项目的入口文件，负责初始化 Vue 应用并挂载到 DOM 上。以下是 main.ts 的主要内容：

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

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

文件介绍

• createApp(App): 创建 Vue 应用实例。
• use(store): 挂载 Vuex 状态管理。
• use(router): 挂载 Vue Router。
• mount('#app'): 将应用挂载到 DOM 元素 #app 上。

3. 项目的配置文件介绍

vue.config.js

vue.config.js 是 Vue CLI 的配置文件，用于自定义项目的构建配置。以下是 vue.config.js 的主要内容：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/vue-admin-work-x/' : '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: process.env.NODE_ENV !== 'production',
  devServer: {
    port: 8080,
    open: true,
    overlay: {
      warnings: false,
      errors: true,
    },
  },
  configureWebpack: {
    resolve: {
      alias: {
        '@': resolve('src'),
      },
    },
  },
};

配置文件介绍

• publicPath: 设置项目在生产环境中的公共路径。
• outputDir: 设置构建输出目录。
• assetsDir: 设置静态资源目录。
• lintOnSave: 设置是否在保存时进行 ESLint 检查。
• devServer: 配置开发服务器的端口、自动打开浏览器等。
• configureWebpack: 配置 Webpack，如路径别名等。

通过以上配置，可以灵活地调整项目的构建和开发环境。