Vue開發環境搭建
NPM是Node提供的模塊管理工具，可以非常方便的下載安裝很多前端框架，包括Jquery、AngularJS、VueJs都有。我們搭建Vue的開發環境就必不可少的用到Node和NPM。
1 軟件安裝
1.1 下載Node.js
推薦下載LTS版本。
安裝完成后，在控制台輸入：
node -v
看到版本信息
1.2 NPM
Node自帶了NPM，在控制台輸入npm -v查看：
npm默認的倉庫地址是在國外網站，速度較慢，建議大家設置到淘寶鏡像。但是切換鏡像是比較麻煩的。推薦一款切換鏡像的工具：nrm
我們首先安裝nrm，這里-g代表全局安裝。可能需要一點兒時間
npm install nrm -g
通過nrm ls命令查看npm的倉庫列表，帶*的就是當前選中的鏡像倉庫：
我們通過nrm use taobao來指定要使用的鏡像源：
nrm use taobao
通過nrm test npm來測試速度：
nrm test npm
注意：
- 有教程推薦大家使用cnpm命令，但是使用發現cnpm有時會有bug，不推薦。
- 安裝完成請一定要重啟下電腦！！！
- 安裝完成請一定要重啟下電腦！！！
- 安裝完成請一定要重啟下電腦！！！
2 創建工程（普通創建）
創建一個新工程
然后新建一個module：
位置信息：
3 安裝vue
3.1 下載安裝
下載地址：https://github.com/vuejs/vue
可以下載2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下載解壓，得到vue.js文件。
3.2 使用CDN安裝
或者也可以直接使用公共的CDN服務：
<!-- 開發環境版本，包含了用幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
3.3 推薦npm安裝
在idea的左下角，有個Terminal按鈕，點擊打開控制台：
進入hello-vue目錄，先輸入:npm init -y進行初始化
安裝Vue，輸入命令：npm install vue --save
然后就會在hello-vue目錄發現一個node_modules目錄，並且在下面有一個vue目錄。
node_modules是通過npm安裝的所有模塊的默認位置。
4 vue-cli（vue-cli創建）
在開發中，需要打包很多東西包括js、css、html。還有更多的東西要處理，vue官方提供了一個快速搭建vue項目的腳手架：vue-cli
使用它能快速的構建一個web工程模板。
官網：https://github.com/vuejs/vue-cli
安裝命令：npm install -g vue-cli
4.1 快速上手
我們新建一個module：
切換到該目錄：
用vue-cli命令，快速搭建一個webpack的項目：vue init webpack
前幾項都是默認或者yes
下面我們選no
最后，再選yes，使用npm安裝
開始初始化項目，並安裝依賴，可能需要
安裝成功
可以使用npm run dev命令啟動。
5 項目結構
安裝好的項目結構
入口文件：main.js
5.1 單文件組件
需要注意的是，我們看到有一類后綴名為.vue的文件，我們稱為單文件組件。
每一個.vue文件，就是一個獨立的vue組件。類似於我們剛才寫的login.js和register.js
只不過，我們在js中編寫 html模板和樣式非常的不友好，而且沒有語法提示和高亮。
而單文件組件中包含三部分內容：
- template：模板，支持html語法高亮和提示
- script：js腳本，這里編寫的就是vue的組件對象，還可以有data(){}等
- style：樣式，支持CSS語法高亮和提示
每個組件都有自己獨立的html、JS、CSS，互不干擾，真正做到可獨立復用。
6 運行
看看生成的package.json
- 可以看到這引入了非常多的依賴，絕大多數都是開發期依賴，比如大量的加載器。
- 運行時依賴只有vue和vue-router
- 腳本有三個：
- dev：使用了webpack-dev-server命令，開發時熱部署使用
- start：使用了npm run dev命令，與上面的dev效果完全一樣，當腳本名為“start”時，可以省略“run”。
- build：等同於webpack的打包功能，會打包到dist目錄下。
我們執行npm run dev 或者 npm start 都可以啟動項目：
