全局安裝vue-cli（已經安裝可忽略此步，在vue3.x的版本中與此已經不同，在創建vue項目時先保證安裝好了node環境）
$ npm install -g vue-cli

初始化項目（創建一個vue項目的文件夾）
$ vue init webpack project-name
執行以上命令后，相關模塊可視情況而定決定是否安裝， ESlint模塊慎裝

微信圖片_20190513111211.png

進入項目文件夾
$ cd project-name

安裝所依賴的包(初始化項目時可跳過此步，執行該命令會按照項目package.json里面的安裝的依賴將項目運行需要的依賴依次裝好)
$ npm install

開發環境運行
$ npm run dev
運行后的視圖

微信圖片_20190513112023.png

進行編譯打包
$ npm run build

關于安裝相關依賴時添加的不同后綴的差別
npm install 本身就有一個別名 可以簡寫為npm i
npm i module_name -S 即 npm install module_name --save 寫入dependencies，發布到生產環境
npm i module_name -D 即 npm install module_name --save-dev 寫入devDependencies，發布到開發環境
npm i module_name -g 即 global全局安裝(命令行使用)
npm i module_name 即 本地安裝(將安裝包放在 ./node_modules 下)

dependencies與devDependencies的區別

devDependencies 里面的插件只用于開發環境，不用于生產環境

dependencies 是需要發布到生產環境的

比如：開發一個前端項目，在項目中你需要使用一個包構建你的開發和本地運行環境,這時你就要放到dependencies里。gulp是你用來壓縮代碼，打包等需要的工具，程序實際運行的時候并不需要，所以放到dev里就ok了。

執行完以上命令，你就創建了一個最原始的vue項目的模板，以后就可以在這個基礎上去根據需求開發你的需求了

一個原始的vue項目的目錄結構 如下圖：

微信圖片_20190513112412.png

微信圖片_20190513112637.png

assets 目錄下用于存放圖片等靜態資源
components 組件文件夾
router 路由配置文件
index.html首頁
main.js主程序入口
node_modules 安裝的依賴包所在的文件夾
package.json文件記錄了項目所需要的依賴 當node_modules文件夾沒有或者缺失的時候，執行npm install 可以根據該文件將需要的依賴重新安裝
App.vue將來運行項目時替換掉index.html文件下id為app的dom模板

安裝淘寶鏡像cnpm
npm install -g cnpm

安裝vue-cli
$ cnpm install -g vue-cli

初始化項目
$ vue init webpack project-name

進入項目文件夾
$ cd project-name

安裝所依賴的包
$ cnpm install

開發環境運行
$ cnpm run dev

進行編譯打包
$ cnpm run build

以上就是如何使用vue2.0來構建一個最原始的vue項目