1

src/App.vue

@@ -1,28 +1,41 @@
 <template>
-  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <div>
+    <!-- 告诉router 将页面渲染到哪个地方 -->
+    <router-view></router-view>
+
   </div>
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
+  data() {
+    return {
+      name: "啦啦啦",
+      value1: "",
+    };
+  },
+  methods: {
+  
+  },
   components: {
-    HelloWorld
-  }
-}
+  },
+};
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+#aaa {
+  width: 100px;
+  background-color: red;
+  height: 100px;
 }
 </style>
+<!-- 
+Vue.compontent(mingzi,{
+	template:"",
+	data(){
+		return {}
+	},
+	methods:{},
+	computed:{},
+	watch:{}
+}) -->

src/bpp.vue

@@ -0,0 +1,42 @@
+<template>
+	<div >
+		这是bpp {{aaa}} {{name}} {{ age }} <button type="button" @click="setaaa">改变aaa</button>
+		<ccc></ccc>
+		<button @click="chuancan">给父级传参</button>
+		<!-- <router-view></router-view> -->
+	</div>
+</template>
+
+<script>
+	import ccc from "./ccc.vue"
+	export default {
+		props:{
+			name: String,
+			age: {
+				type: Number,
+				default: 100 
+			}
+		},
+		components:{
+			ccc
+		},
+		data(){
+			return {
+				aaa:"这是b"
+			}
+		},
+		methods:{
+			setaaa(){
+				this.aaa = new Date().getTime()
+			},
+			chuancan(){
+				// 子组件调用父组件 事件
+				// 自定义事件
+				this.$emit("qqq",this.aaa)
+			}
+		}
+	}
+</script>
+
+<style>
+</style>

src/ccc.vue

@@ -0,0 +1,11 @@
+<template>
+	<div >
+		adfafhjkhj这是ccc
+	</div>
+</template>
+
+<script>
+</script>
+
+<style>
+</style>

src/main.js

@@ -1,8 +1,39 @@
-import Vue from 'vue'
-import App from './App.vue'
-
+import Vue from 'vue' // 引入vue 写他的依赖名字
+// 依赖
+// <srcipt src>
+// 全局的 
+// 根组件 
+import App from './App.vue' // 引入App
+// import asf from "./bpp.vue"
+// import 自己定义的变量名 from "要引入的路径"
 Vue.config.productionTip = false
+console.log(App)
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);
+// new Vue
+// render
 
+import VueRouter from 'vue-router' // 引入vuerouter
+Vue.use(VueRouter) // vue 使用vuerouter
+
+import bar from './pages/bar.vue'
+import foo from './pages/foo.vue'
+import index from "./pages/index.vue"
+
+const routes = [
+  { path: '/foo', component: foo },
+  { path: '/bar', component: bar },
+  { path: '/', component: index }
+]
+
+// router 路由对象
+const router = new VueRouter({
+  routes: routes // (缩写) 相当于 routes: routes
+})
+// router 挂载路由 给vue实例
 new Vue({
+  //render 让vue 渲染 App
   render: h => h(App),
+  router: router
 }).$mount('#app')

src/pages/bar.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>这是bar</div>
+</template>
+<style scoped>
+
+</style>
+<script>
+export default {
+    
+}
+</script>

src/pages/foo.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>这是foo</div>
+</template>
+<style scoped>
+
+</style>
+<script>
+export default {
+    
+}
+</script>

src/pages/index.vue

@@ -0,0 +1,3 @@
+<template>
+    <div>这是首页</div>
+</template>