經過一段時間對Vue的學習。覺得是時間來回顧一下所學成果了。所以在此開個專題系列隨筆,回顧一下vue以及相關知識。
我在用Vue之前試過React,但是我真真受不了JSX這種語法。因為我是后端人員轉前端。作為使用過jsp和servlet的人員。當我第一次看到JSX語法的時候,讓我頓時想起了在Servlet中拼HTML代碼時的恐懼,果斷放棄了React。
當然。這是我自己的一點感受。在javaEE體系中。Servlet早於JSP,其實JSP就是另一種模式的Servlet,當時提出JSP就是為了解決在Servlet中拼接Html代碼的痛苦。但是JSP最后還是會編譯成Servlet。之后為了更徹底的解決這種痛苦,出現了freemark等一系列的框架,徹底擺脫了JSP。然而JSX的語法讓我有一種開歷史倒車的感覺。這一點上Vue的模板語法和React的Render方法對比很是明顯。
三大前端框架,Vue, React, angularJs 2+ 。Vue以其簡單易用的優點而廣受好評,並且其社區也在火速發展,與其配合的第三方框架也在不斷增長中。
其中有個vue-element-admin開源項目(https://panjiachen.github.io/vue-element-admin-site/zh/),是一個很好的基於Vue和ElementUI的后台管理系統模板,再次推薦一下。
這里咱們先不管這個大項目。先從Vue自身提供的一個模板說起。Vue提供了自己的構建工具vue-cli。可以快速的搭建一個腳手架項目。
npm install vue-cli // 安裝vue-cli
vue init webpack myProject //初始化項目
vue-cli 提供的腳手架有多個。這里咱們選用webpack這個,因為大部分應該都是用的webpack,應用比較廣泛。
此腳手架的構建結果結構如下:

下面大體介紹一下各個目錄的功能。詳細的介紹會在以后的章節中陸續介紹。
1. bulid: 此目錄下有構建項目時使用的配置文件。
2. config:此目錄下是項目的環境常亮配置,提供給build中的文件使用
3. src:項目的源碼所在目錄。
4 static: 項目的靜態資源文件,其中的 .gitkeep文件是git使用的一個占位文件。
再說一下下面的幾個文件。其實也不用說。基本都知道是干啥的。
1 .babelrc babel配置文件,詳見(https://www.babeljs.cn/docs/setup/#installation)
2 .editorconfig 這個是為了統一不同編輯器的代碼格式風格。
3 .eslinttrc.js eslint 的配置文件。詳見(https://cn.eslint.org/docs/user-guide/configuring)
4 .postcssrc.js PostCSS 的配置文件。詳見(https://www.npmjs.com/package/postcss)
5 index.html 項目首頁的模板
6 package.json node使用的文件。
7 package-lock.json 用於鎖定依賴的版本。可以參考(http://www.cnblogs.com/cangqinglang/p/8336754.html)這位兄台的解釋。
8 .gitignore git的忽略文件列表
9 Readme.md 項目自述文件
