新安网站建设,潍坊外贸网站优化,软件开发报价单,什么都不会怎么做网站#x1f4dd;个人主页#xff1a;五敷有你 #x1f525;系列专栏#xff1a;Vue⛺️稳重求进#xff0c;晒太阳 工程化开发脚手架Vue CLI
基本介绍
Vue Cli是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子【集成了we… 个人主页五敷有你 系列专栏Vue⛺️稳重求进晒太阳 工程化开发脚手架Vue CLI
基本介绍
Vue Cli是Vue官方提供的一个全局命令工具
可以帮助我们快速创建一个开发Vue项目的标准化基础架子【集成了webpack配置】
使用步骤
全局安装一次yarn global add vue/cli查看Vue版本 vue --version创建项目架子 vue create project-name(项目名非中文)启动项目 yarn serve 或者npm run serve(找package.json)
脚手架目录文件介绍项目运行流程 组件化开发跟组件
组件化一个页面可以拆分成一个个小组件每个组件有着自己独立的结构样、式、行为 好处便于维护利于复用 -提升开发效率组件分类普通组件、跟组件
App.vue文件单文件组件的三个组成部分
template:结构有且只能有一个根元素scriptjs逻辑style样式可支持less需要装包 全局样式默认组件中的样式会作用到全局局部样式可以给组件加上scoped属性可以让样式只作用于当前组件 scoped原理 给当前组件模板的所有元素都会被添加上一个自定义属性data-v-hash值css选择器会添加【data-v-hash值】的属性选择器最终效果必须是当前组件的元素才会有这个自定义属性才会被这个样式作用到
templatediv idappimg altVue logo src./assets/logo.pngHelloWorld msgWelcome to Your Vue.js App//div
/templatescript
import HelloWorld from ./components/HelloWorld.vue//导出的是当前组件的配置项
export default {!--写逻辑--name: App,components: {HelloWorld}
}
/scriptstyle
#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普通组件的注册使用
组件注册的两种方式
局部注册
1.创建.vue文件三个组成部分
templatedivbutton我是按钮/button/div
/template 2.在使用的组件内导入并注册
templatediv idappimg altVue logo src./assets/logo.pngHMhead/HMheadHMbody/HMbodyHMfooter/HMfooter/div
/templatescriptimport HMbodyVue from ./components/HMbody.vue
import HMfooterVue from ./components/HMfooter.vue
import HMheadVue from ./components/HMhead.vueexport default {name: App,components: {HMhead:HMheadVue,HMbody:HMbodyVue,HMfooter:HMfooterVue}
}
/scriptstyle
#app {height: 1200px;font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;background: black;
}
/style全局注册
1.创建.vue文件三个组成部分
templatedivbutton我是按钮/button/div
/template 2.main.js中进行全局注册
导入import HMbutton from ./components/HMbutton.vueVue.component(HMbutton,HMbutton)
import Vue from vue
import App from ./App.vue
import HMbutton from ./components/HMbutton.vue
Vue.config.productionTip false//全局注册组件
Vue.component(HMbutton,HMbutton)new Vue({render: h h(App),
}).$mount(#app)使用
当成html标签使用’‘
注意
组件名的规范大驼峰命名法页面开发思路分析页面按照模块拆分组件搭架子局部或全局注册根据设计图编写组件html结构css样式拆分封装通用小组件局部或全局注册将来--通过js动态渲染实现功能
