Vue Admin 项目教程

Vue Admin 项目教程

vue-adminadmin template based on vuejs2 and element.项目地址:https://gitcode.com/gh_mirrors/vue/vue-admin

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

vue-admin/
├── build/                  # Webpack 配置文件
├── config/                 # 项目配置文件
├── src/                    # 源代码目录
│   ├── assets/             # 静态资源文件
│   ├── components/         # 公共组件
│   ├── router/             # 路由配置
│   ├── views/              # 页面视图
│   ├── App.vue             # 主组件
│   ├── main.js             # 入口文件
├── static/                 # 静态文件目录
├── test/                   # 测试文件目录
├── .babelrc                # Babel 配置文件
├── .editorconfig           # 编辑器配置文件
├── .eslintrc.js            # ESLint 配置文件
├── .gitignore              # Git 忽略文件配置
├── index.html              # 入口 HTML 文件
├── package.json            # 项目依赖及配置
├── README.md               # 项目说明文档

目录结构介绍

• build/：包含 Webpack 的配置文件，用于构建项目。
• config/：包含项目的配置文件，如开发、生产环境的配置。
• src/：源代码目录，包含项目的所有源代码。
  • assets/：静态资源文件，如图片、字体等。
  • components/：公共组件，可以在多个页面中复用。
  • router/：路由配置，定义应用的路由结构。
  • views/：页面视图，包含各个页面的具体实现。
  • App.vue：主组件，应用的根组件。
  • main.js：入口文件，初始化 Vue 实例并加载必要的资源。
• static/：静态文件目录，存放不会被 Webpack 处理的静态资源。
• test/：测试文件目录，包含单元测试和端到端测试文件。
• .babelrc：Babel 配置文件，用于配置 JavaScript 的转译规则。
• .editorconfig：编辑器配置文件，统一代码风格。
• .eslintrc.js：ESLint 配置文件，用于代码检查。
• .gitignore：Git 忽略文件配置，指定不需要纳入版本管理的文件。
• index.html：入口 HTML 文件，应用的入口点。
• package.json：项目依赖及配置，包含项目的依赖包和脚本命令。
• README.md：项目说明文档，提供项目的概述和使用说明。

2. 项目的启动文件介绍

入口文件 main.js

import Vue from 'vue';
import App from './App';
import router from './router';

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

文件介绍

• import Vue from 'vue';：引入 Vue 库。
• import App from './App';：引入主组件 App.vue。
• import router from './router';：引入路由配置。
• Vue.config.productionTip = false;：关闭生产环境提示。
• new Vue({...})：创建 Vue 实例，挂载到 #app 元素上，并注册路由和主组件。

3. 项目的配置文件介绍

Webpack 配置文件 build/webpack.base.conf.js

const path = require('path');
const utils = require('./utils');
const config = require('../config');
const vueLoaderConfig = require('./vue-loader.conf');

function resolve(dir) {
  return path.join(__dirname, '..', dir);
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.

vue-adminadmin template based on vuejs2 and element.项目地址:https://gitcode.com/gh_mirrors/vue/vue-admin