使用vue腳手架vue-cli搭建項目

在使用vue-cli快速搭建一個項目前，首先咱們要清楚爲何要這樣作，緣由不少，如：

1. 前端的範疇不斷擴大
2. 先後端分離
3. 模塊化開發
4. 便於管理...

我我的再加一點，就是便於".vue"組件的開發，緣由：

在不使用Vue工程化開發的時候，咱們的組件常常性的就是"全局 / 局部"組件的開發，不少的js和css並非一塊兒加入的，可是工程化的開發就解決了這個問題（就是".vue"單文件組件）。以這個後綴的文件爲例，它是包含了三個部分，分別是（template、js、css），這樣的話，就能夠經過工程化裏面的轉碼器自動轉化爲它本身對應的html、js、css了，省去了不少麻煩。

以爲我說的不是太明白的同窗，能夠參考Vue的官方文檔仔細閱讀：=>https://cn.vuejs.org/v2/guide/single-file-components.html

那麼在引入快速開發一個項目以前，咱們須要瞭解些什麼：

1. node
2. es6
3. vue.js已經有了一個比較熟悉的認識

不過因爲npm安裝依賴速度有些慢，推薦使用國內阿里的淘寶鏡像安裝：=>https://npm.taobao.org/，具體步驟能夠參考下圖：

 等待全部的都安裝完畢以後，咱們能夠經過 cmd 進入指定的目錄下經過 vue-cli 下載安裝整個項目的模板，命令行以下：

引入：當你全局安裝vue-cli以後，運行vue命令，若是提示vue command not found 後，說明vue沒有安裝成功，這個時候從新輸入cnpm install vue-cli -g基本上就都能解決了

其中第二行命令的"my-project"就是你爲本身下載的這個項目的命名，而後cmd裏會出現對這個項目的各類描述信息，一路enter默認就行了，如圖：

而後咱們等正下方的進度條跑完以後，經過第三行命令進入這個項目，接着經過最後一行命令把這個項目跑起來（若是cnpm已經安裝，npm是能夠替換成cnpm的），最後會輸出這樣的一條信息，如圖：

而後粘貼http連接信息，並在瀏覽器窗口裏複製打開。

完整的步驟以下：

轉載請註明連接：=>http://www.cnblogs.com/zxn-9588/p/8919579.html