1. 前端環境的安裝與配置
前端環境的安裝與配置？一、工具安裝
1.編輯器
2.Git(分布式的代碼管理工具)
3.Photoshop
4.Nodejs鏈接
二、 環境配置
1.配置git：
1.1 設置Git的user name和email：
$ git config --global user.name "name"
$ git config --global user.email "[email protected]"
1.2 生成SSH密鑰過程：(看需求配置)
$ ssh-keygen -t rsa -C "[email protected]"
3個回車，密碼為空。
Your identification has been saved in /home/tekkub/.ssh/id_rsa.
Your public key has been saved in /home/tekkub/.ssh/id_rsa.pub.
The key fingerprint is:
………………
最後得到了兩個文件：id_rsa和id_rsa.pub
添加密鑰到ssh：
登陸gitlab, Profile Settings -> SSH Keys -> ADD SSH KEYS ,找到本地的id_rsa.pub文件，復制出裡面的內容，添加到 key 內，此時 Title 會自動填上你的郵箱，沒有的話手動填寫, ADD KEY
1.3 拉取代碼到本地(許可權)
創建一個存放項目的文件夾，在該文件夾下，單擊右鍵，選擇git bash,打開git命令框，編寫命令：git clone [email protected]:xx/xx.git（可以在gitlab項目中找到存放地址，gitlab地址：http://gitlab.vchangyi.com ），按回車，就可以從gitlab上clone代碼到本地文件夾
1.4 手動安裝nodejs，如果是pc端安裝的話，nodejs版本不能過低。
安裝最新版的話npm安裝項目依賴會有問題，手機端gulp無法啟動，所以建議安裝nodejs V6。
1.5 測試node是否安裝成功
在git 命令窗或者node 命令窗中輸入命令 ：node -v
1.6 同理，測試npm是否安裝成功npm -v
1.7安裝gulp
在項目下打開git 命令窗，從淘寶源上自行安裝，這個時間需要等待和耐心，也會有網路原因導致安裝失敗，如果安裝失敗可以多來幾次，直到成功為止。
如果是pc端：npm install --registry=http://registry.npm.taobao.org --phantomjs_cdnurl=http://cnpmjs.org/downloads
npm 安裝時候 持久使用淘寶源 設置:
npm config set registry https://registry.npm.taobao.org
配置後可通過下面方式來驗證是否成功
npm config get registry
或
npm info express
2. vue 前端設置跨域多代理
在項目開發的時候經常會遇到後端提供的多個服務請求地址域名或埠號不一致的情況這時候就需要前端設置多個proxy跨域代理，本文以vue-element-admin為例展示步驟如下：
1: 配置環境變數 .env.development
2: 配置項目根目錄下的vue.config.js 找到devServer
PS：注意VUE_APP_BASE_API 放在數組的最後一個，如果你VUE_APP_BASE_API跟我一樣設置為'' 的話，這樣才不會被代理的虛擬path覆蓋！
3: 找到項目中管理請求地址的文件 src/api/proxy.js （proxy.js 是我隨便起的名字😄）
打開proxy.js
proxy_api 就是你之前在步驟1：中定義的虛擬path
VUE_APP_BASE_API_PROXY = '/proxy-api'
const url = (path) => (proxy_api + path) 一個路徑處理函數，參數是'/xx/xxx/fetch/list'，return (proxy_api + path)
需要額外注意的是我在配置環境變數 .env.development的時候基礎api設置的是空：
所以不需要在src/utils/request.js 中對代理的請求進行攔截
如果你為VUE_APP_BASE_API設置了虛擬path路徑，那麼就需要在src/utils/request.js為這個虛擬路徑配置攔截，比較麻煩比不建議這么做。
至此跨域多代理已經設置完了，本文中設置兩個代理一個基礎代理VUE_APP_BASE_API，一個額外代理VUE_APP_BASE_API_PROXY，默認情況下走基礎代理，當請求匹配到匹'/proxy-api' 時走額外代理～
3. 【前端小知識】vue的publicPath
publicPath配置
項目請求根路徑配置
項目在打包後，需要改變訪問根路徑
在該目錄下vue.config.js進行配置
// 項目根目錄下的vue.config.js文件
4. 如何搭建web前端框架
搭建web前端框架步驟如下：
1、確定項目使用的技術
根據項目的需求等來選擇使用的技術（這里以angular4 + typsescript + nodejs+mongodb舉例）
2、新建一個項目的工作文件夾
使用npm init初始化項目，根據問題配置，一般是直接回車使用默認配置,生成package.json文件
3、新建一個index.html頁面
4、新建配置文件system.config.js
5、新建ts的配置文件tsconfig.json
npm install typescript
6、新建webApp目錄，這裡面放的是所有html頁面和js代碼，首先得有個入口文件，與system.config.js配置文件中的入口文件名一樣，app.mole.ts，裡面引入了所有js文件，不被引入的在載入時都不會被載入
7、打包(將代碼壓縮，使程序運行速度更快）
5. 配置Windows的前端開發環境
node -v
npm -v
配置鏡像：
方法1
npm config set registry https://registry.npm.taobao.org 設置taobao源
npm config get registry 查看設置
方法2
npm install -g nrm
nrm use taobao
nrm ls 查看淘寶站點鏡像之外還有其他的
cmder設置
3.配置環境變數
最後 code ~/.bashrc 在文件最後加上
在web里運行git ？？？？ 幾次都差點沒行 環境變數也配置了呀
D:\Software\cmder\vendor\git-for-windows\mingw64\bin\git.exe
而不是D:\Software\cmder
似乎我有部分項目用的yarn而不是npm
xxxxxxxxxxxxxxxxxxxxxxx
實事求是，公司的蝸牛網速搞了我幾乎一天
6. 前端可以直接拿到wx.config需要的簽名之類的嗎
config({
debug: true, // 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。
appId: '', // 必填，公眾號的唯一標識
timestamp: , // 必填，生成簽名的時間戳
nonceStr: '', // 必填，生成簽名的隨機串
signature: '',// 必填，簽名，見附錄1
jsApiList: [] // 必填，需要使用的JS介面列表，所有JS介面列表見附錄2
});
其中主要獲取signature這個參數,官方文檔地址 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
獲取signature主要分四部
1、使用APPID和APPSecret獲取access_token；
2、使用access_token獲取jsapi_ticket ；
3、用時間戳、隨機數、jsapi_ticket和要訪問的url按照簽名演算法拼接字元串；
4、對第三步的字元串進行SHA1加密，得到簽名。
注意事項：
1、簽名用的noncestr和timestamp必須與wx.config中的nonceStr和timestamp相同。
2、簽名用的url必須是調用JS介面頁面的完整URL。
3、出於安全考慮，開發者必須在伺服器端實現簽名的邏輯。
第一步:獲取access_token(需要在伺服器上 )
/**
* 微信小程序獲取accessToken
*
* @author Mr.Wen
* @time 2017年8月28日
*/
public class GetAccessTokenUtil {
// 網頁授權介面
public final static String GetPageAccessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=SECRET";
public static Map<String, String> getAccessToken(String appid, String appsecret) {
String requestUrl = GetPageAccessTokenUrl.replace("APPID", appid).replace("SECRET", appsecret);
HttpClient client = null;
Map<String, String> result = new HashMap<String, String>();
String accessToken = null;
try {
client = new DefaultHttpClient();
HttpGet httpget = new HttpGet(requestUrl);
ResponseHandler<String> responseHandler = new BasicResponseHandler();
String response = client.execute(httpget, responseHandler);
JSONObject OpenidJSONO = JSONObject.fromObject(response);
accessToken = String.valueOf(OpenidJSONO.get("access_token"));
result.put("accessToken", accessToken);
} catch (Exception e) {
e.printStackTrace();
} finally {
client.getConnectionManager().shutdown();
}
return result;
}
}
第二步:獲取jsapi_ticket
/**
* @author Mr.Wen
* @description 獲取ticket
* @date 2018/3/29
*/
public class JsapiTicketUtil {
// 網頁授權介面
public final static String GetPageAccessTokenUrl = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
public static Map<String, String> JsapiTicket(String accessToken) {
String requestUrl = GetPageAccessTokenUrl.replace("ACCESS_TOKEN", accessToken);
HttpClient client = null;
Map<String, String> result = new HashMap<String, String>();
try {
client = new DefaultHttpClient();
HttpGet httpget = new HttpGet(requestUrl);
ResponseHandler<String> responseHandler = new BasicResponseHandler();
String response = client.execute(httpget, responseHandler);
JSONObject OpenidJSONO = JSONObject.fromObject(response);
String errcode = String.valueOf(OpenidJSONO.get("errcode"));
String errmsg = String.valueOf(OpenidJSONO.get("errmsg"));
String ticket = String.valueOf(OpenidJSONO.get("ticket"));
String expires_in = String.valueOf(OpenidJSONO.get("expires_in"));
result.put("errcode", errcode);
result.put("errmsg", errmsg);
result.put("ticket", ticket);
result.put("expires_in", expires_in);
} catch (Exception e) {
e.printStackTrace();
} finally {
client.getConnectionManager().shutdown();
}
return result;
}
}
第三部:用時間戳、隨機數、jsapi_ticket和要訪問的url按照簽名演算法拼接字元串
String noncestr = WXUtil.generate();//隨機字元串
String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//時間戳
//4獲取url
//5、將參數排序並拼接字元串
String str = "jsapi_ticket="+ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;
第四部:對第三步的字元串進行SHA1加密，得到簽名,並返回結果
String str = "jsapi_ticket="+ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;
//6、將字元串進行sha1加密
String signature = SHA1.SHA1(str);
Map<String,String> map=new HashMap();
map.put("timestamp",timestamp);
map.put("accessToken",accessToken);
map.put("ticket",ticket);
map.put("noncestr",noncestr);
map.put("signature",signature);
7. 前端如何配置不同鏡像源
1、直接修改鏡像源
npm config set registry https://registry.npm.taobao.org
npm config get registry
2、安裝cnpm (不推薦使用)
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、nrm (可選 如果已經做了1 就不需要設置了)
npm i nrm -g
nrm -V 驗證版本
nrm ls | list 查看可切換鏡像源
nrm use cnpm | npm | taobao taobao 是最快的 建議使用
yarn
npm i yarn -g
yarn -v
4、yarn config set registry https://registry.npm.taobao.org
yarn config get registry
npm 常用命令
npm install 包名 -g | --save-dev(-D) --save(-S)
npm uninstall 包名 -g | --save-dev(-D) --save(-S)
yarn 常用命令
yarn add 包名 -g | --save-dev(-D) --save(-S)
yarn remove 包名 -g | --save-dev(-D) --save(-S)
8. 通俗易懂講解vue.config.js的配置參數
貼上 官網
vue-cli3 創建的時候並不會自動創建vue.config.js，因為這個是個可選項，所以一般都是需要修改webpack的時候才會自己創建一個vue.config.js
再然後因為vue-cli3內部高度集成了webpack，一般來說使用者不需要再去知道weboack做了什麼，所以沒有暴露webpack的配置文件，我們可以手動去創建vue.config.js 去修改默認的webpack。注意，只能叫vue.config.js。
publicPath （從 Vue CLI 3.3 起已棄用baseUrl，請使用publicPath）
參考： https://my.oschina.net/u/4446873/blog/4882847
默認情況下，Vue CLI 會假設你的應用是被部署在一個域名的根路徑上，例如 https://www.xxx.com/ 。如果應用被部署在一個子路徑上，你就需要用這個選項指定這個子路徑。例如，如果你的應用被部署在 https://www.xxx.com/my-app/ ，則設置 publicPath 為 /my-app/。
這個值在開發環境下同樣生效。如果你想把 開發伺服器架設在根路徑 ，你可以使用一個條件式的值：
通常開發環境，本地運行都會直接部署在根路徑上，publicPath設置為'/'，訪問地址是你的IP地址。如下是設置成'/app'的效果：
從上面可以得知，靜態資源文件都是在app下的，所以在dist下新增添一個app目錄，把dist下文件放到app下，相當於一個文件的路徑，可以發現項目會正常啟動。一般nginx都會配置一個靜態資源目錄，打包後的文件都會放到這個靜態資源目錄裡面，nginx去做映射，所以publicPath這個屬性基本不用改。'/'就行。
結論： publicPath配置成'/aaa/bbb/ccc'， 則需在相應的伺服器路徑中新建aaa>bbb>ccc的文件夾，然後將打包後的文件放進去，就ok啦。
項目中，我會在.env.proction文件中設置一個變數VUE_APP_BASE_URL ，項目打包後告訴相關人員 nginx 路由前綴是什麼即可
outputDir
assetsDir
indexPath
filenameHashing
直觀效果：當運行npm run build時，
打包後的文件後面都會帶一個8位的hash值，那啥是個hash值？
在打包出來的文件名上加上文件內容的hash是目前最常見的有效使用瀏覽器長緩存的方法，js文件如果有內容更新，hash就會更新，瀏覽器請求路徑變化所以更新緩存，如果js內容不變，hash不變，直接用緩存。（這段話是從別的文章裡面參考的）。
將filenameHashing這個值設置為false試試，就不會帶那個後綴hash值。
pages
lintOnSave
runtimeCompiler
transpileDependencies
proctionSourceMap
crossorigin （不理解）
integrity
configureWebpack
chainWebpack
Css相關配置
devServer
如果你的前端應用和後端 API 伺服器沒有運行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 伺服器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。
補充知識
所謂的跨域就是不同源，不滿足協議、域名、埠都相同的約定
http://www.test.com/dir/login.html 同源
https://www.test.com/index.html 不同源 協議不同(https)
http://www.test.com:90/index.html 不同源 埠不同(90)
http://www.demo.com/index.html 不同源 域名不同(demo)
當協議、域名、埠中任意一個不相同時，就是不同源。若不同源之間相互請求資源，就算作跨域
補充知識
反向代理（Reverse Proxy）方式是指以代理伺服器來接受網路上的連接請求，然後將請求轉發給內部網路上的伺服器，並將伺服器上得到的結果返回給請求連接的客戶端，此時代理伺服器對外就表現為一個反向代理伺服器。客戶端無需做任何配置。
修改config/index.js /vue.config.js文件（改完之後千萬記得要重新 npm run dev）
host 將他的值修改為 0.0.0.0，代表可以訪問本機所有的IP地址，讓vue項目可通過localhost和IP同時訪問。
port 設置埠號
open 是否在第一次編譯時是自動打開瀏覽器
hot 開啟為true，啟動熱重載，自動刷新頁面
https
inline
overlay
targe 代理的伺服器，也就是api要訪問的伺服器。
changeOrigin 允許跨域， 為false時，請求頭中host仍然是瀏覽器發送過來的host;如果設置成true：發送請求頭中host會設置成target的值
ws 是否代理websocket
pathRewrite 重寫 url 的 path 部分
此文記錄下來，方便自己遺忘的時候能夠快速查閱，如有錯誤請指出。
參考鏈接：
https://www.jianshu.com/p/b358a91bdf2d
https://www.jb51.net/article/174200.htm
https://blog.csdn.net/liu_yunzhao/article/details/90520028
這篇文章講的也很詳細 https://blog.csdn.net/guozhangqiang/article/details/87197870
9. vue2/vue3環境搭建
檢查是否安裝成功
Vue build ==> 打包方式，回車即可；
Install vue-router ==> 是否要安裝 vue-router，項目中肯定要使用到 所以Y 回車；
Use ESLint to lint your code ==> 是否需要 js 語法檢測 目前我們不需要 所以 n 回車；
Set up unit tests ==> 是否安裝 單元測試工具 目前我們不需要 所以 n 回車；
Setup e2e tests with Nightwatch ==> 是否需要 端到端測試工具 目前我們不需要 所以 n 回車；
1、build：構建腳本目錄
1）build.js ==> 生產環境構建腳本；
2）check-versions.js ==> 檢查npm，node.js版本；
3）utils.js ==> 構建相關工具方法；
4）vue-loader.conf.js ==> 配置了css載入器以及編譯css之後自動添加前綴；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack開發環境配置；
7）webpack.prod.conf.js ==> webpack生產環境配置；
2、config：項目配置
1）dev.env.js ==> 開發環境變數；
2）index.js ==> 項目配置文件；
3）prod.env.js ==> 生產環境變數；
3、node_moles：npm 載入的項目依賴模塊
4、src：這里是我們要開發的目錄，基本上要做的事情都在這個目錄里。裡麵包含了幾個目錄及文件：
1）assets：資源目錄，放置一些圖片或者公共js、公共css。這里的資源會被webpack構建；
2）components：組件目錄，我們寫的組件就放在這個目錄裡面；
3）router：前端路由，我們需要配置的路由路徑寫在index.js裡面；
4）App.vue：根組件；
5）main.js：入口js文件；
5、static：靜態資源目錄，如圖片、字體等。不會被webpack構建
6、index.html：首頁入口文件，可以添加一些 meta 信息等
7、package.json：npm包配置文件，定義了項目的npm腳本，依賴包等信息
8、README.md：項目的說明文檔，markdown 格式
9、.xxxx文件：這些是一些配置文件，包括語法配置，git配置等
1.解決vue不能自動打開瀏覽器的問題：當我們輸入npm run dev，運行項目，命令行提示我們運行成功，但是瀏覽器也沒有自動打開，只能自己手動輸入。
改完之後重啟一下即可。
2.為了避免埠沖突，也可以修改port，打開目錄同上
更改成功：
1. 如果你已經全局安裝了舊版本的 vue-cli(1 或2)，你需要先通過
npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它(卸載腳手架)
2.全局安裝 npm install -g @vue/cli 或 yarn global add @vue/cli
3.全局安裝了vue-cli3 但是還想用vue-cli2 ,添加一個橋接工具 命令：npm install -g @vue/cli-init
4.可以進行創建項目了
vue-cli2: 命令：vue init webpack my_project
vue-cli3 命令：vue create my-project
3.版本不同 安裝方式也不同
vue-cli2: 命令 npm install -g vue-cli
vue-cli3: 命令 npm install -g @vue/cli
3.版本不同的創建項目方式不同
vue-cli2: 命令：vue init webpack my_project
vue-cli3 命令：vue create my-project
4.vue-cli2和vue-cli3 安裝完後的 項目目錄不一樣
5.安裝指定版本的vue
npm install -g @vue/ [email protected]
vue-cli3.0項目目錄結構
vue-cli2.0項目目錄結構
vue-cli4.5.15 的vue2項目目錄
10. 求解答關於Vue.config.js文件的詳細配置
這里是創建代理伺服器，訪問的時候會通過代理伺服器轉發，所以就不會出現跨域問題。
這里的配置是以"/api"開頭的地址，都通過代理訪問，其他的地址則不通過代理，後面的是代理地址。