谷粒学院项目实战55——vue-admin-template
vue-admin-template
1 前端页面搭建
我们使用vue-admin-template作为前端的模板。下载地址：下载仓库 · 花裤衩/vue-admin-template - Gitee.com。将其解压并复制到工作区vs1010(选择自己的工作区即可).
看下目录结构，里面有个package.json文件，执行 npm install安装依赖文件。
如果下载失败则删除下载的文件重新下载，下载成功后会生成node_modules,里面保存了依赖。
使用npm run dev启动项目。
前端页面是这样的。
前端的入口文件是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目录。
3 前端框架登录问题
前端页面登录的url经常会挂掉，后面要改为本地地址。
java全栈日日学 文章被收录于专栏
java全栈每日必学，不要高估自己一年能做的事，不要低估自己十年能做的事
查看3道真题和解析
