從零開始系列之vue全家桶（1）安裝前期準備nodejs+cnpm+webpack+vue-cli+vue-router

寫在前面：

什麼是全家桶？

包含了vue-router，vuex， axios。再加上構建工具vue-cli，sass/less樣式,和Element UI 這類UI工具，就是一個完整的vue項目的核心構成。

歸納起來就是：、1.項目構建工具、2.路由、3.狀態管理、4.http請求工具。5.其餘

axios是一個http請求包，vue官網推薦使用axios進行http調用。

 

1.安裝nodejs。

Node.js官方安裝包及源碼下載地址：https://nodejs.org/en/

選擇左邊的Recommmended For Most Users的穩定版，一路next，安裝完畢。

1.命令行操做：win+r鍵調出運行，輸cmd調出命令行。或者在桌面按住shift鍵點右鍵，輸w調出命令行。

2.檢查Node.js版本看是否安裝成功：輸入node -v。

 

2.將淘寶鏡像cnpm安裝，解決npm外國安裝過慢問題。

1.打開命令行，輸入

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

-g和-global一樣都是全局的意思，之後再有新項目都不用再重複操做安裝依賴了。安裝好之後用cnpm 替代全部npm命令。不過有些時候cnpm會丟包，建議重要的項目仍是用npm。

這裏的i就是指的install,之後再也不贅述。

若是安裝失敗，可使用 npm cache clean 清理緩存，而後再從新安裝。後面的安裝過程當中，若有安裝失敗的狀況，也須要先清理緩存。

一樣可使用 cnpm -v 查看是否安裝成功。

 

3.使用 cnpm 安裝 vue-cli 腳手架和 webpack。最新的 vue 項目模板中，都帶有 webpack 插件，因此這裏能夠不安裝 webpack。

cnpm i -g vue-cli

安裝完成後，可使用 vue -V （注意 V 大寫）查看是否安裝成功。若是提示「沒法識別 'vue' 」 ，有多是 npm 版本太低，可使用 npm i -g npm 來更新版本

 

4.初始化項目

vue init webpack 項目名稱

好比在桌面shift右鍵調出命令行，輸入vue init webpack my-vue ，而後一路回車過去，會默認自動安裝vue-router，行使ESLint規範等。

 

5.而後進入項目目錄，使用 cnpm 安裝依賴

cd my-vue

cnpm i

而後啓動項目 npm run dev

瀏覽器打開輸入：http://localhost:8080 

 

6本身的項目文件都須要放到 src 文件夾下

 

 

7.項目開發完成以後，能夠進行打包工做

npm run build

打包完成後，會生成 dist 文件夾，若是已經修改了文件路徑，能夠直接打開本地文件查看

項目上線時，只須要將 dist 文件夾放到服務器就好了。