目录

一、简介

1、项目简介

2、下载

3、环境搭建

二、框架

三、问题

1、界面开发

2、路由控制

3、接口请求

4、权限管理

四、发布

---

一、简介

1、项目简介

官网：https://github.com/PanJiaChen

vue-element-admin是含有丰富的组件，vue-admin-template是一个基础的单页面应用的框架，适合在vue-admin-template上二次开发，开发需要的组件就可以直接的从vue-element-admin里面拷贝上去。适合于后台管理的中小型项目，内部的架构非常的完善，简单易上手。

2、下载

• vue-element-admin 点击下载
• 官网：点击查看介绍
• vue-admin-template  点击下载 
• 官网：点击查看介绍

下载完成解压即可

3、环境搭建

1. 下载node.js

二、框架

参考：https://blog.csdn.net/weixin_40126236/article/details/99455236

三、问题

1、界面开发

推荐使用vscode ,所有的界面都是在 src\views目录下，默认的文件命名规则是：

1. 文件夹：所有的都小写
2. 文件：一个文件夹下的文件有且只能有一个文件是index.vue
3. 文件：文件夹下的其他文件首字母大写

由图可知：login文件下的一个文件是index.vue。而pagoda下的文件也只有一个index.vue其他的文件首字母大写的驼峰式。以vue结尾的文件都是组件（或者是展示的界面）。例：

<template>
  <div class="page">
    <h1>Vue</h1>
    <h2>{{ msg }}</h2>
    <el-input v-model="date" placeholder="输入框" />
    {{ date }}
  </div>
</template>


<script>
export default {
  name: 'Page',
  data() {
    return {
      msg: 'Welcome to vue！',
      date: ''
    }
  },
  created() {
    console.log('创建一次vue')
  }
}
</script>


<style scoped>
  h1, h2 {
    font-weight: normal;
  }
  ul {
    list-style-type: none;
    padding: 0;
  }
  li {
    display: inline-block;
    margin: 0 10px;
  }
  a {
    color: #42b983;
  }
</style>

界面文件的内容主要由三部分组成：

1. 界面部分（DOM）:<template><div>。。。</div> </template>  主要画展示的界面
2. 数据部分： <script>。。。</script>       主要是界面绑定的数据，以及数据处理的逻辑
3. 样式部分：<style>。。。</style>          主要前端界面样式渲染

推荐组件：https://element.eleme.cn/#/zh-CN/component/table

2、路由控制

界面写完之后并不会直接的在浏览器上面展示，还需要我们路由出去，该框架的路由在：src\router\ 目录下，编辑该目录下的index.js文件，在里面添加自己的界面，参照已经有的改成自己的界面路径和名字就可以了。

3、接口请求

该项目已经封装好了请求方法，使用的是ajax，我们只需要将其改成自己后端的ip，就可以访问自己项目的接口了。具体的需要修改：

1. vue.config.js 文件：可以添加一个代理地址，也可以更改原有的
2. \src\api 文件夹：在里面添加一个文件写自己的接口方法，可以参考其他的接口文件，同时每一个接口方法里面加入一个参数baseURL: 自己的代理
3. 调用接口就可以在文件中导入，然后直接传参就可以使用了

4、权限管理

四、发布

1、编译

在项目所在的目录下执行，执行一下命令，执行之后会在该目录下多出一个dist的文件夹，里面有一个index.html的文件，可以直接在电脑上点击打开。如果点击打不开的话就去，项目里面编辑vue.config.js，修改publicPath: './' ，在前面加上一个点，表示当前目录下的该文件，再重新编译。

# 构建测试环境
npm run build:stage

# 构建生产环境
npm run build:prod

2、配置NGINX

NGINX的配置安装：https://www.cnblogs.com/taiyonghai/p/9402734.html

在nginx的安装目录下，修改配置nginx.conf，在里面添加一下内容，说明：

1. 打包编译的三个文件需要放到NGINX配置的路径下，下列中，配置的路径是：D:/vue/vue-admin/文件夹，
2. 同时也需要在NGINX安装目录下的html里面创建一个vue-admin的文件夹，用以缓存文件。
3. 访问的路径是http://localhost:9371/vue-admin，特别说明一定要加vue-admin,还需要重启NGINX

 server {
        listen       9371;
        server_name  localhost;
        location /vue-admin/ {
                root   D:/vue;
                autoindex on;
                autoindex_exact_size on;
                autoindex_localtime on;
        }
       location /vue/api/v1/ {
          # 接口请求的代理
	      proxy_pass http://192.168.10.102:8080;
        }

        add_header Access-Control-Allow-Origin "*";
        default_type 'text/html';
        charset utf-8;

        }

3、启动查看

1. 重启NGINX

验证配置文件是否正确: 
./nginx -t
 
查看进程号：
ps -ef|grep nginx

启动：
./nginx -c nginx/conf/nginx.conf

重启：
./nginx -s reload

其他
./nginx -s [ stop | quit | reopen | reload ]

 

2.访问界面:http://localhost:9371/vue-admin