项目实训——前端初始化

任务

开始前端开发，经过调研比较各模板，决定使用vue-admin-template轻量级后台管理系统
接下来完成对模版的克隆、分析、简化、环境配置的工作

具体工作

• 模版克隆
  使用git bash进行克隆

  git clone https://github.com/PanJiaChen/vue-admin-template
  

  使用命令行工具进行安装

  # 进入项目目录
  cd vue-admin-template
  
  # 安装依赖
  npm install
  
  # 启动服务
  npm run dev
  
  # 浏览器进行访问 http://localhost:9528/
  

• 项目目录结构及主要部分说明

  ├── public
  │   ├── favicon.ico
  │   └── index.html					/* 入口页面 */
  ├── src
  │   ├── App.vue                     /* 页面主文件 */
  │   ├── api                         /* 封装http请求文件 */
  │   │   ├── user.js                 /* 用户模块接口 */
  │   ├── assets                      /* 静态资源 */
  │   │   ├── other                   /* 图片 */
  │   │   └── 404_images              /* 404_image图片 */
  │   ├── components                  /* 组件 */
  │   ├── directives                  /* 全局指令 */
  │   ├── main.js                     /* 项目入口文件 */
  │   ├── router                      /* 路由 */
  │   │   └── index.js               	/* 路由配置文件 */
  │   ├── store                       /* Vuex */
  │   │   ├── index.js                /* Vuex入口文件 */
  │   │   ├── getters.js              /* getters定义 */
  │   │   └── module                  /* Vuex模块文件 */
  │   ├── styles                      /* 样式 */
  │   ├── utils                     	/* 工具文件 */
  │   └── views                       /* 页面 */
  │   |   ├── user.vue               	/* 用户页面 */
  │   |   ├── 404.vue               	/* 错误页面 */
  │       └── test.vue             	/* 测试页面 */
  ├── package.json                    /* 项目依赖 */
  ├── package-lock.json               /* 锁版本包 */
  ├── .env.development                /* 开发、测试环境配置 */
  ├── .env.test                       /* 测试环境配置 */
  ├── .env.production                 /* 生产环境配置 */
  ├── babel.config.js                 /* babel配置文件 */
  ├── vue.config.js                   /* Vue CLI自定义配置文件 */
  └── README.md                       /* 描述文件 */
  

• 进行集成修改

  • 进入vue.config.js进行如下修改

    //注释掉下面行，防止出现一些警告
    //lintOnSave: process.env.NODE_ENV === 'development',
    
    //不使用模拟数据，可以同时将mock文件夹删除
    //before: require('./mock/mock-server.js') 模拟数据
    

  • 进入.env.development

    # base api 修改基本的api
    VUE_APP_BASE_API = 'http://localhost:8080'
    

  • 进入settings.js

    // 在第三行可以修改项目名称
    title:'智能分析辅助系统'
    

  • 进入```main.js``

    //注释掉下面的代码
    /*测试*/
    // if (process.env.NODE_ENV === 'production') {
    //   const { mockXHR } = require('../mock')
    //   mockXHR()
    // }
    //Vue.use(ElementUI, { locale })
    

  • 进入src-api,删除不需要的.js文件。

  • 进入src-layout-componets,对页面布局进行修改。

  • 进入src-router，删除不需要的路由。

  • 进入src-store,对vuex进行配置管理。

  • 进入src-views，对不需要的.vux文件进行删除。

• 对项目目录中的配置完成以及简化之后，启动http://localhost:9528/#/dashboard，启动成功。