Vue项目随笔—— 商城

Vue cli 项目笔记

public 中 index.html 是整个cli 唯一的单页面

README 项目说明文件

src 开发环境下的项目源码 操作的就是src中的代码

components 公共组件 公共组件放到components

router 路由的管理

store 全局状态管理器 任何组件产生的状态都可以拿到这个状态

views 所有视图都在这个文件 页面组件文件夹 页面组件放到views

App.vue 项目的顶层组件 最大的组件 全局所有组件都要加载到这个组件当中

main.js 项目主文件 启动文件 引入各个模块 合并到一块 new Vue 实例挂载到app的元素上 ( 挂载到 public 中的index .html 中的 id为 #app 元素上 )

registerServiceWorker 开启一个node 服务器

计算公共适配尺寸

100vw 等于设计稿宽度 计算出1px =? vw 假设设计稿宽度375

( 375 / 100 ) *100 = 计算出100像素 = ? vw

设置根元素的font-size

尺寸会随着尺寸变化而变化

flex 头底固定 中间滚动自适应( 圣杯布局 )

在App.vue 中设置好页面结构


顶层元素html 和 body 设置高度100%

然后页面组件内 设置公共父元素 设置 继承父级的高度 设置弹性盒布局

height: 100%;
    display: flex;
    flex-direction: column;

设置头部和底部 宽度100% ,固定高度

然后让内容区域 flex: 1;自行撑开

如果想路由跳转:

import from ' vue ' 先引入Vue 实例 

import vueRouter from 'vue-router'  再引入路由

Vue.use(  VueRouter  )注册路由

const router = new VueRouter( )  得到router 实例

就可以使用router的方法

一个单页面组件 包阔 结构 行为 样式

在单页面组件中 .vue后缀 组件当中 通过 暴露一个对象 就是Vue组件的实例

< script >

export default { data( ){ } … }

import 引入组件 from ’ webpack 自动配置了 @ 代表根目录 src

注册

< /script >

写入 vue 的选项 比如 data methodes

在单页面组件中 样式写在style标签 中写入 通过 lang 属性编写style 样式

scoped 属性 将当前样式 只给当前的组件添加 只在当前组件生效

< style lang = " scss " >

路由实例中

  {
    path: '/about',
    name: 'About',
    component: () => import(     /* webpackChunkName: "about" */  注释是进行分类         '../views/About.vue')
   因为  /* webpackChunkName: "about" */ 分组about
   如果后续还有相同类别的组件 如果相同的话 它后面文件的地址需要
   									以About + 开头后面组件名
   									渲染的路由组件
  }

就是将这个地址的注册到这个组件

router - link 路由的跳转的组件 接受一个to属性 发送一个路由请求 还接受一个 tag 属性 选择默认后期选择渲染成什么标签

组件渲染的容器 将组件渲染到router - view 中

选择渲染谁 后者替换前者页面 所以vue是单页面组件

**在views 中先创建文件夹 在创建 页面vue组件 **

在App .vue 中 创建四个router-link 点击组件哪个渲染 router - view

通过 data中创建一个数组 里面存储要渲染的数据 比如图片 名称 路由 等等

然后通过 v-for 进行渲染

公共组件

在components中定义 定义完之后

1 . 在需要调用的组件中 script 标签内 通过 import 引入

import 组件名 from ' 组件地址 '  可以通过@ 默认访问根 也就是 src
  1. 在引入的组件中 script 标签内 注册 ( vue选项也要暴露 )

                    
                    

你可能感兴趣的:(Vue项目随笔—— 商城)