一、安裝node.js

去官網下載安裝node.js: https://nodejs.org/en/

安裝完成後，可以在命令行工具（Windows是cmd，蘋果是終端控制）輸入node -v 和 npm -v，如果能顯示出版本號，就說明安裝成功。

二、安裝vue-cli

參考vue官網（命令行工具）

安裝完成後，可以使用 vue -V （註意 V 大寫）查看是否安裝成功。

如果提示“無法識別 ‘vue‘ ” ，有可能是 npm 版本過低，可以使用 npm install -g npm 來更新版本

三、安裝webpack

參考菜鳥教程：https://www.runoob.com/w3cnote/webpack-tutorial.html

四、生成項目

首先進入項目目錄，從項目目錄中打開命令行工具，輸入：

vue init webpack your-Project-Name

其中 webpack 是模板名稱，可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates

your-Project-Name是自定義的項目名稱，命令執行之後，會在當前目錄生成一個以該名稱命名的項目文件夾 是自定義的項目名稱，命令執行之後，會在當前目錄生成一個以該名稱命名的項目文件夾

命令行會出來很多需要輸入信息，項目名稱，項目描述等，這些自行填寫，不重要。

配置完成後，可以看到目錄下多出了一個項目文件夾，裏面就是 vue-cli 創建的一個基於 webpack 的 vue.js 項目

安裝依賴：

npm install

啟動項目：

npm run dev

修改端口：config>index.js

四、打包上線

自己的項目文件都需要放到 src 文件夾下

項目開發完成之後，可以輸入 npm run build 來進行打包工作

npm run build

打包完成後，會生成 dist 文件夾，如果已經修改了文件路徑，可以直接打開本地文件查看

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

文章參考鏈接：http://www.cnblogs.com/wisewrong/p/6255817.html

vue（一）使用vue-cli搭建項目