1

package-lock.json

@@ -2314,6 +2314,14 @@
       "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
       "dev": true
     },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.nlark.com/async-validator/download/async-validator-1.8.5.tgz?cache=0&sync_timestamp=1619755921381&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fasync-validator%2Fdownload%2Fasync-validator-1.8.5.tgz",
+      "integrity": "sha1-3D4I7B/Q3dtn5ghC8CwM0c7G1/A=",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.nlark.com/asynckit/download/asynckit-0.4.0.tgz",
@@ -2367,6 +2375,11 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npm.taobao.org/babel-helper-vue-jsx-merge-props/download/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha1-Iq69OzOQIyjlEyk6jkmSs4T58bY="
+    },
     "babel-loader": {
       "version": "8.2.2",
       "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.2.2.tgz?cache=0&sync_timestamp=1606424647115&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.2.tgz",
@@ -2418,6 +2431,27 @@
         "@babel/helper-define-polyfill-provider": "^0.2.2"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.nlark.com/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.nlark.com/core-js/download/core-js-2.6.12.tgz?cache=0&sync_timestamp=1624966056491&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcore-js%2Fdownload%2Fcore-js-2.6.12.tgz",
+          "integrity": "sha1-2TM9+nsGXjR8xWgiGdb2kIWcwuw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714298273&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
@@ -4063,8 +4097,7 @@
     "deepmerge": {
       "version": "1.5.2",
       "resolved": "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
-      "dev": true
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -4513,6 +4546,19 @@
       "integrity": "sha1-k/bwJQbQmZQfVXudubpQswIVvxU=",
       "dev": true
     },
+    "element-ui": {
+      "version": "2.15.3",
+      "resolved": "https://registry.nlark.com/element-ui/download/element-ui-2.15.3.tgz",
+      "integrity": "sha1-VRCKuCo7zGRuewVwhxxIupYwBlI=",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
     "elliptic": {
       "version": "6.5.4",
       "resolved": "https://registry.nlark.com/elliptic/download/elliptic-6.5.4.tgz",
@@ -7561,6 +7607,11 @@
       "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
       "dev": true
     },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npm.taobao.org/normalize-wheel/download/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
     "npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz",
@@ -9223,6 +9274,11 @@
       "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
       "dev": true
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.nlark.com/resize-observer-polyfill/download/resize-observer-polyfill-1.5.1.tgz?cache=0&sync_timestamp=1618847256390&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fresize-observer-polyfill%2Fdownload%2Fresize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha1-DpAg3T0hAkRY1OvSfiPkAmmBBGQ="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz?cache=0&sync_timestamp=1613054862388&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fresolve%2Fdownload%2Fresolve-1.20.0.tgz",
@@ -10413,6 +10469,11 @@
         "neo-async": "^2.6.0"
       }
     },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.nlark.com/throttle-debounce/download/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha1-UYU9o3vmihVctugns1FKPEIuic0="
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npm.taobao.org/through/download/through-2.3.8.tgz",
@@ -11078,6 +11139,11 @@
         }
       }
     },
+    "vue-router": {
+      "version": "3.5.2",
+      "resolved": "https://registry.nlark.com/vue-router/download/vue-router-3.5.2.tgz",
+      "integrity": "sha1-X1Xj8lGXDjbD6NiKfNLWejUK3lw="
+    },
     "vue-style-loader": {
       "version": "4.1.3",
       "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.3.tgz",

package.json

@@ -9,7 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "element-ui": "^2.15.3",
+    "vue": "^2.6.11",
+    "vue-router": "^3.5.2"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

src/App.vue

@@ -1,28 +1,41 @@
 <template>
-  <div id="app">
+  <div>
-    <img alt="Vue logo" src="./assets/logo.png">
+    <!-- 告诉router 将页面渲染到哪个地方 -->
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <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 {
+#aaa {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  width: 100px;
-  -webkit-font-smoothing: antialiased;
+  background-color: red;
-  -moz-osx-font-smoothing: grayscale;
+  height: 100px;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
 }
 </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 Vue from 'vue' // 引入vue 写他的依赖名字
-import App from './App.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>