最近，新產(chǎn)品很多種子用戶反饋，希望能夠出PC版本或者網(wǎng)頁版，在與產(chǎn)品同學(xué)溝通后，決定先出網(wǎng)頁版，后期有時間以網(wǎng)頁版為雛形，包裝成PC版。
話入正題，雖然之前沒有前端經(jīng)驗，但是之前有較長時間的跨平臺和小程序經(jīng)驗，對于大概的流程還是相對比較清晰。
準備知識
對于Html、CSS、JavaScript，花幾個小時看一遍，就能掌握基礎(chǔ)的東西。Vue.js特點就是入門簡單，api 簡潔一致，文檔清晰，有不清楚的可以隨時查閱文檔。Element是餓了么開源的前端UI庫，業(yè)界口碑不錯。
而對于node 、npm、webpack、vue-cli等概念還是要先系統(tǒng)了解。
前端IDE工具：Atom
首先就是選擇編輯器，前幾年都是使用的Sublime Text，雖然沒有什么大毛病，但是嘗試Atom后，UI顯得更簡潔漂亮，兩欄分層合理，另外能更好的對接git。這次準備系統(tǒng)學(xué)習(xí)前端，選擇Atom。
當(dāng)然，VSCode作為萬能編輯器，也是一個很好的選擇。
然后就是插件。
插件就是個人的愛好習(xí)慣的反映，沒有好壞之分，只有合適不合適，在此不過多闡述，自行度娘搜索，選擇適合自己的。
OK，還是來動手玩玩吧。
-
安裝node.js
從node官網(wǎng)下載并安裝node，安裝步驟很簡單，只要一路“next”就可以了。
安裝完成后，打開命令行工具輸入命令node -v，如下圖，如果出現(xiàn)對應(yīng)版本號，就說明安裝成功了。
-
npm包管理器
npm是集成在node中的，所以，直接輸入npm -v就會如下圖所示，顯示出npm的版本信息。
由于npm的有些資源被墻，為了更快更穩(wěn)定，可以切換到淘寶的npm鏡像——cnpm。
-
安裝node.js
在用 vue.js 構(gòu)建大型應(yīng)用時推薦使用 npm 安裝，npm 能很好地和諸如 webpack 或 browserify 模塊打包器配合使用。vue.js 也提供配套工具來開發(fā)單文件組件。
命令行：npm install vue,因為我已經(jīng)安裝，就不重復(fù)執(zhí)行。
-
安裝vue-cli腳手架構(gòu)建工具
vue-cli 提供一個官方命令行工具，可用于快速搭建大型單頁應(yīng)用。該工具提供開箱即用的構(gòu)建工具配置，帶來現(xiàn)代化的前端開發(fā)流程。只需幾分鐘即可創(chuàng)建并啟動一個帶熱重載、保存時靜態(tài)檢查以及可用于生產(chǎn)環(huán)境的構(gòu)建配置的項目：
npm install --global vue-cli
前端框架: Vue
前端框架簡介
坦率的講，我沒有接觸過系統(tǒng)的前端學(xué)習(xí)，對于前端框架，對于JQuery、angular、Node都只是停留在認知階段，而在開發(fā)跨平臺試用RN的過程中使用過React，在使用weex時，weex是基于vue2.0，不用考慮，選擇自己擅長的，只在此兩者中選，React 是一個 Facebook 和 Instagram 用來創(chuàng)建用戶界面的 JavaScript 庫。很多人認為 React 是 MVC 中的 V（視圖）。Vue.js 是用于構(gòu)建交互式的 Web 界面的庫。它提供了 MVVM 數(shù)據(jù)綁定和一個可組合的組件系統(tǒng)，具有簡單、靈活的 API。從技術(shù)上講， Vue.js 集中在 MVVM 模式上的視圖模型層，并通過雙向數(shù)據(jù)綁定連接視圖和模型。實際的 DOM 操作和輸出格式被抽象出來成指令和過濾器。
綜合考慮，作為客戶端架構(gòu)師的我，更喜歡MVVM，況且Vue.js 更容易上手，目前市場上比較流行的前后端分離的開發(fā)模式，大多前端都是vueJS做的，有啥問題還可以讓后端大神帶飛。
前端UI庫: Element
2018年九個很受歡迎的vue前端UI框架
選擇三方庫，我遵循幾個原則：開源GitHub上Star多； issue解決及時；穩(wěn)定維護；大廠等。
先嘗試Element。
------------------------------分割線------------------------------
前面的篇幅都是基礎(chǔ)知識講解和環(huán)境搭建。
看到這，我默認為大家的開發(fā)環(huán)境都是Vue+Atom。
創(chuàng)建工程
1、新建項目名
vue init webpack my-project
或者
vue init webpack-simple my-project
例如：
2、運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱，描述，作者等信息，如果不想填直接回車默認就好。
當(dāng)然，在配置文件中也是可以修改。
按照提示，你可以
cd first-vue
npm install
npm run dev
3、安裝項目所需要的依賴
4、運行項目
會自動打開瀏覽器，啟動應(yīng)用。
如果看到這個界面，說明配置成功。
至此，你的第一個前端工程已經(jīng)完成，后面會講解工程的項目結(jié)構(gòu)和Vue語法。
