Vue在Windows系統下本地項目的安裝與部署
一、項目的前期準備
1、node.js 的安裝
Vue項目通常通過webpack工具來構建，而webpack命令是依賴node.js開發環境的，所以首先要安裝node.js。node.js的官方地址爲：https://nodejs.org/en/download/，下載相應的版本。
測試是否安裝成功：在終端輸入npm若顯示npm相關命令則安裝成功。
2、cnpm 的安裝
npm包含開發過程中依賴的包部署在國外，下載起來比較慢，國內的淘寶對npm的鏡像服務器cnpm是比較快的。我們通過npm下載cnpm，完成以後在下載需要以來的包是就可以使用cnpm命令下載。
cnpm下載命令：npm install -g cnpm --registry=https://registry.npm.taobao.org
3、vue-cli 的安裝
vue-cli是vue官方提供的一個命令行工具，可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置，帶來現代化的前端開發流程。只需一分鐘即可啓動帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。
Vue-cli安裝命令：cnpm install -g vue-cli
測試是否安裝成功：在終端輸入vue若顯示vue相關命令則安裝成功。
二、創建一個vue項目
1、
初始化名爲first_vue的項目
在命令行中運行命令 vue init webpack first_vue（如果不行，使用 vue-init webpack first_vue命令來安裝）。解釋一下這個命令，這個命令的意思是初始化一個項目，其中webpack是構建工具，也就是整個項目是基於webpack的。其中firstVue是整個項目文件夾的名稱，這個文件夾會自動生成在你指定的目錄中。
? Project description (A Vue.js project) vue-cli新建項目(項目描述)；
? Author (*******)；? Vue build
❯ Runtime + Compiler: recommended for most users
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
這裏選擇Runtime + Compiler: recommended for most users；
? Install vue-router? (Y/n) y 是否使用vue-router，這裏根據需求選擇；
? Use ESLint to lint your code? (Y/n)n 是否使用ESLint，這裏根據需求選擇；
? Pick an ESLint preset (Use arrow keys)
❯ Standard (https://github.com/feross/standard)
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 這裏選擇Standard (https://github.com/feross/standard)
? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要單元測試，這裏根據需求選擇；Setup e2e tests with Nightwatch? (Y/n) n是否需要單元測試，這裏根據需求選擇；
2、啓動first_vue項目
根據提示：
cd first_vue
然後
npm run dev
啓動項目。
根據提示我們的項目在本地的8080端口上運行。（若是你在本地想把項目啓動在其他端口上，只需在：項目/config/index.js文件下dev配置下的port改爲你需要的端口就行）。
三、項目如何運行
1、vue頁面結構
vue頁面中有三大模塊<template></template>、<script></script>、<style></style>。
<template></template>中寫我們的頁面。template下必須只有一個根元素，可以使用一個容器元素包裹住，例如div。頁面從index.html（首頁入口文件）文件開始，繼承src/App.vue（項目入口文件），然後再顯示每個vue頁面。
<script></script>中寫我們的腳本。其中可以包含：
data：定義我們的數據類型。Vue 將會遞歸將 data 的屬性轉換爲 getter/setter，從而讓 data 的屬性能夠響應數據變化。
created：在實例創建完成後被立即調用。
components：包含 Vue 實例可用組件的哈希表。將引入的組件放在這裏。
methods：將定義的函數寫到這裏
<style></style>寫頁面樣式。
2、路由如何跳轉
瀏覽器中請求的路由會在router文件夾中進行映射。需要用到的vue在使用前import引入。