Vue開發環境搭建
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 都可以啟動專案：