環境

開發工具：VS Code
vue版本: 2.x

準備

使用 npm 包管理器進行安裝，也可以使用 yarn 包管理器。
可以使用淘寶的 npm 鏡像，國內速度更快。
使用方式：

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

之後使用 cnpm 代替 npm 命令即可。
詳見：淘寶 NPM 鏡像

安裝 vue 命令行工具 (CLI) - 2.x

$ cnpm install -g vue-cli 

安裝完成之後，就可以使用 vue 命令了。

PS
這裏使用的是 vue-cli 2.x 版本，文檔為：
vuejs/vue-cli at v2

最新的 vue-cli 為 3.x，文檔為：
Vue CLI 3

使用模板創建一個新項目 - 2.x

$ vue init webpack my-project

// 安裝依賴，運行
cd my-project
npm install 
npm run dev 

這裏的 npm run dev 是指以 dev 方式的運行，具體的運行配置，可以查看項目中的 package.json 文件 。

以上內容為 2.x 版本的項目初始化方式，這裏有視頻教程：
vuejs開發環境搭建及熱更新，vue.js入門基礎教程-慕課網
下面說明 3.x 版本的安裝和項目創建方式。

可以使用 vue --version

查看安裝的 vue 命令行工具的版本。

安裝 vue-cli 3.x

$ cnpm install -g @vue/cli

使用 vue-cli 3.x 創建 vue 項目

Vue CLI 3

vue create my-project
# OR
vue ui

使用 vue ui 命令可以使用 UI 交互式創建 vue 項目，很方便，適合初學者。

PS
在使用 vue ui 之前，可以先使用 cnpm 將以下包先安裝了，不然可能會有點慢。
@vue/cli-plugin-babel
@vue/cli-plugin-eslint
@vue/cli-service

安裝方法：

cnpm install -g @vue/xxx 
 

使用 vue ui 創建項目成功之後（這裏我選擇的是使用 npm 作為包管理器），會自動啟動 vue 的後臺管理看板，用圖形化的方式，可以直觀的做很多事情。

如何運行剛剛創建的 vue 項目？
命令行進入新建的項目文件夾，運行 npm run serve ，會提示服務運行的端口，如 http://localhost:8080/ 。
在瀏覽器打開，即可查看默認創建的 demo 了。

vue 環境搭建筆記