Vue CLI安裝

1. 環境準備
# 1.下載nodejs
	http://nodejs.cn/download/
		windows系統:   .msi  安裝包(exe)指定安裝位置   .zip(壓縮包)直接解壓縮指定目錄
		mac os 系統:   .pkg  安裝包格式自動配置環境變數  .tar.gz(壓縮包)解壓縮安裝到指定名

# 2.配置nodejs環境變數
	1.windows系統:
	 	計算上右鍵屬性---->  高階屬性 ---->環境變數 新增如下配置:
		NODE_HOME=  nodejs安裝目錄
        PATH    = xxxx;%NODE_HOME%
    2.macos 系統
    	推薦使用.pkg安裝直接配置node環境

# 3.驗證nodejs環境是否成功
	node -v 

# 4.npm介紹
	node package mangager   nodejs包管理工具       前端主流技術  npm 進行統一管理
	maven 管理java後端依賴    遠端倉庫(中心倉庫)      阿里雲映象
	npm   管理前端系統依賴     遠端倉庫(中心倉庫)      配置淘寶映象

# 5.配置淘寶映象
	  npm config set registry https://registry.npm.taobao.org
	  npm config get registry

# 6.配置npm下載依賴位置
	 windows:
		npm config set cache "D:\nodereps\npm-cache"
		npm config set prefix "D:\nodereps\npm_global"
	 mac os:
	 	npm config set cache "/Users/chenyannan/dev/nodereps"
		npm config set prefix "/Users/chenyannan/dev/nodereps"

# 7.驗證nodejs環境配置
	npm config ls
    ; userconfig /Users/chenyannan/.npmrc
    cache = "/Users/chenyannan/dev/nodereps"
    prefix = "/Users/chenyannan/dev/nodereps"
    registry = "https://registry.npm.taobao.org/"


2.安裝腳手架
# 0.解除安裝腳手架
	npm uninstall -g @vue/cli  //解除安裝3.x版本腳手架
	npm uninstall -g vue-cli  //解除安裝2.x版本腳手架

# 1.Vue Cli官方網站
	https://cli.vuejs.org/zh/guide/

# 2.安裝vue Cli
	npm install -g vue-cli


3.第一個vue腳手架專案
# 1.建立vue腳手架第一個專案
	vue init webpack 專案名
# 2.建立第一個專案
	hello     ------------->專案名
    -build  ------------->用來使用webpack打包使用build依賴  構建一些依賴檔案
    -config ------------->用來做整個專案配置目錄   主要用來對 開發 測試 環境進行配置
    -node_modules  ------>用來管理專案中使用依賴
    -src					 ------>用來書寫vue的原始碼[重點]
    	+assets      ------>用來存放靜態資源 [重點]
      	components   ------>用來書寫Vue元件 [重點]
      	router			 ------>用來配置專案中路由[重點]
      	App.vue      ------>專案中根元件[重點]
      	main.js      ------>專案中主入口[重點]
    -static        ------>其它靜態
    -.babelrc      ------> 將es6語法轉為es5執行
    -.editorconfig ------> 專案編輯配置
    -.gitignore    ------> git版本控制忽略檔案
    -.postcssrc.js ------> 原始碼相關js
    -index.html    ------> 專案主頁
    -package.json  ------> 類似與pom.xml 依賴管理  jquery 不建議手動修改
    -package-lock.json ----> 對package.json加鎖
    -README.md         ----> 專案說明檔案

# 3.如何執行在專案的根目錄中執行
	npm start 執行前端系統

# 4.如何訪問專案
	http://localhost:8081    

# 5.Vue Cli中專案開發方式
	 注意: 一切皆元件   一個元件中   js程式碼  html程式碼  css樣式
	 	1. VueCli開發方式是在專案中開發一個一個元件對應一個業務功能模組,日後可以將多個元件組合到一起形成一個前端系統
	 	2. 日後在使用vue Cli進行開發時不再書寫html,編寫的是一個個元件(元件字尾.vue結尾的檔案),日後打包時vue cli會將元件編譯成執行的html檔案