项目的创建和基本配置

创建项目

将vue-admin-template-master重命名为guli-admin

修改项目信息

package.json

{"name": "admin",......"description": "后台管理系统","author": "Helen <88888888@qq.com>",......
}

如果需要修改端口号

config/index.js中修改

port: 9528

项目的目录结构

.
├── build // 构建脚本
├── config // 全局配置
├── node_modules // 项目依赖模块
├── src //项目源代码
├── static // 静态资源
└── package.jspon // 项目信息和依赖配置

src
├── api // 各种接口
├── assets // 图片等资源
├── components // 各种公共组件，非公共组件在各自view下维护
├── icons //svg icon
├── router // 路由表
├── store // 存储
├── styles // 各种样式
├── utils // 公共工具，非公共工具，在各自view下维护
├── views // 各种layout
├── App.vue //***项目顶层组件***
├── main.js //***项目入口文件***
└── permission.js //认证入口

运行项目

npm run dev

登录页修改

src/views/login/index.vue（登录组件）

4行

<h3 class="title">后台管理系统</h3>

28行

<el-button :loading="loading" type="primary" style="width:100%;" @click.native.prevent="handleLogin">登录
</el-button>

页面零星修改

1、标题

index.html（项目的html入口）

<title>谷粒学院后台管理系统</title>

修改后热部署功能，浏览器自动刷新

国际化设置

打开 src/main.js（项目的js入口），第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件

import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n

icon

复制 favicon.ico 到根目录

导航栏文字

src/views/layout/components（当前项目的布局组件）

src/views/layout/components/Navbar.vue

13行

<el-dropdown-item>首页
</el-dropdown-item>

17行

<span style="display:block;" @click="logout">退出</span>

面包屑文字

src/components（可以在很多项目中复用的通用组件）

src/components/Breadcrumb/index.vue

38行

meta: { title: '首页' }

Eslint语法规范型检查

ESLint简介

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调适。

ESLint 是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。让程序员在编码的过程中发现问题而不是在执行的过程中。

语法规则

ESLint 内置了一些规则，也可以在使用过程中自定义规则。

本项目的语法规则包括：两个字符缩进，必须使用单引号，不能使用双引号，语句后不可以写分号，代码段之间必须有一个空行等。

确认开启语法检查

打开 config/index.js，配置是否开启语法检查

useEslint: true,

可以关闭语法检查，建议开启，养成良好的编程习惯。

项目前端页面框架介绍相关推荐

SpringBoot个人博客项目搭建—前端页面功能介绍（一）
SpringBoot个人博客-前端页面功能介绍(一) 项目首页地址:https://blog.csdn.net/weixin_45019350/article/details/108869025 一. ...
Xamarin.FormsShell基础教程（7）Shell项目关于页面的介绍
Xamarin.FormsShell基础教程(7)Shell项目关于页面的介绍轻拍标签栏中的About标签,进入关于页面,如图1.8和图1.9所示.它是对应用程序介绍的页面. 该页面源自Views文 ...
flask后台管理系统快速开发案例之bootstrap搭建前端页面框架
这次为了给大家来一次较为完整的flask知识的分享,于是乎,我干脆直接写一个较为全面的,从前端到后端均自定义的基于flask的后台管理项目,先给大家看一下本次项目的效果图: 因为是示范版的,比较简洁, ...
当前流行的前端及框架介绍（React和Vue）
文章目录前言一.前端是什么? 二.前端的核心技术 1.HTML 2.CSS 3.JavaScript 三.前端框架介绍 1.React 2.Vue 参考网址前言这一节是和大家一起学习前端是 ...
微信小程序--札记与贺卡项目前端页面UI设计实现
这周因为忙着开学准备以及开学之后的事情,所以没有多余的时间去学习另外的知识,只是在有限的时间内抓紧完成了这周布置的任务-札记与贺卡项目的UI设计. 主要是通过千图网和图怪兽寻找灵感进行素材的制作,或者 ...
微信小程序--证件照换底色项目前端修改+头像框项目前端页面实现修改
证件照换底色主要进行后端所需功能的增加,尺寸选择功能的增加,颜色选择功能样式修改,版权问题导致的ui修改和所需ui的设计. 跳转前按钮判断在点击开始转换图片进行跳转之前,判断用户是否已经进行授权, ...
前端页面框架-----layerui
对于后台开发人员来说,前端开发可能会是一个短板,对于页面的样式不能很好的的把控,为此只能在网上找一些开源的页面框架插件,本人也在网上搜集过一些框架插件,但最近发现一个比较全面美观度也还不错的插件lay ...
ASP.NET MVC5+EF6+EasyUI 后台管理系统（2）-easyui构建前端页面框架[附源码]
系列目录前言为了符合后面更新后的重构系统,本文于2016-10-31日修正一些截图,文字我们有了一系列的解决方案,我们将动手搭建新系统吧. 后台系统没有多大的UI视觉,这次我们采用的是标准的左右 ...
Vue进阶（贰佰）：前端UI框架介绍
文章目录前言一. ElementUI 二.iView UI 三.Ant-design-vue 四.at-ui 五.Mint UI 六.WeUI 七.cube-ui 八.amaze UI 九.Flu ...

项目前端页面框架介绍