npm安裝vue
by 鐵樂貓
Vue.js 是什么
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。
-
數據驅動視圖
- 數據驅動是vuejs最大的特點。
- 在vuejs中，所謂的數據驅動就是當數據發生變化的時候，用戶界面發生相應的變化，開發者不需要手動的去修改dom。
-
聲明式渲染
- Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統。
直接用script引入
直接下載並用 <script> 標簽引入，Vue 會被注冊為一個全局變量。
注：在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告!
安裝vue
在用 Vue 構建大型應用時推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時 Vue 也提供配套工具來開發單文件組件。
# 最新穩定版
$ npm install vue
對不同構建版本的解釋
在 NPM 包的 dist/ 目錄你將會找到很多不同的 Vue.js 構建版本。
這里列出了它們之間的差別：
| 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】