目錄
一、簡介
1、項目簡介
官網：https://github.com/PanJiaChen
vue-element-admin是含有豐富的組件，vue-admin-template是一個基礎的單頁面應用的框架，適合在vue-admin-template上二次開發，開發需要的組件就可以直接的從vue-element-admin裏面拷貝上去。適合於後臺管理的中小型項目，內部的架構非常的完善，簡單易上手。
2、下載
下載完成解壓即可
3、環境搭建
- 下載node.js
二、框架
參考：https://blog.csdn.net/weixin_40126236/article/details/99455236
三、問題
1、界面開發
推薦使用vscode ,所有的界面都是在 src\views目錄下，默認的文件命名規則是：
- 文件夾：所有的都小寫
- 文件：一個文件夾下的文件有且只能有一個文件是index.vue
- 文件：文件夾下的其他文件首字母大寫
由圖可知：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>
界面文件的內容主要由三部分組成：
- 界面部分（DOM）:<template><div>。。。</div> </template> 主要畫展示的界面
- 數據部分： <script>。。。</script> 主要是界面綁定的數據，以及數據處理的邏輯
- 樣式部分：<style>。。。</style> 主要前端界面樣式渲染
推薦組件：https://element.eleme.cn/#/zh-CN/component/table
2、路由控制
界面寫完之後並不會直接的在瀏覽器上面展示，還需要我們路由出去，該框架的路由在：src\router\ 目錄下，編輯該目錄下的index.js文件，在裏面添加自己的界面，參照已經有的改成自己的界面路徑和名字就可以了。
3、接口請求
該項目已經封裝好了請求方法，使用的是ajax，我們只需要將其改成自己後端的ip，就可以訪問自己項目的接口了。具體的需要修改：
- vue.config.js 文件：可以添加一個代理地址，也可以更改原有的
- \src\api 文件夾：在裏面添加一個文件寫自己的接口方法，可以參考其他的接口文件，同時每一個接口方法裏面加入一個參數baseURL: 自己的代理
- 調用接口就可以在文件中導入，然後直接傳參就可以使用了
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，在裏面添加一下內容，說明：
- 打包編譯的三個文件需要放到NGINX配置的路徑下，下列中，配置的路徑是：D:/vue/vue-admin/文件夾，
- 同時也需要在NGINX安裝目錄下的html裏面創建一個vue-admin的文件夾，用以緩存文件。
- 訪問的路徑是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、啓動查看
- 重啓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
