一、簡介
1、項目介紹
（1）基本介紹
使用 vue 以及 element-ui 搭建一個 后台管理系統的模板。
當然，這類模板網上有很多，可以直接下載使用。
寫這個項目的目的，純屬練手（寫的比較糙）。
【layuiAdmin 后台管理模板：（付費）】
https://www.layui.com/admin/
【renren-fast-vue：（開源）】
https://github.com/renrenio/renren-fast-vue
（2）軟件使用
開發工具（隨意選擇，能提高開發效率即可）：
HBuilderX 、Visual Studio Code 等
環境：
node 運行環境
npm 包管理工具
webpack 打包工具
vue-cli 項目創建腳手架工具
依賴：
vuex 狀態管理（處理組件間數據交互）
axios 請求管理（發送 ajax 請求並處理）
router 頁面跳轉（各組件間跳轉規則）
js-cookie 處理 cookie
mockjs 模擬后端數據處理
element-ui 頁面顯示
vue-i18n 國際化處理
（3）基本目錄介紹（根據基本文件結構稍作了修改）
使用 vue-cli 4.0 圖像化界面工具創建的項目。
|--- dist 項目打包后的文件夾（npm run build） | |--- node_modules 存放第三方依賴（npm install 執行產生） | |--- public 存放靜態文件夾 | |--- favicon.ico 是網站圖標 | |--- index.html 頁面入口文件 | |--- src 存放源碼文件夾 | |--- assets 存放 css、圖片等文件 | |--- http 用於存放、封裝 axios 請求 | |--- components 存放全局共用組件 | |--- views 存放視圖組件 | |--- router 存放路由配置 | |--- store 存放 vuex 配置 | |--- mock 項目 mock 模擬數據 | |--- utils 存放全局公用方法 | |--- i18n 國際化 language | |--- App.vue 入口組件 | |--- main.js 入口 js， 加載組件、初始化等 | |--- .gitignore 指定文件無需提交到git上 | |--- .env.development 開發環境配置文件 | |--- .env.production 生產環境配置文件 | |--- balel.config.js 使用一些預設 | |--- package.json 項目描述及依賴 | |--- package-lock.json 版本管理使用的文件 | |--- vue.config.js 項目配置文件 | |--- README.md 項目介紹
二、基本環境搭建 -- 初始化項目
1、需要安裝的軟件
（1）前提
需要安裝 node.js 、npm（cnpm）、vue-cli。
已經安裝過的可以跳過。
【使用 vue-cli 創建項目參考地址：】
https://www.cnblogs.com/l-y-h/p/11241503.html
【官方文檔：】
https://cli.vuejs.org/zh/guide/
（2）安裝運行環境
下載、安裝 node。（已經安裝過的可以忽略）
簡單理解為： JavaScript 運行環境。
【下載地址：】
https://nodejs.org/zh-cn/
【下載並安裝成功后，查看 node 版本：】
node -v
（3）安裝包管理工具
全局安裝 npm 或者 cnpm 包管理工具。（已經安裝過的可以忽略）
簡單理解為： 自動管理項目依賴（管理第三方包）的 工具。
【查看版本號：（node 安裝時一般都集成了 npm）】
npm -v
【升級 npm （可選操作）：】
npm install -g npm
注：
-g 表示全局安裝
【裝 cnpm （可選，替換淘寶鏡像）：】
npm install -g cnpm --registry=https://registry.npm.taobao.org
（4）安裝打包工具
下載、安裝 webpack 打包工具（已經安裝過的可以忽略）。
簡單理解為：打包前端代碼，整合成一個特定格式的文件。
【webpack 4.X 開始，需要安裝 webpack-cli 依賴】
npm install webpack webpack-cli -g
或者
cnpm install webpack webpack-cli -g
【查看版本號】
webpack -v
（5）安裝 vue-cli 腳手架
下載、安裝 vue-cli 腳手架工具。（已經安裝過的可以忽略）
簡單理解為：vue 項目模板的初始化工具。
【下載最新版 vue-cli:】
npm install -g @vue/cli
或者
cnpm install -g @vue/cli
【查看版本號】
vue -V
【方式一：（命令行創建，以 webpack 為模板）】
vue init webpack vue-demo
【方式二：（圖形化界面創建）】
vue ui
2、初始化項目（使用 vue-cli 4.0 創建）
（1）創建項目
使用腳手架 vue-cli 4.0 圖像界面創建 一個 vue 項目。
Step1：
命令行輸入 vue ui，會自動彈出一個頁面，用於創建項目。
Step2：
點擊創建項目。
Step3：
填寫項目信息。
Step4：
配置項目依賴。
Step5：
等待一會，項目會自動構建。
出現如下頁面，即創建成功。
初始項目結構如下：
三、基本環境搭建 -- 環境配置
1、自定義配置文件（此處為 vue-cli 4.0 創建的項目）
（1）為什么使用自定義配置？
有時候項目默認配置不能滿足需求，可以手動去配置。
【vue-cli 配置文件官方地址：】
https://cli.vuejs.org/zh/config
【參考博文：】
https://www.jianshu.com/p/b358a91bdf2d
（2）如何使用？
想要使用自定義配置，首先需要在 項目的根目錄下 創建一個 vue.config.js。
使用 json 格式進行配置。
配置文件各屬性可以自行查閱官方文檔（此處不過多展開，簡單舉兩個例子）。
module.exports = {
}
其會被 @vue/cli-service 自動加載。
（3）關閉 ESLint。
ESLint 雖然可以統一代碼規范，但是用起來真的很蛋疼，比如一些空格、換行的問題都會提示出錯。
Step1：
正常情況，不會報錯，頁面正常顯示。
Step2：
稍作修改，如下。
添加了一些空格，ESLint 會報錯。
Step3：
在配置文件中，將 lintOnSave 置為 false，即可關閉 ESLint 校驗。
修改配置文件，需要重啟服務。
module.exports = {
lintOnSave: false
}
（4）修改端口號
項目默認 使用 8080 端口訪問項目，當 8080 被占用時，會自動選擇新的端口打開。
可以自定義端口訪問，如下定義端口為 9000。
module.exports = {
lintOnSave: false,
devServer: {
port: 9000
}
}
2、生產環境、開發環境
（1）簡介
開發的過程中，一般分為 開發、測試、生產等環境。
不同的環境下，會有不同的變量、屬性（比如 端口、ip 地址不同）。
所以需要對不同的環境設置不同的配置文件。
（2）開發環境、生產環境
【參考文檔：】
https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F
在當前項目的根目錄下，創建 兩個文件（.env.development、.env.production）。
其中：
.env.development 是開發環境會加載的文件，即 npm run serve 時，會加載 .env.development。
.env.production 是生產環境會加載的文件（打包后的文件），即 npm run build 時，會加載 .env.production。
（3）簡單使用
Step1:
給 .env.development 添加一個變量。
命名規則： VUE_APP_ + 變量名 。
VUE_APP_URL=http://localhost:8000
給 .env.production 添加一個變量。
VUE_APP_URL=http://localhost:9000
Step2：
通過 process.env.VUE_APP_URL 獲取該變量。
獲取規則 process.env.VUE_APP_ + 變量名。
<template>
<div class="about">
{{url}}
</div>
</template>
<script>
export default {
data() {
return {
url:process.env.VUE_APP_URL
}
}
}
</script>
Step3：
執行 npm run serve，直接運行 項目。
Step4：
執行 npm run build，用於打包項目，生成 dist 文件。
Step5：
運行 dist。
直接訪問 dist 的 index.html 頁面 是不會成功的，需要使用服務器啟動才能訪問。
【全局安裝 serve】
npm install -g serve
【執行 dist】
進入 dist 目錄，輸出 serve
或者 直接 serve -s dist路徑，比如 serve -s E:\vue\front\dist
http://localhost:5000
