fix: 修改模板

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/src/.umi
 
 /tests/e2e/videos/
 /tests/e2e/screenshots/

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "core-js": "^3.6.5",
+    "element-plus": "^2.2.12",
     "register-service-worker": "^1.7.1",
     "vue": "^3.0.0",
     "vue-class-component": "^8.0.0-0",

src/components/HelloWorld.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="hello">
-    Hi, 我是 jsonSkin
+    {{ msg }}
   </div>
 </template>
 
@@ -20,7 +20,7 @@ export default class HelloWorld extends Vue {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="stylus">
 h3
-  margin 40px 0 0
+  margin 20px 0 0
 
 ul
   list-style-type none
@@ -30,6 +30,4 @@ li
   display inline-block
   margin 0 10px
 
-a
-  color #42b983
 </style>

src/main.ts

@@ -1,4 +1,6 @@
 import { createApp } from "vue";
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import App from "./App.vue";
 import "./registerServiceWorker";
 import router from "./router";
@@ -7,4 +9,5 @@ import store from "./store";
 createApp(App)
   .use(store)
     .use(router)
-      .mount("#app");
+      .use(ElementPlus)
+        .mount("#app");

src/views/About.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="about">
     <h1>This is an about page</h1>
+    <el-button type="primary">知道啦</el-button>
   </div>
 </template>

src/views/Home.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="home">
-    <img alt="Vue logo" src="http://jzx-h5.oss-cn-hangzhou.aliyuncs.com/logo.png" />
-    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
+    <img class="pic" alt="Vue logo" src="http://jzx-h5.oss-cn-hangzhou.aliyuncs.com/logo.png" />
+    <HelloWorld msg=" Hi, 我是 dev" />
   </div>
 </template>
 
@@ -17,3 +17,7 @@ import HelloWorld from "@/components/HelloWorld.vue";
 export default class Home extends Vue {
 }
 </script>
+<style lang="stylus">
+  .pic 
+    width: 100%
+</style>