前端開發一份學習線路圖
一．常用開發工具介紹 推薦使用 VSCode
1.WebStorm
2.HbuilderX
3.VSCode
4.Sublime Text
二．HTML+CSS 部分
1. HTML 是一種標記語言，能夠實現 Web 頁面並在瀏覽器中顯示。
2. CSS 是網頁外觀的重要一點，CSS 可以幫助把網頁外觀做得更加美觀。
三．HTML5+CSS3
HTML+CSS進階版
四．JavaScript
五．Vue
1.官方文件：http://vuejs.org/v2/guide/syntax.html
2.中文文件:
六．Vue 腳手架
1.Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統。
2.命令列操作步驟
•npm install -g @vue/cli 安裝3.x版本的vue腳手架
•vue -V 測試是否安裝成功
•vue create 專案名 （注意不要用中文和特殊字元）
•cd 專案名
•npm run serve
七．Node
1.nodejs安裝和環境配置
2.官方下載地址: https://nodejs.org/en/ 下載LTS版本（長期穩定版本）
3.測試是否安裝成功
node -v 檢視node的版本
npm -v 檢視npm的版本(新版的node安裝自帶安裝npm)
八．Git
1.最詳細圖文安裝教程 https://www.cnblogs.com/52xiaobu/p/14083995.html
2.git clone 遠端地址
3.切換到開發分支進行開發
4.git pull 拉取遠端程式碼
5.git push 提交原生代碼
九．專案開發流程
1.git clone 遠端程式碼
當我們克隆一個新的專案到本地時，需要執行 npm install 命令來安裝專案所需的依賴檔案。當執行該命令時，就會根據 package.json 檔案中的配置資訊來自動下載所需的模組，也就是配置專案所需的執行和開發環境。
2.啟動專案 npm run serve
十. 專案結構
- node_modules：npm 載入的專案所需要的各種依賴模組。
- src：這裡是我們開發的主要目錄（原始碼），基本上要做的事情都在這個目錄裡面，裡面包含了幾個目錄及檔案：
1、assets:放置一些圖片(會根據圖片大小分類進行base64命名還是其他方式命名)，如logo等；
2、components:目錄裡放的是一個個的元件檔案；
3、App.vue：專案入口元件（跟元件），我們也可以將元件寫這裡，而不使用components目錄。主要作用就是將我們自己定義的元件通過它與頁面建立聯絡進行渲染，這裡面的必不可少。
4、main.js ：專案的核心檔案（整個專案的入口js）引入依賴包、預設頁面樣式等（專案執行後會在index.html中形成一個app.js檔案）。
5、router/index.js：配置路由的地方 - static：靜態資源目錄(會原分不動的對檔案進行處理)，如圖片、字型等。
- config：配置路徑、埠號等一些資訊，我們剛開始學習的時候選擇預設配置。
- package.json：專案配置資訊檔案/所依賴的開發包的版本資訊及所依賴的外掛資訊。（大概版本）
package-lock.json：專案配置資訊檔案/所依賴的開發包的版本資訊及所依賴的外掛資訊。（具體版本）
README.md：專案的說明檔案。
webpack.config.js：webpack的配置檔案，例：把.vue的檔案打包成瀏覽器能讀懂的檔案。
.babelrc:是檢測es6語法的配置檔案，例：適配哪些瀏覽器的限制
.gitignore:上傳到伺服器忽略哪些檔案的配置（比如模擬本地資料mock不讓他在get提交/打包上線的時候忽略不使用可在這裡配置）
.postcssrc.js:字首的配置 （css轉化的配置）
.editorconfig:對程式碼進行規範，例：root是否進行檢測，程式碼尾部是否換行，縮行前面幾個空格...（建議定義這個規範）
.eslintrc.js:配置eslint語法規則（在這裡面的rules屬性中配置讓哪個語法規則失效）
.eslintignore:忽略eslint對專案某些檔案的語法規則的檢查
十一. 頁面元件庫 Ant Design of Vue ：https://1x.antdv.com/docs/vue/introduce-cn/
簡單記錄工作中專案用到的東西，小白入門也不是一天兩天的事，具體內容還是要花時間詳細去學習！