使⽤AntDesignVue从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
astonimport Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.u(Antd);
4、使⽤Vue Router组件
安装Vue Router
hsdpa是什么意思$ npm install vue-router
在main.js⽂件中引⼊Vue Router
import router from "./router";
new Vue({
router,
render: h => h(App),
gate valve
}).$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.u(VueRouter)
// 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
export default new VueRouter({
// 定义路由
// 每个路由应该映射⼀个组件。其中"component" 可以是
// 通过 d() 创建的组件构造器，
/
/ 或者，只是⼀个组件配置对象。
// 我们晚点再讨论嵌套路由。
// (缩写) 相当于 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，增加页⾯头尾和路由出⼝，代码如下所⽰：
<router-view name="header"></router-view>nightingale
<!-- 路由出⼝ -->
打桩工程
<!-- 路由匹配到的组件将渲染在这⾥ -->
<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-rif;
-webkit-font-smoothing: antialiad;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
#margin-top: 60px;
}
</style>
7、创建AppHeader.vue⽂件创建AppHeader.vue页头⽂件，代码如下所⽰：
<header>
<a-row>
<a-col :span="6">
<img alt="Vue logo" src="./../asts/logo.png" > Water Cloud
</a-col>
<a-col :span="18">
<a-space size="large">
<!-- 使⽤ router-link 组件来导航. -->
<!-- 通过传⼊ `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成⼀个 `<a>` 标签 -->
<router-link to="/" >
⾸页
</router-link>
<router-link to="/" >
客户案例
</router-link>
<router-link to="/" >
鸣啭的意思升级⽇志
</router-link>
<router-link to="/" >
产品⽅案
</router-link>ams
<router-link to="/" >
商业授权
kaji</router-link>
<router-link to="/" >
技术论坛
</router-link>
<router-link to="/about" >
关于我们
</router-link>
<router-link to="/contact" >
联系⽅式
</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 >更多产品</p>
<p>低代码开发 - lowcode</p>
<p>⼯作流引擎 - lowcode</p>
<p>表单引擎 - lowcode</p>
<p>移动端APP - lowcode</p>
</a-col>
<a-col :span="8">
<p >关于我们</p>
<p>北京国炬官⽹ - guojusoft</p>
<p>积⽊报表官⽹ - JimuReport</p>
<p>JEECG官⽅论坛 - BBS</p>
<p>官⽅公众号 - JEECG</p>
</a-col>
<a-col :span="8">
民有民治民享<p >联系我们</p>
<p>商务QQ - 2019066212、3102411850</p>
<p>商务热线(5*8⼩时) - 010-********</p>
<p>备案号 - 京ICP备12013567号-3</p>
<p>QQ交流群 - 816531124</p>
</a-col>
</a-row>
<a-divider/>
<a-row>
<a-col :span="24">
Copyright © 2021 北京国炬 All Rights Rerved </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-caroul arrows autoplay>
