快速入门菜单

Author: sosout

README.md

@@ -62,19 +62,19 @@ yarn install
 yarn run dev
 
 # 生产版本，对代码进行混淆压缩，提取公共代码，分离css文件
-npm run build
+yarn run build
 
 # 生产版本并查看包分析器报告
-npm run build --report
+yarn run build --report
 
 # 单元测试
-npm run unit
+yarn run unit
 
 # e2e测试
-npm run e2e
+yarn run e2e
 
 # 所有测试
-npm test
+yarn test
 ```
 
 ### 访问

src/page/quick/quick.vue

@@ -6,6 +6,12 @@
         height: 48px;
         line-height: 48px;
       }
+      .el-step__description {
+        margin-top: 15px;
+        p {
+          line-height: 1.5;
+        }
+      }
     }
   }
 </style>
@@ -24,6 +30,9 @@
         color: #999;
         line-height: 1.5;
       }
+      .card-btn {
+        margin-top: 15px;
+      }
     }
   }
 </style>
@@ -41,11 +50,31 @@
       <div slot="header">
         <span>项目上手</span>
       </div>
-      <el-steps :space="200" :active="1">
-        <el-step title="下载" description="这是一段很长很长很长的描述性文字"></el-step>
-        <el-step title="安装" description="这是一段很长很长很长的描述性文字"></el-step>
-        <el-step title="运行" description="这是一段很长很长很长的描述性文字"></el-step>
+      <el-steps space="33.33%" :active="active" direction="vertical">
+        <el-step title="下载">
+          <div slot="description">
+            <p>$ git clone</p>
+            <p>$ git clone https://github.com/sosout/vue2-element.git</p>
+            <p>$ cd vue2-element</p>
+          </div>
+        </el-step>
+        <el-step title="安装">
+          <div slot="description">
+            <p>// 安装前请先确保已安装node和npm</p>
+            <p>// 安装成功后,再安装依赖，如果之前有用npm安装过，请先删掉node_modules</p>
+            <p>$ yarn install</p>
+          </div>
+        </el-step>
+        <el-step title="运行">
+          <div slot="description">
+            <p>$ yarn run dev(开发版本，用于开发使用，热加载)</p>
+            <p>$ yarn run build(生产版本，对代码进行混淆压缩，提取公共代码，分离css文件)</p>
+          </div>
+        </el-step>
       </el-steps>
+      <el-button class="card-btn" v-show="active == 3" type="primary" @click="finish" size="small">完成</el-button>
+      <el-button class="card-btn" v-show="active < 3" type="primary" @click="next" size="small">下一步</el-button>
+      <el-button class="card-btn" v-show="active > 1" @click="prev" size="small">上一步</el-button>
     </el-card>
     <el-card class="quick-card">
       <div slot="header">
@@ -63,16 +92,32 @@
 </template>
 
 <script>
-import { Card, Steps, Step } from 'element-ui';
+import { Card, Steps, Step, Button } from 'element-ui';
 export default {
   components: {
     ElCard: Card,
     ElSteps: Steps,
-    ElStep: Step
+    ElStep: Step,
+    ElButton: Button
   },
   data () {
     return {
-
+      active: 1
+    }
+  },
+  methods: {
+    prev() { // 上一步
+      const that = this;
+      if (that.active-- < 2) that.active = 1;
+    },
+    next() { // 下一步
+      const that = this;
+      if (that.active++ > 2) that.active = 3;
+    },
+    finish() { // 完成
+      const that = this;
+      that.active = 1;
+      that.$message.success('恭喜您，大牛！');
     }
   }
 }