使用Ant Design Vue从0开发网站Landing

1、安装脚手架工具 vue-cli

$ yarn global add @vue/cli

2、创建一个项目 

使用命令行进行初始化。

$ vue create ant-design-vue-landing

选择Vue 2

Default ([Vue 2] babel, eslint)

3、使用Ant Design of Vue组件 

安装Ant Design of Vue

$ npm i --save ant-design-vue

在main.js文件中完整引入Ant Design of Vue

import Vue from 'vue';

import Antd from 'ant-design-vue';

import App from './App';

import 'ant-design-vue/dist/antd.css';

Vue.config.productionTip = false;

Vue.use(Antd);

4、使用Vue Router组件

安装Vue Router

$ npm install vue-router

在main.js文件中引入Vue Router

import router from "./router";

new Vue({

    router,

    render: h => h(App),

}).$mount('#app')

5、创建router.js文件

创建router.js文件，代码如下所示：

import Vue from 'vue'
import VueRouter from 'vue-router'
// 定义 (路由) 组件。
// 可以从其他文件 import 进来
import AppHeader from "./layout/AppHeader.vue";
import AppFooter from "./layout/AppFooter.vue";
import Home from "./views/Home.vue";
import About from "./views/About.vue";
import Contact from "./views/Contact.vue";

Vue.use(VueRouter)

// 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
export default new VueRouter({
// 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
// (缩写) 相当于 routes: routes
    routes: [
        {
            path: '/',
            components: {
                header: AppHeader,
                default: Home,
                footer: AppFooter
            }
        },
        {
            path: '/about', components:
                {
                    header: AppHeader,
                    default: About,
                    footer: AppFooter
                }
        },
        {
            path: '/contact', components: {
                header: AppHeader,
                default: Contact,
                footer: AppFooter
            }
        }
    ]
})

6、修改App.vue文件

修改App.vue，增加页面头尾和路由出口，代码如下所示：

<template>
  <div id="app">
    <router-view name="header"></router-view>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    <router-view name="footer"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {}
}
</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;
}
</style>

7、创建AppHeader.vue文件

创建AppHeader.vue页头文件，代码如下所示：

<template>
  <div id="header">
    <header>
      <a-row>
        <a-col :span="6">
          <img alt="Vue logo" src="./../assets/logo.png" style="height: 30px">
          Water Cloud
        </a-col>
        <a-col :span="18">
          <a-space size="large">
            <!-- 使用 router-link 组件来导航. -->
            <!-- 通过传入 `to` 属性指定链接. -->
            <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
            <router-link to="/" style="color:white">
              首页
            </router-link>
            <router-link to="/" style="color:white">
              客户案例
            </router-link>
            <router-link to="/" style="color:white">
              升级日志
            </router-link>
            <router-link to="/" style="color:white">
              产品方案
            </router-link>
            <router-link to="/" style="color:white">
              商业授权
            </router-link>
            <router-link to="/" style="color:white">
              技术论坛
            </router-link>
            <router-link to="/about" style="color:white">
              关于我们
            </router-link>
            <router-link to="/contact" style="color:white">
              联系方式
            </router-link>
            <a-button type="primary">
              立即下载
            </a-button>
          </a-space>
        </a-col>
      </a-row>
    </header>
  </div>
</template>

<script>
export default {
  name: "AppHeader"
}
</script>

<style scoped>
#header {
  height: 60px;
  color: #fff;
  background-color: #1890FF;
  padding-top: 1rem;
  padding-bottom: .5rem;
  box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
}
</style>

8、创建AppFooter.vue文件

创建AppFooter.vue页尾文件，代码如下所示：

<template>
  <div id="footer">
    <footer>
      <a-row>
        <a-col :span="8">
          <p style="font-size: 16px">更多产品</p>
          <p>低代码开发 - lowcode</p>
          <p>工作流引擎 - lowcode</p>
          <p>表单引擎 - lowcode</p>
          <p>移动端APP - lowcode</p>
        </a-col>
        <a-col :span="8">
          <p style="font-size: 16px">关于我们</p>
          <p>北京国炬官网 - guojusoft</p>
          <p>积木报表官网 - JimuReport</p>
          <p>JEECG官方论坛 - BBS</p>
          <p>官方公众号 - JEECG</p>
        </a-col>
        <a-col :span="8">
          <p style="font-size: 16px">联系我们</p>
          <p>商务QQ - 2019066212、3102411850</p>
          <p>商务热线(5*8小时) - 010-64808099</p>
          <p>备案号 - 京ICP备12013567号-3</p>
          <p>QQ交流群 - 816531124</p>
        </a-col>
      </a-row>
      <a-divider/>
      <a-row>
        <a-col :span="24">
          Copyright &copy; 2021 北京国炬 All Rights Reserved
        </a-col>
      </a-row>
    </footer>
  </div>
</template>

<script>
export default {
  name: "AppFooter"
}
</script>

<style scoped>
#footer {
  height: 300px;
  background-color: #f0f2f5;
  padding-top: 1.5rem;
  padding-bottom: .5rem;
  box-shadow: 0 1px 10px rgba(130, 130, 134, 0.1);
}
</style>

9、创建Home.vue文件

创建Home.vue“首页”文件，代码如下所示：

<template>
  <div id="home">
    <a-carousel arrows autoplay>
      <div
          slot="prevArrow"
          class="custom-slick-arrow"
          style="left: 10px;zIndex: 1"
      >
        <a-icon type="left-circle"/>
      </div>
      <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
        <a-icon type="right-circle"/>
      </div>
      <div><img alt="Vue logo" src="./../assets/c1.png" style="width: 100%"></div>
      <div><img alt="Vue logo" src="./../assets/c2.png" style="width: 100%"></div>
      <div><img alt="Vue logo" src="./../assets/c3.png" style="width: 100%"></div>
    </a-carousel>
    <!-- 产品描述 -->
    <section class="product">
      <a-row>
        <a-col :span="24" style="font-size: 24px;">
          <a-divider>产品描述</a-divider>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="account-book" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            在线表单设计
            在线拖拽设计，简单易用
          </div>
        </a-col>
        <a-col :span="6" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="alert" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            在线流程设计
            灵活稳定高性能
          </div>
        </a-col>
        <a-col :span="6" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="api" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            权限设置，多维度，颗粒化权限控制
          </div>
        </a-col>
        <a-col :span="6" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="appstore" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            平台性，随需
            而变可搭建多种应用
          </div>
        </a-col>
      </a-row>
      <br>
      <img alt="Vue logo" src="./../assets/p1.png" style="width: 100%"><br>
    </section>

    <!-- 表单设计 -->
    <section class="form">
      <a-row>
        <a-col :span="24" style="font-size: 24px;">
          <a-divider>表单设计</a-divider>
        </a-col>
      </a-row>
      <a-row class="gutter-example">
        <a-col :span="8" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="audio" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            在线拖拽设计
            傻瓜式设计，在线拖拽，各种丰富控件，支持单表、一对一、一对多等模型
          </div>
        </a-col>
        <a-col :span="8" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="bank" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            创建自定义表单
            文本、数字、多行文本、下拉列表、日期、时间、树状结构、编码等10余种控件
          </div>
        </a-col>
        <a-col :span="8" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="bell" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            表单关联
            通过表单与库表关联，保持数据同步，关联实现业务逻辑和关系
          </div>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="book" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            丰富增强
            支持在线编程，支持JS脚步，支持CSS脚步，可以实现复杂页面效果
          </div>
        </a-col>
        <a-col :span="8" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="bulb" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            回写接口
            对某表单操作数据时，如新增、修改、删除等，同时对其他表单进行操作，支持事务同步
          </div>
        </a-col>
        <a-col :span="8" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="calculator" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            数据校验
            提供规范的录入校验，函数及公式等校验
          </div>
        </a-col>
      </a-row>
      <img alt="Vue logo" src="./../assets/p2.png" style="width: 100%"><br>
    </section>

    <!-- 流程设计 -->
    <section class="flow">
      <a-row>
        <a-col :span="24" style="font-size: 24px;">
          <a-divider>流程设计</a-divider>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="calendar" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            流程支持多种表单对接模式
          </div>
        </a-col>
        <a-col :span="6" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="camera" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            数据模型实现自动化业务流转
          </div>
        </a-col>
        <a-col :span="6" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="car" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            流程业务节点权限管理
          </div>
        </a-col>
        <a-col :span="6" class="gutter-row">
          <div class="gutter-box">
            <p>
              <a-icon type="carry-out" :style="{ fontSize: '48px', color: '#1890FF' }"/>
            </p>
            支持中国国情流程设计
          </div>
        </a-col>
      </a-row>
      <img alt="Vue logo" src="./../assets/p3.png" style="width: 100%"><br>
    </section>

    <!-- 权限设置 -->
    <!-- 丰富多样的可视化报表图表 -->
    <!-- 与主流信息系统无缝集成 -->
    <!-- 定制 APP应用 -->
    <!-- 多端办公，多屏应用 -->

    <!-- 回到顶部 -->
    <div>
      <a-back-top/>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
    onChange(a, b, c) {
      console.log(a, b, c);
    },
  },
}
</script>

<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 700px;
  line-height: 700px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel >>> .custom-slick-arrow {
  width: 25px;
  height: 25px;
  font-size: 25px;
  color: #fff;
  background-color: rgba(31, 45, 61, 0.11);
  opacity: 0.3;
}

.ant-carousel >>> .custom-slick-arrow:before {
  display: none;
}

.ant-carousel >>> .custom-slick-arrow:hover {
  opacity: 0.5;
}

.ant-carousel >>> .slick-slide h3 {
  color: #fff;
}

.product {
  padding: 50px 100px 0px 100px;
}

.form {
  padding: 50px 100px 0px 100px;
}

.flow {
  padding: 50px 100px 50px 100px;
}

.gutter-example >>> .ant-row > div {
  background: transparent;
  border: 0;
}

.gutter-box {
  padding: 20px;
}
</style>

10、创建About.vue文件

创建About.vue“关于我们”文件，代码如下所示：

<template>
  <div>
    <section class="about">
      <article>
        <img alt="Vue logo" src="./../assets/about.png" class="img">
        <br>
        <p>
          北京国炬信息技术有限公司（以下简称北京国炬）2013年注册于北京市海淀区，由海外归国人员和国内的IT精英共同创立。公司专门从事计算机软件研发、应用及服务，以自主开发的行业通用软件产品为核心，为大中型应用系统工程提供全方位支持。北京国炬核心团队为国内顶尖技术团队，拥有一批经验丰富技术卓越的架构师，多年来为运营商及大中型企业提供了周到、优质的服务。</p>
        <p>
          北京国炬在移动互联网领域拥有核心技术，是中国联通、百度、新浪微博、中国移动的重要战略合作伙伴，在微信公众帐号企业应用领域处于行业领先地位。公司产品JEECG、JEEWX拥有自主知识产权，目前已广泛应用于众多行业，重要客户包括中国联通、百度、中国石油、三峡集团等大型企业，国内知名软件公司服务对象包括：东软、中科软、文思海辉、神州数码等。</p>
        <p>
          北京国炬是最早涉足微信平台开发的企业之一，2014年北京国炬与中国联通达成深度战略合作伙伴，负责中国联通全国微信公众号多触点运营，业务方向涵盖微信公众号、微信企业号、支付服务窗、微博、QQ公众号、H5营销活动开发等，目前大平台粉丝量过千万。</p>
      </article>
    </section>
  </div>
</template>

<script>
export default {
  name: "About"
}
</script>

<style scoped>
.about {
  padding: 50px 100px 50px 100px;
}

.img {
  width: 100%;
  padding: 0px 0px 50px 0px;
}
</style>

11、创建Contact.vue文件

创建Contact.vue“联系方法”文件，代码如下所示：

<template>
  <div>
    <section class="contact">
      <article>
        <img alt="Vue logo" src="./../assets/contact.png" class="img">
        <br>
        <p>商务QQ - 2019066212、3102411850</p>
        <p>商务热线(5*8小时) - 010-64808099</p>
        <p>备案号 - 京ICP备12013567号-3</p>
        <p>QQ交流群 - 816531124</p>
      </article>
    </section>
  </div>
</template>

<script>
export default {
  name: "Contact"
}
</script>

<style scoped>
.contact {
  padding: 50px 100px 50px 100px;
}

.img {
  width: 100%;
  padding: 0px 0px 50px 0px;
}
</style>

12、运行系统

$ cd ant-design-vue-landing

$ yarn serve

访问：http://localhost:8080/