vue-loader
1>什麼是Vue-loader? 其實是webpack的loader （webpack 模組打包工具）
2>Vue專案是基於webpack來搭建的

3建立Vue腳手架
	npm install vue-clie -g
	vue init webpack-simple [專案名稱]
	進入到專案目錄 cd demo
	安裝專案依賴 npm install
	執行專案 npm run dev
-------------------------------------------
檔案結構
	node_modules|====>專案依賴
	src |=====> 專案的工作目錄
	      |App.vue ====>入口檔案
	      |main.js ===>vue 配置
	      |assets===>js/css/img等各種檔案
	index.html |===>專案入口
	webpack.config.js |====》webpack 配置檔案
	package.json |====》下載的都會體現在這裡


------------------------------------------
新增子元件到App.vue檔案中  ---- 元件式開發
	1.建立components資料夾存放元件檔案的
	2.在該資料夾下建立Home.vue檔案
	3.編寫template元件內容
	4.引入到App.vue檔案中
	      在App.vue檔案中template元件中新增子元件 HomeView
	      script中引入對應路徑：import HomeView from './components/Home.vue'	
	      在 new Vue({  ..., components:{ HomeView}}) 新增元件  HomeView是ES6寫法 HomeView：元件名稱:引入元件的路徑import的名稱

元件的使用：
樣式區域性  <strle scorped> scorped===>區域性的樣式
元件裡的事件的新增
<template>
	<div @click = "add">點選div</div>
</template>
<script>
export default{
	methods:{ add:function(){alert(1)}}
}
</script>


-------------------------------------------------------------------
vue 路由 	
下載路徑：在demo 目錄下右鍵 git basic 
cnpm install vue-router -s  或者 -d  (dev)  下載的不是檔案是下載的依賴

main.js ---引入vue-router
import VueRouter form ‘vue-router’

//第一種方式實現路由
//定義元件 /引入元件
import VueRouter from 'vue-router'
//console.log(VueRouter)
Vue.use(VueRouter)//多了一步腳手架需要
import HomeView from './components/HomeView.vue'
import NewsView from './components/NewsView.vue'
import MyView from './components/MyView.vue'
//配置路由
var routes = [
	{path:"/home",component:HomeView},
	{path:"/news",component:NewsView},
	{path:"/my",component:MyView}
];
//例項化
var router = new VueRouter({
		routes
});

new Vue({
	//例項化掛載
	router, 
  el: '#app',
  render: h => h(App)
})

App.vue
<div>
    	<router-view></router-view>
    </div>
    
	   <!--ul>li*3  +tab健快捷鍵 -->
	   <ul>
	   	<li><router-link to="/home">首頁</router-link></li>
	   	<li><router-link to="/news">新聞</router-link></li>
	   	<li><router-link to="/my">我的</router-link></li>
	   </ul>
------------------------------------------------------
第二種方式實現路由
1.在app.vue 元件中
	template標籤中新增 <router-view> 用於路由檢視切換
	新增ul>li*3 3列資料 ---》<router-link to="/home">
	<ul>
	   	<li><router-link to="/home">首頁</router-link></li>
	   	<li><router-link to="/news">新聞</router-link></li>
	   	<li><router-link to="/my">我的</router-link></li>
	   </ul>

2.在main.js中新增路由的引用檔案 
	import VueRouter from 'vue-router'
	Vue.use(VueRouter)
3.定義元件
	在src下建立資料夾--->components（元件資料夾）--->router(表示路由元件資料夾)
	建立元件檔案：HomeView.vue / MyView.vue / MyView.vue--><template>
4.建立路由配置檔案
	在src下建立資料夾--->router(存放路由配置資料夾)
	建立路由配置檔案 router.config.js
	//router 裡所有配置 這裡是路由的配置
	import HomeView from '../components/router/HomeView.vue'
	import NewsView from '../components/router/NewsView.vue'
	import MyView from '../components/router/MyView.vue'

	export default{
		routes:[
		{path:"/home",component:HomeView},
		{path:"/news",component:NewsView},
		{path:"/my",component:MyView}
		]
	}
5.在main.js中新增路由配置檔案
import RouterConfig from './router/router.config.js'
6.例項化路由
var router = new VueRouter(RouterConfig)
7.掛載路由到Vue物件
new Vue({
	//例項化掛載
	router, ...})
執行 git basic 
> npm run dev