听说你想挑战下前端开发（一）？

Fmbah安徐正静
97 阅读5分钟

回滚我这小7年工作的经历，从最初全栈开发三年，到目前只关注后端技术，倒也不说服务端的技术上强了多少，我只是想说自己真的忘记了前端如何开发，讲真的，开发分前后让我觉得自己越来越有局限，这也是为什么打算重新开始这块的内容，这篇文章是记录我从零开始，希望自己可以坚持下去，加油，听油们~

现在市面上都流行一次开发，多端运行，我也索性一步到位，焦点是uni-app框架，下面所有的内容，都是与之相关的！

Vue环境初始化

``
# 全局安装cnpm
sudo npm i -g cnpm 
# 查看cnpm安装路径
where cnpm
# 查看镜像
cnpm config get registry
# 执行安装依赖动作
cnpm i
# 安装vue/cli全局依赖
cnpm install -g @vue/cli@4.5.15
# 创建项目模板
vue create -p dcloudio/uni-preset-vue test-uniapp-project
# 运行项目
cnpm run serve

改变node的包存储地址： npm config set prefix "D:\Program Files\nodejs\node_global" npm config set cache "D:\Program Files\nodejs\node_cache"

创建好了uni-app应用后，我这里也把官方文档的目录结构发下，方便后边功能开发的认知，省的一看目录，发觉都是自己不认识的东西，胆怯了！

┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意： 静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)。
├─wxcomponents          存放小程序组件的目录，详见
├─nativeplugins         App原生插件 详见
├─unpackage             非工程代码，一般存放运行或发行的编译结果
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量

重点是pages、static、main.js、App.vue、manifest.json、pages.json这几个目录或者文件。

CSS相关网站

CSS 参考书：https://cssreference.io/css-grid/
CSS 灵感：https://chokcoco.github.io/CSS-Inspiration/#/
交互式在线 CSS 速记表：https://htmlcheatsheet.com/css/
CSS 小花招：https://css-tricks.com/
不过脑子的动效，不过看起来很“猛”：https://tholman.com/obnoxious/
CSS 抖动特效：https://elrumordelaluz.github.io/csshake/
CSS 动画集，可自由调节动画参数，生成代码片段：https://animista.net/play/
CSS 鼠标悬浮动画：https://ianlunn.github.io/Hover/
通过给萝卜浇水，学习 CSS 网格布局：https://cssgridgarden.com/
通过做饭，练习 CSS 选择器：https://flukeout.github.io/
送小青蛙回家，学习 flex 布局：https://flexboxfroggy.com/
配网站色：https://mycolor.space/
还是配色网站：https://clrs.cc/
CSS 渐变色：https://cssgradient.io/

Vue语法简述

UNI-APP开始学习

2022-09-05

  • MVC（后端设计思想） & MVVM（Model、View、ViewModel） image.png

  • template（View）|script（ViewModel、Model）|style，以上三个标签在一个页面有且只有一个

  • debugger

  • pages.json中配置启动首项页面

  • 2upx = 1px，类似字体大小、board边框都要使用px

  • v-if、v-show区别，前者是否会在dom中移除，后者display:none

  • view、block区别，前置会把标签输出，后者仅会将变量值输出

  • v-for中:key保证组件和数据捆绑唯一，嵌套循环时index需要指定不同的值

  • 条件编译（注释行#ifdef H5 #endif）

  • Flux布局

    • flux-direction（主轴方向）（row column）
    • flex-wrap（容器内的元素换行）（nowrap wrap ）
    • justify-content（对齐方式）（flux-start）
    • align-items（交叉轴对齐方式）（stretch）
    • align-content（设置轴线的对齐方式）（flex-start stretch）
    • order（控制元素顺序，由小到大）
    • flex-grow（控制元素放大比例）
    • flex-shrink（控制元素缩小比例）
    • flex-basis（设置元素固定或自动空间的占比）
    • align-self（重写align-items属性）

  • App.vue中完善应用纬度配置（生命周期、通用的css样式）

    • common-page { width: 100%; height: 100%; background-color: beige; }

  • 轮播图

  • 原生导航栏

  • 发起请求

    • 及时封装通用的js，便于代码的复用
    • 引入外部JS
      • import common from url 在页面中导入url中的变量
      • export default {} 暴露js中的属性
    • 通过挂载的方式获取通用属性
      • Vue2
      • Vue3

  • 跨域

    • 由于我使用的nginx作为模拟数据返回，在ng里面需要配置跨域内容 image.png
    • 静态资源配置，图床或者Ng静态资源服务器 image.png

  • 小程序需要配置合法域名

  • 写CSS布局时，类似堆放盒子一样

  • 可滑动区域

  • 定义组件

    • 这里我们使用easycom方式定义组件
      • 项目根目录下创建components目录，用来存放所有组件
      • easycom约定方式，components/组件名称/组件名称.vue，按照这个方式将组件目录创建完成后，重新编译项目，uni会自动将使用的组件挂载至Vue全局实例中，便于所有页面按需使用
      • 使用方式，同Vue；<组件名称></组件名称/>
      • 如何将参数从父页面传递到子页面呢？
        • 简单的很哦，只需要在父页面将定义好传递参数值，如：<组件名称 customVal="我要传递给组件了~"></组件名称/>
        • 组件侧在script中增加声明变量后，就可以在组件内随意使用了~，组件中用来接收父页面参数的方式，是使用props属性，具体方法可以参照下官方链接哈

  • 赞一波网站，电影预告片，Apple电影预告片

  • 疑问点：position：absolute；display: inline-block；如何很快的取色；

  • 动画

  • dplayer

=== 分割线 ======

avatar
文章
阅读
粉丝