vue-admin-template

1 前端页面搭建

我们使用vue-admin-template作为前端的模板。下载地址：下载仓库 · 花裤衩/vue-admin-template - Gitee.com。将其解压并复制到工作区vs1010(选择自己的工作区即可).

看下目录结构，里面有个package.json文件，执行 npm install安装依赖文件。

image-20211015221416386 alt

如果下载失败则删除下载的文件重新下载，下载成功后会生成node_modules,里面保存了依赖。

使用npm run dev启动项目。

image-20211015222054886 alt

前端页面是这样的。

image-20211015222147660 alt

前端的入口文件是index.html与main.js.可以关注下这两个文件的内容。

2 前端框架介绍

(1) 入口文件

main.js其实就是一个导入了很多外部框架的Vue文件。

import Vue from 'vue'

import 'normalize.css/normalize.css' // A modern alternative to CSS resets

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n

import '@/styles/index.scss' // global css

import App from './App'
import store from './store'
import router from './router'

import '@/icons' // icon
import '@/permission' // permission control

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api
 * you can execute: mockXHR()
 *
 * Currently MockJs will be used in the production environment,
 * please remove it before going online ! ! !
 */
if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}

// set ElementUI lang to EN
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

在public下的index.html其实就是放了个div块(如果你用的vue-admin-template与我的下载地址不同，文件位置可能不一样)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

(2) 主要集成技术

vue + element-ui

(3) 目录结构

build目录。放项目构建的脚本文件。

config目录。放项目配置文件。里面有index.js，将其中useEslint改为false。这个插件是用于帮助我们检查代码的，但其检查太过于严格了，使用的意义不大。config目录下还有个dev.env.js文件，可以用来配置后端的接口地址。

src目录。

alt

3 前端框架登录问题

前端页面登录的url经常会挂掉，后面要改为本地地址。