1.vue 項目實戰

技術棧

vue2 + vuex + vue-router + mint-ui + zepto + es6 + less

環境搭建

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

你們是否是還經歷過這樣的項目結構呢？

一直以來我以爲這樣子就能夠了，想要什麼就去插件網上下載就行了，好比 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

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