1. 前端路由」有哪些優點和缺點
前端路由的優點和缺點：
優點
用戶體驗好，不需要每次都從伺服器全部獲取，快速展現給用戶
缺點
使用瀏覽器的前進，後退鍵的時候會重新發送請求，沒有合理地利用緩存
單頁面無法記住之前滾動的位置，無法在前進，後退的時候記住滾動的位置
2. 前端開發需要配置什麼環境
web前端開發環境的搭配：
A、Sublime3安裝配置：
Sublime跨平台的前端開發神器,是一個共享軟體,免費使用；下載最新Sublime3安裝包；
-官網地址:http://www.sublimetext.com/
-安裝包管理器
打開Sublime3控制台,ctrl+~
輸入安裝包管理器命令代碼，注意需要聯網才能安裝,因為是在線下載包
包管理器的官網地址:https://packagecontrol.io
-安裝第三方插件(包)
打開命令面板:ctrl+shift+p；
輸入install,然後回車，然後可以搜索想要的插件,回車安裝；Atom工具使用
B、Atom工具使用：
由github發布的前端開發工具，集成了chrome的調試工具，是一款非常強大和開發的開發工具平台。在file裡面的setting裡面進行設置,包括字體的大小,快捷鍵,背景顏色主題等；
官網地址：https://atom.io/
C、WebStorm10的安裝與使用：
WebStrom是最專業的前端IDE開發工具，是一個非常重量級的開發工具,是專業為我們前端設計的IDE,用他來開發是效率非常高；
D、總結三款開發工具的優劣：
Sublime3:需要安裝第三方的包，一般。Atom：集成度非常好，也很輕，需要自己安裝第三方的包。Webstrom：大項目，建議使用webstrom，非常強大，但是也很重。
3. 怎樣提高前端工程師開發效率，都在這里
前端工程師其實是一個工作很雜的職位，除了要負責切圖、寫html/css/js外，還要解決一系列的瀏覽器兼容性、網頁性能優化等問題，所以提高前端工程師的開發效率是勢在必行的，也是前端工程化的體現。
對於開發效率，我個人理解是
開發效率 = 新增代碼的效率 + 修改代碼的效率 + 維護代碼的效率
那麼如何提高前端開發效率便可以按照前端工程化的理念來進行劃分。下面我就介紹下7個提高前端開發效率的方法。
1.切圖
切圖是一個前端最基礎的技能，一般我們使用Photoshop或者FireWorks基本都能搞定設計師交付給我們的設計圖，但是要提高切圖效率的話就得使用一些訣竅了，比如利用PS里的動作來實現「一鍵切圖」功能，這里除了切圖外還介紹了其他的實用方法和工具。
2.編碼
對於編寫代碼部分我們首先要找到一款合適自己的IDE工具，建議不要使用Notepad++或者Dreamweaver，這些工具已經不符合前端潮流了，無法讓自己優雅地敲代碼。這里我主要推薦Sublime Text、Atom或者Webstrom，因為它們除了人性化的界面和支持大多數語法的高亮外，還可以安裝各種各樣的插件來拓展你的IDE工具，下面我主要介紹幾款Sublime Text提高開發效率的插件：
其中Element是用於快速編寫html/CSS的，比如輸入 ul>li 後按下tab鍵便可以生成一個ul標簽裡麵包含一個li標簽
JSFormat用於格式化JS；CSScomb用於對樣式屬性進行一鍵排序；HTML-CSS-JS Prettify可以一鍵規范我們的HTML/CSS/JS，甚至JSON格式；SublimeTmpl可以快速新建HTML/CSS/JS文件; ColorPicker用於調用本地調色板功能。這些工具都非常實用，一定程度上可以提高我們的編碼效率。
3.自動化
說到提高開發效率，這里不得不提一些前端的自動化工具，畢竟前端自動化是目前及未來的趨勢，能夠很大程度上縮減前端不必要的工作量，使我們能夠專注前端本身。
這里我們可以使用NPM來管理我們的項目包文件；利用webpack來打包壓縮我們的代碼；利用Node.js來實現構建本地伺服器；利用Karma、Jasmine來測試我們的前端代碼。
用好前端自動化工具可以幫助我們處理很多瑣碎的事情，比如一鍵壓縮代碼、圖片，一鍵合並JS，檢測文件更新等。
4.模塊化
隨著web2.0時代的到來，Ajax技術得到廣泛應用，前端代碼日益膨脹，而前端模塊化能夠方便我們對項目代碼的維護，進行按需載入，從長遠角度來看對我們提高項目的開發效率同樣大有益處。
在ES6出來之前應該說前端代碼本身不具備實現模塊的功能，我們必須要使用一些模塊化載入器來實現，比如RequireJS、SeaJs等。而隨著ES6的普及，目前像RequireJS、SeaJs這樣的工具已經沒有存在的必要了。所以在基於ES6的開發環境下我建議使用ES6的模塊化功能來實現我們的前端模塊化。
5.組件化
前端組件化的概念也是由來已久，我們可以通過將我們的代碼劃分成不同組件來實現功能公用，一個同樣的功能我們可能不用再次編寫相同的代碼，同時也可以提高前端代碼的可維護性和清晰度。以下是目前流行的前端框架Vue的單文件組件的概念圖：
我們可以將公用的組件抽離，將大組件拆分成小組件的形式實現前端組件化，組件與組件之間可以存在父子關系，也可以存在兄弟關系。在Vue的單文件組件中，一個組件包含了其HTML、CSS、JS的代碼片段。
6.前後端分離
前後端分離的項目對提升前端開發效率非常有幫助，因為前端不再需要後台配置路由、搭建伺服器環境、編寫模板等，這樣一來前端的生產力就會得到很大程度的解放，但是前後端分離的項目有利也有弊，如下圖所示：
最終我們需要根據項目需求衡量利弊來決定是否使用前後端分離的模式。
7.規范與模式
團隊協作離不開編碼規范和開發模式的幫助。遵循編碼規範文檔可以幫助我們在團隊開發時提高合作開發的效率。一個團隊遵循一套編碼規范可以使每個人的代碼寫出一個人的風格，這樣團隊間相互審查、測試、完善功能時會非常高效。下方是一些開源的前端編碼規範文檔：
網頁鏈接
首頁-TGuide
網頁鏈接
網頁鏈接
除了編碼規范我們在開發時經常會沿襲了一些已經存在的模式來解決問題，比如當用JS編寫彈框時我們往往會用到單例模式，用CSS編寫動畫時直接套用動畫的常用屬性等，我們不再需要從頭開始思考某一個功能的實現，這就是模式帶來的意義。
結語
當然除了以上7點，對於前端來說需要提高開發效率的地方還有很多，可謂任重而道遠。只有將前端無序、繁雜的操作組織起來，利用工具簡化、規范前端流程，才能實現項目構建、開發、維護的一體化。希望本文能夠給初識前端的同學帶來啟發並付諸實踐。
4. 前端開發自學路線是什麼
這里整理了一份web前端學習路線的思維導圖，需要掌握和學習的內容如下：
第一階段：專業核心基礎
階段目標：
1. 熟練掌握HTML5、CSS3、Less、Sass、響應書布局、移動端開發。
2. 熟練運用HTML+CSS特性完成頁面布局。
4. 熟練應用CSS3技術，動畫、彈性盒模型設計。
5. 熟練完成移動端頁面的設計。
6. 熟練運用所學知識仿製任意Web網站。
7. 能綜合運用所學知識完成網頁設計實戰。
知識點：
1、Web前端開發環境，HTML常用標簽，表單元素，Table布局，CSS樣式表，DIV+CSS布局。熟練運用HTML和CSS樣式屬性完成頁面的布局和美化，能夠仿製任意網站的前端頁面實現。
2、CSS3選擇器、偽類、過渡、變換、動畫、字體圖標、彈性盒模型、響應式布局、移動端。熟練運用CSS3來開發網頁、熟練開發移動端，整理網頁開發技巧。
3、預編譯css技術：less、sass基礎知識、以及插件的運用、BootStrap源碼分析。能夠熟練使用 less、sass完成項目開發，深入了解BootStrap。
4、使用HTML、CSS、LESS、SASS等技術完成網頁項目實戰。通過項目掌握第一階段html、css的內容、完成PC端頁面設計和移動端頁面設計。
第二階段：Web後台技術
階段目標:
1. 了解JavaScript的發展歷史、掌握Node環境搭建及npm使用。
2. 熟練掌握JavaScript的基本數據類型和變數的概念。
3. 熟練掌握JavaScript中的運算符使用。
4. 深入理解分支結構語句和循環語句。
5. 熟練使用數組來完成各種練習。
6.熟悉es6的語法、熟練掌握JavaScript面向對象編程。
7.DOM和BOM實戰練習和H5新特性和協議的學習。
知識點：
1、軟體開發流程、演算法、變數、數據類型、分之語句、循環語句、數組和函數。熟練運用JavaScript的知識完成各種練習。
2、JavaScript面向對象基礎、異常處理機制、常見對象api，js的兼容性、ES6新特性。熟練掌握JavaScript面向對象的開發以及掌握es6中的重要內容。
3、BOM操作和DOM操作。熟練使用BOM的各種對象、熟練操作DOM的對象。
4、h5相關api、canvas、ajax、數據模擬、touch事件、mockjs。熟練使用所學知識來完成網站項目開發。
第三階段：資料庫和框架實戰
階段目標：
1. 綜合運用Web前端技術進行頁面布局與美化。
2. 綜合運用Web前端開發框架進行Web系統開發。
3. 熟練掌握Mysql、Mongodb資料庫的發開。
4. 熟練掌握vue.js、webpack、elementui等前端框技術。
5. 熟練運用Node.js開發後台應用程序。
6. 對Restful，Ajax，JSON，開發過程有深入的理解,掌握git的基本技能。
知識點：
1、資料庫知識，範式，MySQL配置，命令，建庫建表，數據的增刪改查，mongodb資料庫。深入理解資料庫管理系統通用知識及MySQL資料庫的使用與管理，為Node.js後台開發打下堅實基礎。
2、模塊系統，函數，路由，全局對象，文件系統，請求處理，Web模塊，Express框架，MySQL資料庫處理，RestfulAPI，文件上傳等。熟練運用Node.js運行環境和後台開發框架完成Web系統的後台開發。
3、vue的組件、生命周期、路由、組件、前端工程化、webpack、elementui框架。Vue.js框架的基本使用有清晰的理解，能夠運用Vue.js完成基礎前端開發、熟練運用Vue.js框架的高級功能完成Web前端開發和組件開發，對MVVM模式有深刻理解。
4、需求分析，資料庫設計，後台開發，使用vue、node完成pc和移動端整站開發。於Node.js+Vue.js+Webpack+Mysql+Mongodb+Git，實現整站項目完整功能並上線發布。
第四階段：移動端和微信實戰
階段目標：
1.熟練掌握React.js框架，熟練使用React.js完成開發。
2.掌握移動端開發原理，理解原生開發和混合開發。
3.熟練使用react-native和Flutter框架完成移動端開發。
4.掌握微信小程序以及了解支付寶小程序的開發。
5.完成大型電商項目開發。
知識點：
1、React面向組件編程、表單數據、組件通信、監聽、生命周期、路由、Rex基本概念。練使用react完成項目開發、掌握Rex中的非同步解決方案Saga。
2、react-native、開發工具、視圖與渲染、api操作、Flutter環境搭建、路由、ListView組件、網路請求、打包。練掌握react-native和Flutter框架，並分別使用react-native和Flutter分別能開發移動端項目。
3、微信小程序基本介紹、開發工具、視圖與渲染、api操作、支付寶小程序的入門和api學習。掌握微信小程序開發了解支付寶小程序。
4、大型購物網站實戰，整個項目前後端分離開發；整個項目分為四部分：PC端網頁、移動端APP、小程序、後台管理。團隊協作開發，使用git進行版本控制。目期間可以擴展Three.js 、TypeScript。
對於如何學習WEB前端，或者在學習WEB前端過程中遇見問題自己無法解決，可以到這個WEB前端裙，裡面有最新的學習路線和教程，可以跟著學，有什麼不懂的地方可以隨時在裡面問，後面就是這個WEB前端裙：731255295。
5. vue.js-2.0路由怎麼用路由怎麼配置
方法/步驟
首先，先來講個小東西吧。我個人一般在開發的時候都會將ESLint關閉掉。在新建一個項目的時候，會提示你安裝否。選擇n就行了。也就是no。見下圖！如果你不心安裝了。也沒事。在項目的配置文件中找到它注釋掉即可。
首先第一步，在components文件夾里新建兩個.vue文件。將用它們來路由頁面。並且分別取名router1.router2
接下來，我們就開始配置路由了。首先說幾個准備思路吧。第一：頁面打開後是要有默認顯示頁的（默認的路由），第二，同時實現路由切換時像JStab切換效果。接下來，我們要在app.vue里寫好2個導航命名為router1和router2。分別用來將router2,router1路由進來。（在這之前請把hello.vue的內容清空，才能看到現面第二張圖的效果）
現在基本的准備工作已經做好了。現在看到min.js文件。我個人的習慣是喜歡把路由的配置寫在這里或者引入到這里。不習慣放在router文件夾下面的index.js。請看下圖片。首先將。原始的router引入的改成VueRouter。然後引入之前新建好的兩個.vue文件。記得要use一下。最後創建一個router實例。第一個path / 表示的意思是默認路由進來的組件。也就是router1.
到了這里就差最後一步了。回到app.vue。寫上路由。分別給router1,router2加上路由標簽。router-link標簽渲染時會自動增加一個A標簽帶href路轉。後面的to='',就是將要路由到哪裡去的min.js中的path路徑。to="/"表示此處將路由顯示出min.js路由配置中path為/的component。最後，router-view標簽是將路由過來的組件渲染在什麼地方。這里寫在了導航下面。效果請看第二，第三張圖片。第二張圖片就是默認進來的路由頁面。也就是router1.地址欄中的路徑就是首頁。第三張圖地址欄中路徑變了，而且內容也變了。說明路由成功。
最後給路由的導航加上像JS一樣的tab切換效果。用到VUE路由中自有的類。router-link-active.意思是在路由激活時更變的class.看圖。在style中寫好css.頁面上就可以看到默認顯示的路由組件導航就有class了。不過此時，你已經成功了一半了。因為請看下面第三張圖片。當點擊router2的時候，出現了兩個紅色字體。這下尷尬了。
上面有小問題，將會在下一篇分享「嵌套路由－子路由」中給大家解決。如果有性子比較急的請私信我。或者看我簡介聯系我。喜歡記得投票收藏哦。後續會分享更多關於vue.js組件化開發框架的應用。謝謝大家。
6. 前端環境配置的問題，前端人員需要安裝後台環境嗎團隊
做前端不用搭建後台啊，後台的搭建是做後端的人搭的，在公司里都是後端的人直接把前端的頁面拿過去就行了
7. 前端環境的安裝與配置
前端環境的安裝與配置？一、工具安裝
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
8. 什麼是"前端路由"什麼時候適合使用"前端路由""前端路由"有哪些優點和缺點
你的理解有錯誤，所謂的前端路由是為了和後端路由區分開。後端路由也叫做二級路由，三級路由！簡單舉個例子，你在光貓後面插的第一個路由器就叫做前端路由，它主管你連接在這台路由器上的其他所有路由器，也就是二級或者三級路由器，在家用領域這個概念基本不會使用！但在公司或者一些比較大的企業，前端路由器的功能決定你公司的其他電腦的功能，比如帶寬，認證，收費等！~
9. ：前端路由是什麼東西
前端路由是不涉及伺服器的，是前端利用hash或者HTML5的history API來實現的，一般用於不同內容的展示和切換。
其實前端路由要做的就是兩點：
在頁面不刷新的情況下實現url的變化
捕捉url的變化，根據url更改頁面內容