npm安裝vue
by 鐵樂貓html
[toc]前端
Vue.js 是什麼
Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。vue
-
數據驅動視圖node
- 數據驅動是vuejs最大的特色。
- 在vuejs中，所謂的數據驅動就是當數據發生變化的時候，用戶界面發生相應的變化，開發者不須要手動的去修改dom。
-
聲明式渲染webpack
- Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統。
直接用script引入
直接下載並用 <script> 標籤引入，Vue 會被註冊爲一個全局變量。 注：在開發環境下不要使用壓縮版本，否則你就失去了全部常見錯誤相關的警告!git
安裝vue
在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。vue-router
# 最新穩定版 $ npm install vue
對不一樣構建版本的解釋
在 NPM 包的 dist/ 目錄你將會找到不少不一樣的 Vue.js 構建版本。 這裏列出了它們之間的差異：vue-cli
| UMD | CommonJS | ES Module | |
|---|---|---|---|
| 完整版 | vue.js | vue.common.js | vue.esm.js |
| 只包含運行時版 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| 完整版 (生產環境) | vue.min.js | - | - |
| 只包含運行時版 (生產環境) | vue.runtime.min.js | - |
安裝命令行工具 (CLI)
Vue 提供了一個官方的 CLI，爲單頁面應用快速搭建 (SPA) 繁雜的腳手架。它爲現代前端工做流提供了 batteries-included 的構建設置。只須要幾分鐘的時間就能夠運行起來並帶有熱重載、保存時 lint 校驗，以及生產環境可用的構建版本。更多詳情可查閱 Vue CLI 的文檔。
安裝cnpm
在國內，使用淘寶的鏡像會比較快安裝一些包。 
我前面己經安裝好了node.js和npm，上圖是進入命令行，npm安裝cnpm：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
這樣就可使用 cnpm 命令來安裝模塊了：
$ cnpm install [name]
安裝vue-cli
vue-cli用於快速搭建大型單頁應用,可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。
$ cnpm install --global vue-cli 如上圖，使用--global選項是由於這樣能夠在全局下使用vue-cli工具來建立vue項目，而不是要在特定的安裝目錄下才能使用vue-cli。
$ vue -v查看版本驗證安裝成功與否
由於vue命令去初始化項目的時候實際上仍是使用的是npm去安裝各類模塊，並無使用cnpm，因此仍是先設置npm使用淘寶中的鏡像比較快。
新建vue項目
新建一個項目文件夾，進入該文件夾後敲如下命令初始化一個vue項目 vue init webpack 項目名稱
其中webpack爲vue的其中一個模板。 查看幫助得知，若是本身的github倉庫上 己有模板也可指定github上的倉庫來初始化項目:
下圖開始初始化一個vue項目，利用的就是vue-cli和webpack： vue init webpack my-project
? Project name vue-start //項目名稱 ? Project description A Vue.js project // 項目描述 ? Author // 做者名稱 ? Vue build standalone // 推薦選前者 ? Install vue-router? // 是否安裝vue-router路由組件，也可不安裝使用第三方或簡單的項目本身寫 ? Use ESLint to lint your code? // 是否使用eslint管理代碼，我的項目不推薦 ? Set up unti tests? // 是否使用karma來作單元測試 ? Setup e2e tests with Nightwatch? // 是否安裝e2e測試 ? Should we run 'npm install' for you after the project has been created? // 選擇使用npm或yarn進行安裝模塊
一路填寫所需信息後，回車執行，一段時間安裝完模塊等後初始化完成。
沒安裝那幾個模塊，大小也去到100多M了，果真是要創建大型的項目時纔去作vue-cli init 項目的事情比較好阿。日常的就直接使用vue.js好了。
運行服務
進入項目目錄，按以前看到的提示，運行npm run dev命令進入開發： 默認監聽8080端口，服務器己經啓動，目前是在開發環境下。
訪問默認的localhost:8080，出現的就是vue的歡迎頁面以下，表示正常：
退出監聽，直接關閉cmd窗口便可。
目錄結構
- build -- 大部分是webpack的配置文件
- config -- 配置文件，好比配置監聽端口
- node_modules -- 依賴包都在這裏
- src -- 主工程文件夾，基本上全部的開發都在這個文件夾進行
- static -- 靜態文件目錄
- package.json -- 項目的一些配置信息
【end】