建立vue專案

在程式開發中，有三種方式建立vue專案，本地引入vuejs、使用cdn引入vuejs、使用vue-cli建立vue專案。其中vue-cli可以結合webpack打包工具使用，大大方便了開發步驟，使用廣泛。

vue本地引用

在官網下載vue.js，通過script標籤引入。
開發版本：https://vuejs.org/js/vue.js 包含完整的警告和除錯模式
生產版本：https://vuejs.org/js/vue.min.js 刪除了警告，30.90KB min+gzip
注意：在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告！ vue.min.js，這是一個更小的構建，可以帶來比開發環境下更快的速度體驗。

通過cdn方法引用

• jsdelivr，連結到一個你可以手動更新的指定版本號。可以在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的原始碼。
  <script src="https://cdn.jsdelivr.net/npm/...;></script>
• unpkg 
  unpkg：https://unpkg.com/vue/dist/vu... 會保持和 npm 釋出的最新的版本一致。（推薦使用）
• cdnjs 版本更新可能略滯後
  <script src="https://cdnjs.cloudflare.com/...;></script>
• BootCDN（國內）國內不穩定
  https://cdn.bootcss.com/vue/2...

NPM

在用 Vue 構建大型應用時推薦使用 NPM 安裝[1]。NPM 能很好地和諸如 webpack 或 Browserify 模組打包器配合使用。同時 Vue 也提供配套工具來開發單檔案元件。

1. nodejs安裝
   從node.js官網(https://nodejs.org/en/) 下載並安裝node，安裝過程很簡單，一直點下一步就ok了，安裝完之後，我們通過開啟命令列工具（win+R）,輸入node -v 命令，檢視node的版本，若出現相應的版本號，則說明你安裝成功了。
   你可以根據不同平臺系統選擇你需要的Node.js安裝包。

    

   npm包管理器，是整合在node中的，所以安裝了node也就有了npm,直接輸入 npm -v 命令，顯示npm的版本資訊。

2. 安裝淘寶映象庫
   如果訪問外網比較慢，可以使用淘寶的映象 https://npm.taobao.org/
   開啟命令終端 npm install -g cnpm --registry=https://registry.npm.taobao.org
   安裝成功之後，就可以用 cnpm 替代 npm

    

3. 安裝vue-cli

   npm install -g vue-cli / cnpm i -g vue-cli
   安裝結束之後，使用vue -v檢視vue的版本。
   

安裝成功之後，vue環境就部署成功了，接下來就可以使用npm方式建立專案框架了。

使用vue-cli建立專案

步驟：

• 選擇專案所在的位置，通過命令列進入該目錄（或者直接在該目錄，右鍵，開啟命令列）。
• 使用腳手架安裝專案： vue init webpack demo 專案是基於webpack的
  Project name（工程名）:回車
  Project description（工程介紹）：回車
  Author：作者名
  Vue build（是否安裝編譯器）:回車
  Install vue-router（是否安裝Vue路由）：回車
  Use ESLint to lint your code（是否使用ESLint檢查js程式碼）：n
  Set up unit tests（安裝單元測試工具）：n
  Setup e2e tests with Nightwatch（是否安裝端到端測試工具）：n
  Should we run npm install for you after the project has been created? (recommended)：回車。

啟動專案

• 進入專案目錄：cd demo
• 安裝專案所需要的依賴：npm install
• 啟動專案：npm run dev

啟動成功，瀏覽器開啟：localhost:8080，即可看到vue專案。