当前位置： 首页 > news >正文

成都双流网站建设,网站安全维护公司,凤凰网最新军事新闻,专门做湘菜的网站零、文章目录 Vue2基础五、工程化开发 1、工程化开发和脚手架 #xff08;1#xff09;开发 Vue 的两种方式 核心包传统开发模式#xff1a;基于 html / css / js 文件#xff0c;直接引入核心包#xff0c;开发 Vue。工程化开发模式#xff1a;基于构建工具#xf…零、文章目录 Vue2基础五、工程化开发 1、工程化开发和脚手架 1开发 Vue 的两种方式 核心包传统开发模式基于 html / css / js 文件直接引入核心包开发 Vue。工程化开发模式基于构建工具例如webpack ) 的环境中开发 Vue。 工程化开发模式优点提高编码效率比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识别的ES3/ES5/CSS等工程化开发模式问题 webpack配置不简单雷同的基础配置缺乏统一的标准 脚手架Vue CLI为了解决以上问题所以我们需要一个工具生成标准化的配置这个工具就是脚手架Vue CLI 2脚手架Vue CLI 基本介绍 Vue CLI 是Vue官方提供的一个全局命令工具 可以帮助我们快速创建一个开发Vue项目的标准化基础架子。【集成了webpack配置】 好处 开箱即用零配置内置babel等工具标准化的webpack配置 使用步骤 全局安装只需安装一次即可 yarn global add vue/cli 或者 npm i vue/cli -g查看vue/cli版本 vue –version或者vue –V创建项目架子vue create project-name(项目名不能使用中文)启动项目yarn serve 或者 npm run serve(命令不固定找package.json)
2、搭建模板项目 1工具准备 全局安装vue/cli模块包卡主可以ctrl c 停止重新来 yarn global add vue/cli

OR

npm install -g vue/cli查看Vue命令版本如果出现版本号就安装成功, 否则失败 vue -V2创建项目启动服务 概要用Vue命令, 创建一个脚手架项目, 并启动webpack开发服务器 步骤
创建项目项目名不能带大写字母, 中文和特殊符号

vue create是命令, vuecli-demo是项目名

vue create 01-vuecli-demo选择模板可以上下箭头选择, 回车确定, 弄错了ctrlc从第1步来 终端切换脚手架项目下, 启动服务 cd 01-vuecli-demo npm run serve # 或yarn serve浏览器中输入地址运行成功 3项目目录介绍 01-vuecli-demo │─node_modules 第三包文件夹 ├─public 放html文件的地方 │ ├─favicon.ico 网站图标 │ └─index.html index.html 模板文件 ③ ├─src 源代码目录 → 以后写代码的文件夹 │ └─assets 静态资源目录 → 存放图片、字体等 │ └─components 组件目录 → 存放通用组件 │ └─App.vue App根组件 → 项目运行看到的内容就在这里编写 ② │ └─main.js 入口文件 → 打包或运行第一个执行的文件 ① └─.gitignore git忽视文件 └─babel.config.js babel配置文件 └─jsconfig.json js配置文件 └─package.json 项目配置文件 → 包含项目名、版本号、scripts、依赖包等 └─README.md 项目说明文档 └─vue.config.js vue-cli配置文件 └─yarn.lock yarn锁文件由yarn自动生成的锁定安装版本虽然脚手架中的文件有很多但是重要的只有三个文件 main.js 入口文件App.vue App根组件index.html 模板文件 其他文件的说明可以参考webpack详解和npm与包
4运行流程 一切从main.js开始, 到index.html结束 3、搭建自定义项目模板 1搭建模板项目 把模板项目01-vuecli-demo复制一下名字改成02-vuecli-template开始自定义配置。 2自定义配置文件 vue.config.js 是一个可选的配置文件用于在标准配置外添加自定义配置。如果项目根目录中存在这个文件那么它会被 vue/cli-service 自动加载。这个文件应该导出一个包含了选项的对象。 module.exports {// 选项… }或者你也可以使用 vue/cli-service 提供的 defineConfig 帮手函数以获得更好的类型提示。 const { defineConfig } require(vue/cli-service)module.exports defineConfig({// 选项 })3webpack 配置 调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象该对象将会被合并入最终的 webpack 配置。 const { defineConfig } require(vue/cli-service) module.exports defineConfig({//其他配置configureWebpack: {devServer: { // 自定义服务配置open: true, // 自动打开浏览器port: 3000 // 默认端口3000}} })4eslint配置 eslint是一个插件, 内置在脚手架项目里内置的, 运行时检查你的代码风格例如如下在main.js 随便声明个变量但是不要使用运行后观察发现终端和页面都报错了这样的错误, 证明eslint发现你代码不严谨 要关闭检查只要在vue.config.js添加配置后重启即可 const { defineConfig } require(vue/cli-service) module.exports defineConfig({//其他配置lintOnSave: false //关闭eslint检查 })5清理欢迎界面 清理欢迎页面, 写我们自己代码assets 和 components 文件夹下的一切删除掉src/App.vue默认有很多内容, 可以全部删除留下框子 templatediv/div /templatescript export default {} /scriptstyle/style4、组件化 1组件化 组件化一个页面可以拆分成一个个组件每个组件有着自己独立的结构、样式、行为。好处便于维护利于复用 → 提升开发效率。组件分类普通组件、根组件。 2根组件 根组件整个应用最上层的组件包裹所有普通小组件。 3组件组成部分 语法高亮插件 三部分组成 template结构 有且只能一个根元素script: js逻辑style样式 (可支持less需要装包) 让组件支持less style标签lang“less” 开启less功能装包: yarn add less less-loader 5、组件注册 1组件注册的两种方式 局部注册只能在注册的组件内使用全局注册所有组件内都能使用组件使用方式当成html标签使用即可 组件名/组件名组件名规范大驼峰命名法 如 HmHeader技巧一般都用局部注册如果发现确实是通用组件再定义到全局。 2局部注册 创建 .vue 文件 (三个组成部分)在使用的组件内导入并注册 创建子组件HmHeader.vue templatediv classhm-header我是hm-header/div /templatescript export default {} /scriptstyle .hm-header {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #8064a2;color: white; } /style创建子组件HmMain.vue templatediv classhm-main我是hm-main/div /templatescript export default {} /scriptstyle .hm-main {height: 400px;line-height: 400px;text-align: center;font-size: 30px;background-color: #f79646;color: white;margin: 20px 0; } /style创建子组件HmFooter.vue templatediv classhm-footer我是hm-footer/div /templatescript export default {} /scriptstyle .hm-footer {height: 100px;line-height: 100px;text-align: center;font-size: 30px;background-color: #4f81bd;color: white; } /style创建父组件App.vue在父组件中引入子组件使用 templatediv classApp!– 头部组件 –HmHeader/HmHeader!– 主体组件 –HmMain/HmMain!– 底部组件 –HmFooter/HmFooter!– 如果 HmFooter tab 出不来 → 需要配置 vscode设置中搜索 trigger on tab → 勾上–/div /templatescript import HmHeader from ./components/HmHeader.vue import HmMain from ./components/HmMain.vue import HmFooter from ./components/HmFooter.vue export default {components: {// 组件名: 组件对象HmHeader: HmHeader,HmMain,HmFooter} } /scriptstyle .App {width: 600px;height: 700px;background-color: #87ceeb;margin: 0 auto;padding: 20px; } /style运行效果 3全局组件 创建 .vue 文件 (三个组成部分)main.js 中进行全局注册语法Vue.component(组件名, 组件对象) 创建子组件HmButton.vue templatebutton classhm-button通用按钮/button /templatescript export default {} /scriptstyle .hm-button {height: 50px;line-height: 50px;padding: 0 20px;background-color: #3bae56;border-radius: 5px;color: white;border: none;vertical-align: middle;cursor: pointer; } /style在main.js 中进行全局注册 import Vue from vue import App from ./App.vue // 编写导入的代码往代码的顶部编写(规范) import HmButton from ./components/HmButtonVue.config.productionTip false// 进行全局注册 → 在所有的组件范围内都能直接使用 // Vue.component(组件名组件对象) Vue.component(HmButton, HmButton)new Vue({render: h h(App), }).$mount(#app)在其他组件App.vue中使用 templateHmButton/HmButton /templatescript export default {} /scriptstyle/style6、综合案例-小兔鲜首页 1开发思路 分析页面按模块拆分组件搭架子 (局部或全局注册)根据设计图编写组件 html 结构 css 样式 (已准备好)拆分封装通用小组件 (局部或全局注册)将来 → 通过 js 动态渲染实现功能 2拆分模块 3模块组件 快捷链接组件XtxShortCut.vue template!– 快捷链接 –div classshortcutdiv classwrapperullia href# classlogin请先登录/a/lilia href#免费注册/a/lilia href#我的订单/a/lilia href#会员中心/a/lilia href#帮助中心/a/lilia href#在线客服/a/lilia href#span classiconfont icon-mobile-phone/span手机版/a/li/ul/div/div /templatescript export default {} /scriptstyle /* 快捷导航 / .shortcut {height: 52px;line-height: 52px;background-color: #333; } .shortcut .wrapper {display: flex;justify-content: flex-end; } .shortcut ul {display: flex; } .shortcut a {padding: 0 15px;border-right: 1px solid #999;color: #fff;font-size: 14px;line-height: 14px; } .shortcut .login {color: #5EB69C; } .shortcut .icon-mobile-phone {margin-right: 5px; }/style顶部导航组件XtxHeaderNav.vue template!– 头部导航 –div classheader wrapper!– logo –div classlogoh1a href#小兔鲜儿/a/h1/div!– 导航 –div classnavullia href#首页/a/lilia href#生鲜/a/lilia href#美食/a/lilia href#餐厨/a/lilia href#电器/a/lilia href#居家/a/lilia href#洗护/a/lilia href#孕婴/a/lilia href#服装/a/li/ul/div!– 搜索 –div classsearchspan classiconfont icon-search/spaninput typetext placeholder搜一搜 //div!– 购物车 –div classcartspan classiconfont icon-cart-full/spani2/i/div/div /templatescript export default {} /scriptstyle/ 头部导航 / .header {display: flex;margin: 22px auto; } .header .logo {margin-right: 40px;width: 200px;height: 88px;background-color: pink; } .header .logo a {display: block;width: 200px;height: 88px;background-image: url(~/assets/images/logo.png);font-size: 0; } .header .nav {margin-top: 33px;margin-right: 27px; } .header .nav ul {display: flex; } .header .nav li {margin-right: 48px; } .header .nav a {display: block;height: 34px; } .header .nav a:hover {border-bottom: 2px solid #5EB69C; } .header .search {display: flex;margin-right: 45px;margin-top: 33px;width: 170px;height: 34px;border-bottom: 2px solid #F4F4F4; } .header .search .icon-search {margin-right: 8px;font-size: 20px;color: #999; } .header .search input {flex: 1; } .header .search input::placeholder {color: #ccc; } .header .cart {position: relative;margin-top: 33px; } .header .cart .icon-cart-full {font-size: 24px; } .header .cart i {position: absolute;/ right: -5px; /left: 15px;top: 0;padding: 0 5px;height: 15px;background-color: #E26237;border-radius: 7px;font-size: 12px;color: #fffefe;line-height: 15px; }/style轮播区域组件XtxBanner.vue template!– 轮播区域 –div classbannerdiv classwrapper!– 图 –ul classpiclia href#img src/assets/images/banner1.png alt //a/lilia href#img src/assets/images/banner1.png alt //a/li/ul!– 侧导航 –div classsubnavullidivspana href#生鲜/a/spanspana href#水果/aa href#蔬菜/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#美食/a/spanspana href#面点/aa href#干果/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#餐厨/a/spanspana href#数码产品/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#电器/a/spanspana href#床品/aa href#四件套/aa href#被枕/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#居家/a/spanspana href#奶粉/aa href#玩具/aa href#辅食/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#洗护/a/spanspana href#洗发/aa href#洗护/aa href#美妆/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#孕婴/a/spanspana href#奶粉/aa href#玩具/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#服饰/a/spanspana href#女装/aa href#男装/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#杂货/a/spanspana href#户外/aa href#图书/a/span/divi classiconfont icon-arrow-right-bold/i/lilidivspana href#品牌/a/spanspana href#品牌制造/a/span/divi classiconfont icon-arrow-right-bold/i/li/ul/div!– 指示器 –olli classcurrenti/i/lilii/i/lilii/i/li/ol/div/div /templatescript export default {} /scriptstyle/ 轮播区域 / .banner {height: 500px;background-color: #F5F5F5 ; } .banner .wrapper {position: relative;overflow: hidden; } .banner .pic {display: flex;width: 3720px;height: 500px; } .banner .pic li {width: 1240px;height: 500px; } .banner .subnav {position: absolute;left: 0;top: 0;width: 250px;height: 500px;background-color: rgba(0,0,0,0.42); } .banner .subnav li {display: flex;justify-content: space-between;padding: 0 20px 0 30px;height: 50px;line-height: 50px; } .banner .subnav a, .banner .subnav i {color: #fff; } .banner .subnav li span:nth-child(1) {margin-right: 14px; } .banner .subnav li span:nth-child(2) a {margin-right: 5px; } .banner .subnav li span:nth-child(2) a {font-size: 14px; } .banner .subnav li:hover {background-color: #00BE9A; } .banner ol {position: absolute;right: 17px;bottom: 17px;display: flex; } .banner ol li {cursor: pointer;margin-left: 8px;padding: 4px;width: 22px;height: 22px;background-color: transparent;border-radius: 50%; } .banner ol li i {display: block;width: 14px;height: 14px;background-color: rgba(255,255,255,0.5);border-radius: 50%; } .banner ol .current {background-color: rgba(255,255,255,0.5); } .banner ol .current i {background-color: #fff; }/style新鲜好物组件XtxNewGoods.vue template!– 新鲜好物 –div classgoods wrapperdiv classtitlediv classlefth3新鲜好物/h3p新鲜出炉 品质靠谱/p/divdiv classrighta href# classmore查看全部span classiconfont icon-arrow-right-bold/span/a/div/divdiv classbdulBaseGoodsItem/BaseGoodsItemBaseGoodsItem/BaseGoodsItemBaseGoodsItem/BaseGoodsItemBaseGoodsItem/BaseGoodsItem/ul/div/div /templatescript export default {} /scriptstyle / 新鲜好物 / .goods .bd ul {display: flex;justify-content: space-between; } /style热门品牌组件XtxHotBrand.vue template!– 热门品牌 –div classhotdiv classwrapperdiv classtitlediv classlefth3热门品牌/h3p国际经典 品质认证/p/divdiv classbuttona href#i classiconfont icon-arrow-left-bold/i/aa href#i classiconfont icon-arrow-right-bold/i/a/div/divdiv classbdulBaseBrandItem v-foritem in 5 :keyitem/BaseBrandItem/ul/div/div/div /templatescript export default {} /scriptstyle / 热门品牌 / .hot {margin-top: 60px;padding-bottom: 40px;overflow: hidden;background-color: #F5F5F5; } .hot .title {position: relative;margin-bottom: 40px; } .hot .button {display: flex;position: absolute;right: 0;top: 47px; } .hot .button a {display: block;width: 20px;height: 20px;background-color: #ddd;text-align: center;line-height: 20px;color: #fff; } .hot .button a:nth-child(2) {margin-left: 12px;background-color: #00BE9A; } .hot .bd ul {display: flex;justify-content: space-between; } /style最新专题组件XtxTopic.vue template!– 最新专题 –div classtopic wrapperdiv classtitlediv classlefth3最新专题/h3/divdiv classrighta href# classmore查看全部span classiconfont icon-arrow-right-bold/span/a/div/divdiv classtopic_bdullia href#div classpicimg src/assets/images/topic1.png alt /div classinfodiv classlefth5吃这些美食才不算辜负自己/h5p餐厨起居洗护好物/p/divdiv classright¥span29.9/span起/div/div/divdiv classtxtdiv classleftpspan classiconfont icon-favorites-fill red/spani1200/i/ppspan classiconfont icon-browse/spani1800/i/p/divdiv classrightspan classiconfont icon-comment/spani246/i/div/div/a/lilia href#div classpicimg src/assets/images/topic2.png alt /div classinfodiv classlefth5吃这些美食才不算辜负自己/h5p餐厨起居洗护好物/p/divdiv classright¥span29.9/span起/div/div/divdiv classtxtdiv classleftpspan classiconfont icon-fabulous/spani1200/i/ppspan classiconfont icon-browse/spani1800/i/p/divdiv classrightspan classiconfont icon-comment/spani246/i/div/div/a/lilia href#div classpicimg src/assets/images/topic3.png alt /div classinfodiv classlefth5吃这些美食才不算辜负自己/h5p餐厨起居洗护好物/p/divdiv classright¥span29.9/span起/div/div/divdiv classtxtdiv classleftpspan classiconfont icon-fabulous/spani1200/i/ppspan classiconfont icon-browse/spani1800/i/p/divdiv classrightspan classiconfont icon-comment/spani246/i/div/div/a/li/ul/div/div /templatescript export default {} /scriptstyle/ 最新专题 / .topic {padding-top: 60px;margin-bottom: 40px; } .topic_bd ul {display: flex;justify-content: space-between; } .topic_bd li {width: 405px;height: 355px; } .topic_bd .pic {position: relative;width: 405px;height: 288px; } .topic_bd .txt {display: flex;justify-content: space-between;padding: 0 15px;height: 67px;line-height: 67px;color: #666;font-size: 14px; } .topic_bd .txt .left {display: flex; } .topic_bd .txt .left p {margin-right: 20px; } .topic_bd .txt .left .red {color: #AA2113; } .topic_bd .info {position: absolute;left: 0;bottom: 0;display: flex;justify-content: space-between;padding: 0 15px;width: 100%;height: 90px;background-image: linear-gradient(180deg, rgba(137,137,137,0.00) 0%, rgba(0,0,0,0.90) 100%); } .topic_bd .info .left {padding-top: 20px;color: #fff; } .topic_bd .info .left h5 {margin-bottom: 5px;font-size: 20px; } .topic_bd .info .right {margin-top: 35px;padding: 0 7px;height: 25px;line-height: 25px;background-color: #fff;color: #AA2113;font-size: 15px; } /style版权底部组件XtxFooter.vue template!– 版权底部 –div classfooterdiv classwrapperdiv classserviceullispan/spanp价格亲民/p/lilispan/spanp物流快捷/p/lilispan/spanp品质新鲜/p/lilispan/spanp售后无忧/p/li/ul/divdiv classhelpdiv classleftdldt购物指南/dtdda href#购物流程/a/dddda href#支付方式/a/dddda href#售后规则/a/dd/dldldt配送方式/dtdda href#配送运费/a/dddda href#配送范围/a/dddda href#配送时间/a/dd/dldldt关于我们/dtdda href#平台规则/a/dddda href#联系我们/a/dddda href#问题反馈/a/dd/dldldt售后服务/dtdda href#售后政策/a/dddda href#退款说明/a/dddda href#取消订单/a/dd/dldldt服务热线/dtdda href#在线客服span classiconfont icon-customer-service/span/a/dddda href#客服电话 400-0000-000/a/dddda href#工作时间 周一至周日 8:00-18:00/a/dd/dl/divdiv classrightullidivimg src/assets/images/wechat.png alt //divp微信公众号/p/lilidivimg src/assets/images/app.png alt //divpAPP下载二维码/p/li/ul/div/divdiv classcopyrightpa href#关于我们/a|a href#帮助中心/a|a href#售后服务/a|a href#配送与验收/a|a href#商务合作/a|a href#搜索推荐/a|a href#友情链接/a/ppCopyRight © 小兔鲜/p/div/div/div /templatescript export default {} /scriptstyle / 版权底部 / .footer {height: 580px;background-color: #f5f5f5; } .footer .service {padding: 60px 0;height: 180px;border-bottom: 1px solid #e8e8e8; } .footer .service ul {display: flex;justify-content: space-around; } .footer .service li {display: flex;line-height: 58px; } .footer .service span {display: block;margin-right: 20px;width: 58px;height: 58px;background-image: url(~/assets/images/sprite.png); } .footer .service li:nth-child(2) span {background-position: 0 -58px; } .footer .service li:nth-child(3) span {background-position: 0 -116px; } .footer .service li:nth-child(4) span {background-position: 0 -174px; } .footer .service p {font-size: 28px; } .footer .help {display: flex;justify-content: space-between;margin-top: 60px; } .footer .help .left {display: flex; } .footer .help .left dl {margin-right: 84px; } .footer .help .left dt {margin-bottom: 30px;font-size: 18px; } .footer .help .left dd {margin-bottom: 10px; } .footer .help .left dd a {color: #969696; } .footer .help .right ul {display: flex;align-items: flex-start; } .footer .help .right li:nth-child(1) {margin-right: 55px;text-align: center; } .footer .help .right div {margin-bottom: 10px;width: 120px;height: 120px;color: #969696; } .icon-customer-service {margin-left: 3px;color: #00be9a; } .copyright {margin-top: 100px;text-align: center;color: #a1a1a1; } .copyright p {margin-bottom: 15px; } .copyright a {margin: 0 10px;color: #a1a1a1; } /style4公共样式 base.css / 去除常见标签默认的 margin 和 padding */

• {margin: 0;padding: 0;box-sizing: border-box; }/* 设置网页统一的字体大小、行高、字体系列相关属性 / body {font: 16px/1.5 Microsoft Yahei,Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;color: #333; }/ 去除列表默认样式 / ul, ol {list-style: none; }/ 去除默认的倾斜效果 / em, i {font-style: normal; }/ 去除a标签默认下划线并设置默认文字颜色 / a {text-decoration: none;color: #333; }/ 设置img的垂直对齐方式为居中对齐去除img默认下间隙 / img {width: 100%;height: 100%;vertical-align: middle; }/ 去除input默认样式 / input {border: none;outline: none;color: #333; }h1, h2, h3, h4, h5, h6 {font-weight: 400; }/ 双伪元素清除法 / .clearfix::before, .clearfix::after {content: ;display: table; } .clearfix::after {clear: both; }common.css / 公共的全局样式 */ .wrapper {margin: 0 auto;width: 1240px; }.title {display: flex;justify-content: space-between;margin-top: 40px;margin-bottom: 30px;height: 42px; } .title .left {display: flex;align-items: flex-end; } .title .left h3 {margin-right: 35px;font-size: 30px; } .title .left p {padding-bottom: 5px;color: #A1A1A1; } .title .right {line-height: 42px; } .title .right .more {color: #A1A1A1; } .title .right .iconfont {margin-left: 10px; }5通用组件 品牌组件BaseBrandItem.vue templateli classbase-brand-itema href#img src/assets/images/hot1.png alt //a/li /templatescript export default {} /scriptstyle .base-brand-item {width: 244px;height: 306px; } /style商品组件BaseGoodsItem.vue templateli classbase-goods-itema href#div classpicimg src/assets/images/goods1.png alt //divdiv classtxth4KN95级莫兰迪色防护口罩/h4p¥ span79/span/p/div/a/li /templatescript export default {} /scriptstyle .base-goods-item {width: 304px;height: 404px;background-color: #EEF9F4; } .base-goods-item {display: block; } .base-goods-item .pic {width: 304px;height: 304px; } .base-goods-item .txt {text-align: center; } .base-goods-item h4 {margin-top: 17px;margin-bottom: 8px;font-size: 20px; } .base-goods-item p {font-size: 18px;color: #AA2113; } .base-goods-item p span {font-size: 22px; } /style在main.js中全局注册 import Vue from vue import App from ./App.vue import ./styles/base.css // css 样式重置 import ./styles/common.css // 公共全局样式 import ./assets/iconfont/iconfont.css // 字体图标的样式import BaseGoodsItem from ./components/BaseGoodsItem import BaseBrandItem from ./components/BaseBrandItem Vue.component(BaseGoodsItem, BaseGoodsItem) Vue.component(BaseBrandItem, BaseBrandItem)Vue.config.productionTip falsenew Vue({render: h h(App), }).$mount(#app)6组件组装 父组件App.vue组装子组件 templatediv classApp!– 快捷链接 –XtxShortCut/XtxShortCut!– 顶部导航 –XtxHeaderNav/XtxHeaderNav!– 轮播区域 –XtxBanner/XtxBanner!– 新鲜好物 –XtxNewGoods/XtxNewGoods!– 热门品牌 –XtxHotBrand/XtxHotBrand!– 最新专题 –XtxTopic/XtxTopic!– 版权底部 –XtxFooter/XtxFooter/div /templatescript import XtxShortCut from ./components/XtxShortCut.vue import XtxHeaderNav from ./components/XtxHeaderNav.vue import XtxBanner from ./components/XtxBanner.vue import XtxNewGoods from ./components/XtxNewGoods.vue import XtxHotBrand from ./components/XtxHotBrand.vue import XtxTopic from ./components/XtxTopic.vue import XtxFooter from ./components/XtxFooter.vue export default {data () {return {count: 0}},components: {XtxShortCut,XtxHeaderNav,XtxBanner,XtxNewGoods,XtxHotBrand,XtxTopic,XtxFooter,} } /scriptstyle/style7、组件组成部分详解 1三部分组成 template结构 有且只能一个根元素script: js逻辑style样式 (可支持less需要装包) 2scoped解决样式冲突 默认情况写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。 全局样式默认组件中的样式会作用到全局局部样式可以给组件加上 scoped 属性可以让样式只作用于当前组件 scoped原理 当前组件内标签都被添加 data-v-hash值 的属性css选择器都被添加 [data-v-hash值] 的属性选择器最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到 scoped原理演示 创建子组件Panel.vue templatedivh4这里是子组件/h4/div /templatescript export default {}; /scriptstyle div {background-color: red; } /style父组件App.vue中使用子组件 templatedivh4这个是父组件/h4panel/panel/div /templatescript import Panel from ./components/Panel.vue export default {components: { Panel }, } /scriptstyle/style效果父组件的背景也红了 子组件Panel.vue样式加上scoped templatedivh4这里是子组件/h4/div /templatescript export default {}; /scriptstyle scoped div {background-color: red; } /style效果父组件背景未受影响 查看样式添加了属性 3data必须是一个函数 一个组件的 data 选项必须是一个函数。目的是为了保证每个组件实例维护独立的一份数据对象。每次创建新的组件实例都会新执行一次 data 函数得到一个新对象。 data演示 创建一个子组件BaseCount.vue templatediv classbase-countbutton clickcount—/buttonspan{{ count }}/spanbutton clickcount/button/div /templatescript export default {// data() {// console.log(函数执行了)// return {// count: 100,// }// },data: function () {return {count: 100,}}, } /scriptstyle .base-count {margin: 20px; } /style父组件App.vue使用子组件 templatediv classappbaseCount/baseCountbaseCount/baseCountbaseCount/baseCount/div /templatescript import baseCount from ./components/BaseCount export default {components: {baseCount,}, } /scriptstyle /style