9.8学习vue项目文件的组成

发布于:2022-12-23 ⋅ 阅读:(265) ⋅ 点赞:(0)

一、上午修改好home页面的两个logo的backgroud和登陆时的errr-logo 

下次遇到类似的问题直接就是替换assets里面的文件即可,主要 查看原始图片的属性大小然后去到ps软件中取剪切画布的大小。找到style样式文件。从不同位置引入的样式:深入理解VUE样式style层次分析 - 走看看

(1)、favicon.ico一定要背景图层扣掉,不然会有背景色。

(2)、终端运行命令的查看

(3)、查看项目文件运行页面的引用的公共header部分,不一定是在某个页面中,而是以header命令.vue或者是最外层index.js文件中

(4)less:=css文件.样式文件,在vue界面的style标签内引入,要属性lang=less

一整个文件都是index的样式。

 vue项目引入less文件_快乐的小三菊的博客-CSDN博客_vue引入less文件

<style lang="less">
  @import url("./login.less");
</style>

(5).vue项目文件的深度解析

src我们要开发的目录,基本上要做的事情都在这个目录里。

 --其下的assets静态文件

--conponent组件目录,存放组件文件,可以不用。

--App.vueApp.vue -- 项目入口组件,我们也可以直接将组件写这里,而不使用 components 目录。

一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)

vue通常用es6来写,用export default导出

(6)、整个大项目打包的时候node_modolues是不用打包的。

因为node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹

(7)修改icon

(8)、400*130的logo.设计界面运行时出现的界面问题首先看电脑的屏幕百分比、会影响运行时看到的界面适配情况,按F12检查界面的大小即可

(9)、div嵌套的情况

图片让出上面多少是y的值。background-position-y: 100px.一般是gouyigelogo的位置,想让底部留有空白,图片底部:  height: 95%;//设置div高度设置div class的高度即可。

二、项目学习

看完vue框架文档十个视频有个基础了解

用外网的第二版看每一界面的对应情况。 代码的各种事件和封装的情况。

看框架文档:前端重点关心有views前端能直接看到的页面、components框架封装的组件、route配置路由这样才有前端的网页地址才能打开 核心是js文件:要实现扩展哪些功能,extents中 是代码生成器的文件。

三每天学习三个vue原理

1、v-model的原理

(1)、:视图更新,影响数据。1状态值→输入框input.value

(2)当input有值的时候:监听它的input事件 3.lazing是onchanged事件否则是oninput事件。监听文本框内容自己修改状态。试图驱动数据更改就是v-mode的

2、什么是vue 渐进式框架,声明式渲染?-组件系统component-route客户端路由-vuex集中式状态管理-项目构建,对一个模块及逆行开发由浅入深

3、¥router与$route 

router是全局的实例对象,包含所有路由

$route是局部路由跳转对象

$routes 是多个跳转对象。

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到