從 0 開始，vue 項目實戰（一）

前言

從 0 開始開發一個 vue 的 SPA 項目。
若是你尚未學習過 vue，請先按照 官網 或者 社區 的教程作一遍。
像這樣，作幾個例子，否則的話看這篇文章的意義不大。

這篇文章比較適合已經跟着官網的例子作了一遍的朋友們看。

技術棧

vue2 + vuex + vue-router + mint-ui + zepto + es6 + less
另外參考了小夥伴提供 vue項目例子，你們也能夠去看一下。

環境搭建

若是你已經跟着教程作一遍了，那麼接下來能夠來作項目了

之前我只會寫點jquery ，會一點切圖，對 vue 並無怎麼了解。
雖說 jquery 已經很方便開發了，操做 dom 很是的方便，然而 vue 不用操做 dom 讓我以爲原來能夠這麼簡單。
你們是否是還經歷過這樣的項目結構呢？

一直以來我以爲這樣子就能夠了，想要什麼就去插件網上下載就行了，好比 jquery，jquery.datepicker 等等。
這徹底沒有什麼問題，在我還只會切切圖的時候我就是這樣的項目結構。
然而如今須要搭建一個複雜一點的環境，這會幫助咱們作一些 合併壓縮，熱更新，自動化等等一些麻煩事，方便咱們的開發。
咱們再也不推薦下載 vue.js 到 js 文件夾，而後 html 裏面引入使用。
然而寫這些配置是至關麻煩的一件事，這裏 vue-cli 幫助咱們很好的解決了這個問題。
它能自動幫助咱們生成一些配置和基礎項目。
它生成的項目結構是這樣子的。
(～￣▽￣)～

不得不說真是方便呢，若是對前端工程化一點基礎的沒有，是否是瞬間懵逼呢？ (｡･∀･)ﾉﾞ
是的，剛開始我也以爲這個很奇怪，爲何要弄的這麼複雜，難道之前那樣子很差嗎？<(￣ˇ￣)/
我之前的話基本上是寫個模板，而後扔給後端，讓後端去使用這個模板，如今先後端分離了，天然而然前端就須要一個項目，固然不能像以前那麼簡單啦，之前那樣的目錄只是方便後端使用而已。(○´･д･)ﾉ
壓縮編譯這些東西都得前端來解決，不能再像以前那樣子了。

那麼，跟着下面的步驟一步步搭建好環境吧。

一、下載 Git
首先須要下載一個命令行工具，話說我是QQ電腦管家裏面直接下載的，也能夠點這裏下載
若是有的話就不須要了，win10 自帶的命令行也是能夠的。

二、下載 node
而後下載一個node。

三、使用命令行
而後新建個文件夾放你的項目，進入文件夾，右鍵打開命令行工具。

四、使用淘寶鏡像資源 cnpm
輸入下面這個東西，安裝淘寶鏡像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

這個比 npm 好用。

輸入一下指令看是否安裝完成。

若是安裝失敗請嘗試清一下緩存再安裝！

npm cache clean

五、安裝 webpack vue-cli

cnpm install -g vue-cli
cnpm install -g webpack

輸入一下 -v ，測試是否安裝成功

六、生成項目
只要輸入這三個東西以後一直 n 回車就行了，至於下面那堆是什麼暫時就無論了。(⊙v⊙)
第一遍若是等待時間太長 直接 ctrl + c 跳出就行了。

到這裏項目已經生成完畢了，你能夠在目錄下面看到你生成的項目了。

七、啓動項目
而後按照提示安裝一下以來，咱們就能夠看到頁面了。

cd menu
cnpm install && cnpm run dev

恭喜恭喜，咱們已經成功的搭建了一個項目了，接下來咱們須要一款編輯器，若是你使用其餘編輯器也是能夠的。

八、下載編輯器 vscode

再裝一下 vscode 裏面的一些插件

安裝了記得開啓 主題 和 文件圖標主題。

項目結構

到這裏咱們就搭建好了須要的開發環境，接下咱們就能夠開始開發了。

package.json 保存了咱們剛纔安裝的選項和依賴。

最後

若是有什麼想跟我討論的話，請私信。