vue — 建立vue項目

建立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項目。

vue目錄結構

package.json