Vue学习记录-画页面
webstorm因为之前开发ReactNative的时候,选择了webstorm,这回转战Vue,自然还是用它。如果什么也不做的话,打开Vue工程,编辑区域基本上没有语法高亮。怎么办呢? 安装插件(以mac版本为例,window下面应该大同小异)1. 打开偏好设置,从左边找到Plugins 2. 点击Browse repositories...,然后搜索Vue,进行安装 3. 添加Vue模板 4. 重启webstorm,准备工作到此结束 ?项目结构配置路由,根路径显示Login?import Vue from 'vue''vue-router''@/modules/Login'Vue.use(Router)
export <span style="color: #0000ff">default <span style="color: #0000ff">new<span style="color: #000000"> Router({routes: [ { path: '/'<span style="color: #000000">,name: 'Login'<span style="color: #000000">,component: Login } ] }) 编写Login.vue先把代码贴一下,过程慢慢看 过程1:怎么让一个图片作为背景颜色iOS原生开发: 方案1:图片作为view的backgroundcolor; 方案2:一个UIImageView同时位于.subviews[0]; ReactNative开发: 方案1: 方案2:通过positon、zIndex将图片压到最底层; ?Vue方案: 方案1:作为div的背景图片,但是最后我没有解决图片的拉伸问题; 方案2:将背景图单独一个div,其他内容单独一个div,然后通过zIndex压到最后
{ /* 其他内容所在的div,包括输入框、忘记密码、登录按钮 */:;:;:;:;:;:;:;
}background-image { /背景图所在的div/<span style="color: #ff0000">
} ?过程2:输入框,怎么让input撑满剩余部分呢在ReactNative里面,可以通过flex:1,让一个组件撑满,放到div/css里面,我就不知道怎么处理了。因为暂时不影响使用,只是简单的做了处理
|