guli-admin前端环境重要文件介绍

大家好，欢迎来到IT知识分享网。

guli-admin前端环境重要文件介绍
1、拥有完整功能的插件（项目目录介绍）

├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── filtres                // 全局 filter
│   ├── icons                  // 项目所有 svg icons
│   ├── lang                   // 国际化 language
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── styles                 // 全局样式
│   ├── utils                  // 全局公用方法
│   ├── vendor                 // 公用vendor
│   ├── views                   // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── permission.js          // 权限管理
├── static                     // 第三方不打包资源
│   └── Tinymce                // 富文本
├── .babelrc                   // babel-loader 配置
├── .eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── favicon.ico                // favicon图标
├── index.html                 // html模板
└── package.json               // package.json

npm项目的核心配置文件，包含项目信息，项目依赖，项目启动相关脚本 启动项目的命令： npm run dev dev 脚本：webpack-dev-server --inline --progress --config build/webpack.dev.conf.js webpack-dev-server： 一个小型的基于Node.js的http服务器，可以运行前端项目 --inline：一种启动模式 --progress：显示启动进度 --config build/webpack.dev.conf.js：指定webpack配置文件所在位置 

{
  "name": "vue-admin-template",
  "version": "3.8.0",
  "license": "MIT",
  "description": "A vue admin template with Element UI & axios & iconfont & permission control & lint",
  "author": "Pan <panfree23@gmail.com>",
  //配置开发环境启动
  "scripts": {
    *"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",*
    "build": "node build/build.js",
    "build:report": "npm_config_report=true npm run build",
    "lint": "eslint --ext .js,.vue src",
    "test": "npm run lint",
    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
  },
  "dependencies": {
    "axios": "0.18.0",
    "element-ui": "2.4.6",
    "js-cookie": "2.2.0",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "vue": "2.5.17",
    "vue-router": "3.0.1",
    "vuex": "3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "8.5.0",
    "babel-core": "6.26.0",
    "babel-eslint": "8.2.6",
    "babel-helper-vue-jsx-merge-props": "2.0.3",
    "babel-loader": "7.1.5",
    "babel-plugin-syntax-jsx": "6.18.0",
    "babel-plugin-transform-runtime": "6.23.0",
    "babel-plugin-transform-vue-jsx": "3.7.0",
    "babel-preset-env": "1.7.0",
    "babel-preset-stage-2": "6.24.1",
    "chalk": "2.4.1",
    "copy-webpack-plugin": "4.5.2",
    "css-loader": "1.0.0",
    "eslint": "4.19.1",
    "eslint-friendly-formatter": "4.0.1",
    "eslint-loader": "2.0.0",
    "eslint-plugin-vue": "4.7.1",
    "eventsource-polyfill": "0.9.6",
    "file-loader": "1.1.11",
    "friendly-errors-webpack-plugin": "1.7.0",
    "html-webpack-plugin": "4.0.0-alpha",
    "mini-css-extract-plugin": "0.4.1",
    "node-notifier": "5.2.1",
    "node-sass": "^4.7.2",
    "optimize-css-assets-webpack-plugin": "5.0.0",
    "ora": "3.0.0",
    "path-to-regexp": "2.4.0",
    "portfinder": "1.0.16",
    "postcss-import": "12.0.0",
    "postcss-loader": "2.1.6",
    "postcss-url": "7.3.2",
    "rimraf": "2.6.2",
    "sass-loader": "7.0.3",
    "script-ext-html-webpack-plugin": "2.0.1",
    "semver": "5.5.0",
    "shelljs": "0.8.2",
    "svg-sprite-loader": "3.8.0",
    "svgo": "1.0.5",
    "uglifyjs-webpack-plugin": "1.2.7",
    "url-loader": "1.0.1",
    "vue-loader": "15.3.0",
    "vue-style-loader": "4.1.2",
    "vue-template-compiler": "2.5.17",
    "webpack": "4.16.5",
    "webpack-bundle-analyzer": "2.13.1",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.5",
    "webpack-merge": "4.1.4"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

2.2 config/index.js

const path = require('path') module.exports = { dev: { // Paths assetsSubDirectory: 'static',//所有静态资源存放位置 assetsPublicPath: '/', proxyTable: {}, // Various Dev Server settings host: 'localhost', // can be overwritten by process.env.HOST port: 9528, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined autoOpenBrowser: true, errorOverlay: true, notifyOnErrors: false, poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- // Use Eslint Loader? // If true, your code will be linted during bundling and // linting errors and warnings will be shown in the console. useEslint: true, // If true, eslint errors and warnings will also be shown in the error overlay // in the browser. showEslintErrorsInOverlay: false, / * Source Maps */ // https://webpack.js.org/configuration/devtool/#development devtool: 'cheap-source-map', // CSS Sourcemaps off by default because relative paths are "buggy" // with this option, according to the CSS-Loader README // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. cssSourceMap: false }, 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-admin-template</title>
  </head>
  <body>
    <div id="app"></div>//打包后的主js文件会自动嵌入到这个位置
    <!-- built files will be auto injected -->
  </body>
</html>

webpack配置文件，包含项目在开发环境打包和运行的相关配置 webpack.dev.conf.js 中引用了 webpack.base.conf.js webpack.base.conf.js 中定义了项目打包的入口文件 

在HtmlWebpackPlugin配置html模板，生成的js就会自动插入到模板中，如下面的配置。
因此生成的js文件会被自动插入到名为index.html的页面中

2.5 src/main.js
项目js入口文件，项目的所有前端功能都在这个文件中引入和定义，并初始化全局的Vue对象

import locale from 'element-ui/lib/locale/lang/zh-CN' //引入中文显示 import '@/icons' // icon import '@/permission' // permission control @：src的意思：先找src下的文件，没有找到再找文件夹 

2.6 config/dev.env.js
定义全局常量值


因此，在项目中的任意位置可以直接使用 process.env.BASE_API 常量表示后端接口的主机地址

2.7 src/utils/request.js
引入axios模块，定义全局的axios实例，并导出模块

2.8 src/api/login.js
引用request模块，调用远程api