怎么做个网站演示,哈尔滨网站建设市场,网页设计如何在图片上添加文字,仪征 网站建设使用vue组件搭建网页应用搭建开发环境开发组件搭建开发环境
搭建一个 vue 项目最快的方式就是使用 vue cli 脚手架进行初始化#xff0c;包含了所有完整的依赖及开发配置。
首先全局安装 vue cli#xff0c;打开 cmd 命令提示符 或者 power shell#xff0c;输入以下命令包含了所有完整的依赖及开发配置。
首先全局安装 vue cli打开 cmd 命令提示符 或者 power shell输入以下命令
npm install -g vue/cli如果出现以下错误则表示没有安装 NodeJS下载 NodeJS 安装即可。 全局安装好 vue cli 后使用下面的命令初始化一个简单模板中途会询问一些选项全部默认回车就好
vue create vue-demo初始化完成后项目结构如下使用编辑器打开项目推荐 vscode。 继续在 cmd 命令提示符中输入以下命令
cd vue-demo
npm run serve在浏览器中打开 http://localhost:8080/ 查看效果图
开发组件
这里我们关注的重点是 /src 文件夹下的内容。 在 src/components 目录下新建文件 PageBanner.vue复制以下代码
templatediv classpage-bannerimg :srcimage alt //div
/templatescript
export default {name: PageBanner,data() {return {image: ../assets/banner.png, // 这里替换成自己的图片可以是外部链接};},
};
/script
style
.page-banner {width: 100%;height: 100vh;overflow: hidden;position: relative;
}
.page-banner img {width: 100%;height: 100%;object-fit: cover;
}
/style在 src/components 目录下新建文件 HeaderNavigation.vue复制以下代码
templatediv classnavultemplate v-foritem in items :keyitemlia :hrefitem.url{{ item.txt }}/aSecNav v-ifitem.children :itemsitem.children/SecNav/li/template/ul/div
/templatescript
import SecNav from ./SecNav.vue;export default {name: HeaderNavigation,components: { SecNav },data() {return {items: [{ txt: 主页, url: / },{ txt: 联系我们, url: / },{txt: 服务内容,url: /,children: [{ txt: 火星旅行, url: / },{ txt: 仙女星旅行, url: / },{ txt: M77旅行, url: / },],},{txt: 售前咨询,url: /,children: [{ txt: 旅行路线, url: / },{ txt: 安全保障, url: / },{ txt: 自助查询, url: / },{ txt: 人工客服, url: / },],},{ txt: 投诉建议, url: / },],};},
};
/scriptstyle
.nav {position: absolute;width: 100%;background: #fff;z-index: 1;
}
.nav ul {display: flex;list-style: none;margin: 0;justify-content: space-around;
}
.nav ul li {flex-grow: 1;padding: 15px 20px;text-align: center;position: relative;
}
.nav ul li:hover {background-color: #2289ff;cursor: pointer;
}
.nav ul li:hover a {color: white;
}
.nav ul li:hover .sec-nav {display: inline-block;z-index: 2;
}
.nav ul li a {display: inline-block;width: 100%;color: #2289ff;text-decoration: none;
}
/style在 src/components 目录下新建文件 SecNav.vue复制以下代码
templateul classsec-navtemplate v-foritem in items :keyitemlia :hrefitem.url{{ item.txt }}/a/li/template/ul
/templatescript
export default {name: SecNav,props: [items],
};
/scriptstyle
.sec-nav {position: absolute;background-color: #fff;display: none;left: 0;top: 100%;width: 100%;padding: 0;
}
.sec-nav li {list-style: none;
}
/style修改 src/App.vue 复制以下代码
templateHeaderNavigation /PageBanner /
/templatescript
import PageBanner from ./components/PageBanner.vue;
import HeaderNavigation from ./components/HeaderNavigation.vue;export default {name: App,components: {PageBanner,HeaderNavigation,},
};
/scriptstyle
body {margin: 0;
}
/style效果图
