Vue 脚手架 路由3

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