目录
十、vue-element-admin/vue-admin-template?
一、vscode的安装与配置
? ? ? ? ?关于vscode如何下载、安装，无需赘述。
????????想强调的是vscode不能在软件里创建新工程，而是要自己手动创建一个目录才可以。而且安装之后记得下载这四个插件。
二、ES6
2.1 介绍
?????????ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）
2.2 语法
????????ES标准中不包含 DOM 和 BOM的定义，只涵盖基本数据类型、关键字、语句、运算符、内建对象、内建函数等通用语法。本部分只学习前端开发中ES6的最少必要知识，方便后面项目开发中对代码的理解。
2.2.1 let声明变量
????????// var 声明的变量 没有局部作用域，可声明多次。
????????// let 声明的变量 有局部作用域，只能声明一次，但值可变。
{
var a=1;
let b=1;
}
console.log(a);//正常显示
console.log(b);//报错
{
var a=1;
var a=2;
let b=1;
let b=2;
}
console.log(a);//正常
console.log(b);//代码编辑的时候直接报错2.2.2?const声明常量（只读变量）
????????//有局部作用域，声明之后不允许改变，必须初始化（有点像java的private、final类型变量）
const PI=3.14;
PI=3.1415926;
console.log(PI);//报错！变量值不能改变！2.2.3?解构赋值
????????解构赋值是对赋值运算符的扩展。他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。
//1.数组解构
// 传统
let a=1,b=2,c=3;
console.log(a,b,c)
//es6
let[x,y,z]=[1,2,3];
console.log(x,y,z);
//2.对象解构
let usr ={name:'wz',age:18};
//传统
let n1 =usr.name,a1=usr.age;
console.log(n1,a1);
//es6
let{name,age}=usr; //注意：结构的变量必须是user中的属性
console.log(name,age);2.2.4?模板字符串
????????模板字符串相当于加强版的字符串，用反引号?`,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式
//1.换行字符串
let s=`hello,
vscode!`;
console.log(s);
//hello,
// vscode!// 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
let s=`hello,vscode!`;
let info=`${s}I'm wz!`;
console.log(info);
//hello,vscode!I'm wz!// 3、字符串中调用函数
function f(){
return 8848;
}
let info=`server port is ${f()}`;
console.log(info);
//server port is 88482.2.5?声明对象简写
const age = 12
const name = "Amy"
// 传统
const person1 = {age: age, name: name}
console.log(person1)
// ES6
const person2 = {age, name}
console.log(person2)
//{age: 12, name: "Amy"}2.2.6 定义方法简写
// 传统
const person1 = {
sayHi:function(){
console.log("Hi")
}
}
person1.sayHi();//"Hi"
//es6
const person2 = {
sayHi(){
console.log("Hi")
}
}
person2.sayHi() //"Hi"2.2.7 对象拓展运算符
????????拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
// 1、拷贝对象
let person1 = {name: "Amy", age: 15}
let someone = { ...person1 }
console.log(someone) //{name: "Amy", age: 15}
// 2、合并对象
let age = {age: 15}
let name = {name: "Amy"}
let person2 = {...age, ...name}
console.log(person2) //{age: 15, name: "Amy"}2.2.8 箭头函数
????????箭头函数提供了一种更加简洁的函数书写方式。箭头函数多用于匿名函数的定义。
????????基本语法是： 参数 => 函数体
// 传统
var f1 = function(a){
return a
}
console.log(f1(1))
// ES6
var f2 = a => a
console.log(f2(1))
// 多参数时
var f3 = (a,b) => {
let result = a+b
return result
}
console.log(f3(6,2)) // 8
// 前面代码相当于：
var f4 = (a,b) => a+b三、Vue入门
3.1 hello world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="vue.min.js"></script>
</head>
<body>
<!-- id标识vue作用的范围 -->
<div id="app">
<!-- {{ }} 插值表达式，绑定vue中的data数据 -->
{{ message }}
</div>
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
new Vue({
el: '#app',//绑定vue作用的范围
data: {//定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>
</body>
</html>????????这就是声明式渲染：Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。这里的核心思想就是没有繁琐的DOM操作，例如jQuery中，我们需要先找到div节点，获取到DOM对象，然后进行一系列的节点操作。
? ? ? ? 这是一个基本的模板，我们可以在vscode中将其保存起来
文件 => 首选项 => 用户代码片段 => 新建全局代码片段/或文件夹代码片段：vue-html.code-snippets? ? ? ? ?内容如下：
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}? ? ? ? 之后新建 html 的时候只需输入vue即可把代码片段取出来
3.2 数据渲染和绑定
????????除了使用插值表达式{{ }}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（?:?）
<div id="app">
<h1 v-bind:title="content"> //v-bing绑定
{{message}}
</h1>
<h1 :title="content"> //简写形式
{{message}}
</h1>
</div>
<script>
new Vue({
el:'#app',
data: {
message:"hello",
content:"I'm your fathor"
}
})
</script>? ? ? ? title属性就是把鼠标停留在标签文本上面时显示的内容。
3.3 双向数据绑定
? ? ? ? 使用?v-model?进行双向数据绑定
<div id="app">
<!-- v-bind:value只能进行单向的数据渲染 -->
<input type="text" :value="msgs.msg1">
<!-- v-model 可以进行双向的数据绑定 -->
<input type="text" v-model="msgs.msg1">
<p>您要查询的是：{{msgs.msg1}}</p>
</div>
<script>
new Vue({
el:'#app',
data: {
msgs:{
msg1:'vue 666!'
}
}
})
</script>? ? ? ? 单向绑定的效果：
? ? ? ? ?双向绑定的效果：
3.4 定义事件
? ? ? ? 就是在若某个动作时触发相应的操作。
????????使用?v-on?进行数件处理，v-on:click?表示处理鼠标点击事件，可简写为@click。事件调用的方法定义在?vue?对象声明的?methods?节点中
<div id="app">
<!-- v-on 指令绑定事件，click指定绑定的事件类型，事件发生时调用vue中methods节点中定义的方法 -->
<button @click="search()">查询</button>
<p>您要查询的是：{{msgs.msg}}</p>
<input type="text" :value="result.title"><br/>
<input type="text" :value="result.site">
</div>
<script>
new Vue({
el:'#app',
data: {
msgs:{
msg:'vue'
},
result:{}//用于存放结果
},
methods:{
search(){
this.result={
"title":"vue.js",
"site":"https://vuejs.org" //单击查询按键后为result赋值，回显在输入框上
}
}
}
})
</script>
3.5 修饰符
????????修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：即阻止事件原本的默认行为。
? ? ? ? 下面的例子就阻止了默认的表单提交行为，使用自定义方法onSubmit 进行处理
<div id="app">
<!-- 修饰符用于指出一个指令应该以特殊方式绑定。
这里的 .prevent 修饰符告诉 v-on 指令对于触发的事件调用js的 event.preventDefault()：
即阻止表单提交的默认行为 -->
<form action="save" v-on:submit.prevent="onSubmit">
<input type="text" id="username" v-model="usr.username">
<button type="submit">保存</button>
</form>
</div>
<script>
new Vue({
el:'#app',
data: {
usr:{}
},
methods:{
onSubmit(){
if(this.usr.username) {
alert("正常提交表单")
}else {
alert("用户名不能为空！")
}
}
}
})
</script>? ? ? ? 当输入框有内容时提交
? ? ? ? ?输入框无内容时提交
3.6 条件渲染
????????v-if/else：条件指令
<div id="app">
<input type="checkbox" v-model="isOK">同意用户协议</input>
<div v-if="isOK">你同意了协议</div>
<div v-else>你拒绝了协议</div>
</div>
<script>
new Vue({
el:'#app',
data: {
isOK:false
}
})
</script>
????????使用v-show可完成和上面相同的功能，但不做演示了，一般就用v-if。因为：
v-if?是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if?也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。- 相比之下，
v-show?就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。- 一般来说，
v-if?有更高的切换开销，而?v-show?有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用?v-show?较好；如果在运行时条件很少改变，则使用?v-if?较好。
3.7 列表渲染
????????v-for：列表循环指令
<div id="app">
<!-- 1、简单的列表渲染 -->
<ul>
<li v-for="n in 10">{{ n }} </li>
</ul>
<!-- 如果想获取索引，则使用index关键字，注意，圆括号中的index必须放在后面 -->
<ul>
<li v-for="(n, index) in 5">{{ n }} - {{ index }} </li>
</ul>
</div>
?????????遍历数据列表：
<div id="app">
<table border="1">
<!-- <tr v-for="item in userList"></tr> -->
<tr v-for="(item, index) in userList">
<td>{{index}}</td>
<td>{{item.id}}</td>
<td>{{item.username}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el:'#app',
data: {
userList: [
{ id: 1, username: 'helen', age: 18 },
{ id: 2, username: 'peter', age: 28 },
{ id: 3, username: 'andy', age: 38 }]
}
})
</script>3.8 组件
????????组件（Component）是 Vue.js 最强大的功能之一。
????????组件可以扩展 HTML 元素，封装可重用的代码。
????????组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
? ? ? ? ?1.局部组件
var app = new Vue({
el: '#app',
// 定义局部组件，这里可以定义多个局部组件
components: {
//组件的名字
'Navbar': {
//组件的内容
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}
}
})? ? ? ? 使用：
<div id="app">
<Navbar></Navbar>
</div>? ? ? ? 2.全局组件
// 在单独的js文件中定义全局组件
Vue.component('Navbar', {
template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})? ? ? ? 使用：
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
var app = new Vue({
el: '#app'
})
</script>3.9 Vue示例的生命周期?
????????分析生命周期相关方法的执行时机：
?//===创建时的四个事件
//第一个被执行的钩子方法，实例被创建出来之前执行。beforeCreate执行时，data 和 methods 中的数据都还没有没初始化//第二个被执行的钩子方法。 created执行时，data 和 methods 都已经被初始化好了！如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作// 第三个被执行的钩子方法。beforeMount执行时，模板已经在内存中编辑完成了，尚未被渲染到页面中// 第四个被执行的钩子方法。mounted 执行，内存中的模板已经渲染到页面，用户已经可以看见内容//===运行中的两个事件// beforeUpdate执行时，内存中的数据已更新，但是页面尚未被渲染// updated执行时，内存中的数据已更新，并且页面已经被渲染
3.10 路由
????????Vue.js 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。
????????Vue.js 路由需要载入?vue-router 库。
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>? ? ? ? html：
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div>????????js：
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
{ path: '/welcome', component: Welcome },
{ path: '/student', component: Student },
{ path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
// 现在，应用已经启动了！
</script>四、axios
axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端
- 在浏览器中可以帮助我们完成 ajax请求的发送
- 在node.js中可以向远程接口发送请求
<script src="vue.min.js"></script>
<script src="axios.min.js"></script><div id="app">
<table border="1">
<tr>
<td>id</td>
<td>姓名</td>
</tr>
<tr v-for="item in memberList">
<td>{{item.memberId}}</td>
<td>{{item.nickname}}</td>
</td>
</tr>
</table>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
memberList: []//数组
},
created() {
this.getList()
},
methods: {
getList(id) {
//vm = this
axios.get('http://localhost:8081/admin/ucenter/member')
.then(response => {
console.log(response)
this.memberList = response.data.data.items
})
.catch(error => {
console.log(error)
})
}
}
})
</script>五、Node.js
????????简单说 Node.js 就是运行在服务端的 JavaScript。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎.
? ? ? ? 相当于我们不用浏览器也能执行javascript代码了。
? ? ? ? ?如何使用呢？
? ? ? ? 在vscode中项目上单机右键->在集成终端中打开。会出现一个控制台。
? ? ? ? 在项目内新建一个js文件：1.js 输入以下内容
console.log("hello,nodejs!")? ? ? ? 控制台内输入信息与结果如下：
PS C:\Users\WZ\Documents\vscode-workspace\guli_study> node -v
v10.14.2 # 注：一定下这个版本，要不然后面使用npm install 会报错
PS C:\Users\WZ\Documents\vscode-workspace\guli_study> node 1.js
hello,nodejs!? ? ? ? 其实nodejs可以进行服务端应用的开发，这里就不演示了。
六、NPM
????????NPM全称Node Package Manager，是Node.js包管理工具，是全球最大的模块生态系统，里面所有的模块都是开源免费的；也是Node.js的包管理工具，相当于前端的Maven 。
????????通过npm 可以很方便地下载js库，管理前端工程。
????????Node.js默认安装的npm包和工具的位置：Node.js目录\node_modules
- 在这个目录下你可以看见 npm目录，npm本身就是被NPM包管理器管理的一个工具，说明 Node.js已经集成了npm工具
#在命令提示符输入 npm -v 可查看当前npm版本
npm -v? ? ? ? 使用演示：
? ? ? ? 1.创建文件夹npm，并用集成终端打开，输入
npm init
#按照提示输入相关信息，如果是用默认值则直接回车即可。
#name: 项目名称
#version: 项目版本号
#description: 项目描述
#keywords: {Array}关键词，便于用户搜索到我们的项目
#最后会生成package.json文件，这个是包的配置文件，相当于maven的pom.xml
#我们之后也可以根据需要进行修改。? ? ? ? 或者
#如果想直接生成 package.json 文件，那么可以使用命令
npm init -y? ? ? ? 2.修改镜像源
#经过下面的配置，以后所有的 npm install 都会经过淘宝的镜像地址下载
npm config set registry https://registry.npm.taobao.org
#查看npm配置信息
npm config list? ? ? ? 3.npm install命令的使用
#使用 npm install 安装依赖包的最新版，
#模块安装的位置：项目目录\node_modules
#安装会自动在项目目录下添加 package-lock.json文件，这个文件帮助锁定安装包的版本
#同时package.json 文件中，依赖包会被添加到dependencies节点下，类似maven中的 <dependencies>
npm install jquery
#npm管理的项目在备份和传输的时候一般不携带node_modules文件夹
npm install #根据package.json中的配置下载依赖，初始化项目
#如果安装时想指定特定的版本
npm install jquery@2.1.x
#devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
#使用 -D参数将依赖添加到devDependencies节点
npm install --save-dev eslint
#或
npm install -D eslint
#全局安装
#Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
#一些命令行工具常使用全局安装的方式
npm install -g webpack
#更新包（更新到最新版本）
npm update 包名
#全局更新
npm update -g 包名
#卸载包
npm uninstall 包名
#全局卸载
npm uninstall -g 包名七、babel
????????Babel是一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行执行。
? ? ? ? 1.安装：
npm install --global babel-cli
#查看是否安装成功
babel --version? ? ? ? ?查看版本可能会报错，shell中输入下面命令就可以了
set-ExecutionPolicy RemoteSigned? ? ? ? 2.使用
? ? ? ? 2.1 使用npm初始化项目
npm init -y? ? ? ? 2.2 创建示例文件 example.js
// 转码前
// 定义数据
let input = [1, 2, 3]
// 将数组的每个元素 +1
input = input.map(item => item + 1)
console.log(input)? ? ? ? 2.3?配置 .babelrc
????????Babel的配置文件是.babelrc，存放在项目的根目录下，该文件用来设置转码规则和插件，基本格式如下
{
"presets": [],
"plugins": []
}? ? ? ? 2.4 在项目中安装解码器
npm install --save-dev babel-preset-es2015? ? ? ? 2.5 转码
# 1.转码结果写入一个文件
mkdir dist1
# --out-file 或 -o 参数指定输出文件
babel example.js --out-file dist1/compiled.js
# 或者
babel example.js -o dist1/compiled.js
# 2.整个目录转码
mkdir dist2
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir dist2
# 或者
babel src -d dist2八、模块化
传统非模块化开发有如下的缺点：
- 命名冲突
- 文件依赖
模块化规范：
- CommonJS模块化规范
- ES6模块化规范
8.1?CommonJS模块化规范
????????CommonJS使用 exports 和require 来导出、导入模块。
// 定义成员：
const sum = function(a,b){
return parseInt(a) + parseInt(b)
}
const subtract = function(a,b){
return parseInt(a) - parseInt(b)
}
const multiply = function(a,b){
return parseInt(a) * parseInt(b)
}
const divide = function(a,b){
return parseInt(a) / parseInt(b)
}
//导出
module.exports = {
sum,
subtract,
multiply,
divide
}
//引入模块，注意：当前路径必须写 ./
const m = require('./四则运算.js')
const result1 = m.sum(1, 2)
const result2 = m.subtract(1, 2)
8.2?ES6模块化规范
????????ES6使用 export 和 import 来导出、导入模块。
export function getList() {
console.log('获取数据列表')
}
export function save() {
console.log('保存数据')
}//只取需要的方法即可，多个方法用逗号分隔
import { getList, save } from "./userApi.js"
getList()
save()????????或者
export default {
getList() {
console.log('获取数据列表2')
},
save() {
console.log('保存数据2')
}
}import user from "./userApi2.js"
user.getList()
user.save()九、Webpack
????????Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
? ? ? ? ?1.安装
//全局安装
npm install -g webpack webpack-cli? ? ? ? 2.初始化项目
npm init -y? ? ? ? 3.创建src文件夹。src下创建common.js、utils.js、main.js
? ? ? ? 4.打包
? ? ? ? ????????4.1 webpack目录下创建配置文件webpack.config.js
????????????????以下配置的意思是：读取当前项目目录下src文件夹中的main.js（入口文件）内容，分析资源依赖，把相关的js文件打包，打包后的文件放入当前目录的dist文件夹下，打包后的js文件名为bundle.js
const path = require("path"); //Node.js内置模块
module.exports = {
entry: './src/main.js', //配置入口文件
output: {
path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
filename: 'bundle.js' //输出文件
}
}? ? ? ? ? ? ? ? 4.2?命令行执行编译命令
webpack #有黄色警告
webpack --mode=development #没有警告
#执行后查看bundle.js 里面包含了上面两个js文件的内容并进行了代码压缩????????????????也可以配置项目的npm运行命令，修改package.json文件
"scripts": {
//...,
"dev": "webpack --mode=development"
}//运行npm命令打包
npm run dev? ? ? ? 5.引用打包好的js文件
//webpack目录下创建index.html
<body>
<script src="dist/bundle.js"></script>
</body>? ? ? ? 6.css打包
????????Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
????????Loader 可以理解为是模块和资源的转换器。
????????首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css
npm install --save-dev style-loader css-loader ? ? ? ? 6.1?修改webpack.config.js
const path = require("path"); //Node.js内置模块
module.exports = {
//...,
output:{},
module: {
rules: [
{
test: /\.css$/, //打包规则应用到以css结尾的文件上
use: ['style-loader', 'css-loader']
}
]
}
}? ? ? ?接下来的命令和之前相同。
十、vue-element-admin/vue-admin-template?
????????vue-element-admin是基于element-ui?的一套后台管理系统集成方案。
????????vueAdmin-template是基于vue-element-admin的一套后台管理系统基础模板（最少精简版），可作为模板进行二次开发。
????????你可以在?vue-admin-template?的基础上进行二次开发，把?vue-element-admin当做工具箱，想要什么功能或者组件就去?vue-element-admin?那里复制过来。
? ? ? ?1. vue-element-admin的安装（本项目不需要！！）
# 解压压缩包
# 进入目录
cd vue-element-admin-master
# 安装依赖
npm install
# 启动。执行后，浏览器自动弹出并访问http://localhost:9527/
npm run dev? ? ? ? 2. vue-admin-template的安装
# 解压压缩包
# 进入目录
cd vue-admin-template-master
# 安装依赖
npm install
# 启动。执行后，浏览器自动弹出并访问http://localhost:9528/
npm run dev? ? ? ? 前端架构说明
? ? ? ? 模板初始化设置：
? ? ? ? 1、创建项目
????????????????将vue-admin-template-master重命名为guli-admin
? ? ? ??2、修改项目信息
????????????????package.json
{
"name": "guli-admin",
......
"description": "谷粒学院后台管理系统",
"author": "wz<110@qq.com>",
......
}? ? ? ? 3.修改端口号
????????????????config/index.js中修改
port: 9528? ? ? ? 4.项目的目录结构
.
├── 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 //认证入口? ? ? ? 5.运行项目
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>? ? ? ? 2.国际化设置
//打开 src/main.js（项目的js入口），第7行，修改语言为 zh-CN，使用中文语言环境，例如：日期时间组件
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n? ? ? ? 3.icon
????????复制?favicon.ico 到根目录
? ? ? ? 4.导航栏文字
//13行
<el-dropdown-item>
首页
</el-dropdown-item>????????src/views/layout/components/Navbar.vue
//17行
<span style="display:block;" @click="logout">退出</span>? ? ? ? 5.面包屑文字
????????src/components（可以在很多项目中复用的通用组件）
????????src/components/Breadcrumb/index.vue
//38行
meta: { title: '首页' }