vue+uniapp+Stylus 实战小程序项目

小猿_00

已于 2023-05-15 20:16:17 修改

阅读量432

点赞数

文章标签： vue.js 前端 javascript

于 2023-01-30 17:01:12 首次发布

本文链接：https://blog.csdn.net/weixin_49853850/article/details/128805537

版权

实战小程序

一、前言

💻 时间过的很快，转眼间大三就已经去了一学期;下学期马上就大三下了，还有一学年就要毕业了，学了这莫就的编程，感觉自己
很多地方还需要进阶学习。通过这段时间的小程序学习，让我也是收获颇满，认识到了自己的不足，下面我将介绍一下学习的一些内容。

二、开发工具

🔎 微信开发者工具和HBuilder X

三、涉及技术栈

Vue.js

💌 Vue是当前前端最流行的一门开发技术，是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,
Vue被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

VueX

⭕ Vuex 是一个专为Vue.js 应用程序开发的状态管理模式+库。它采用集中式存储管理应用的所有组件的状态，
并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex核心

️💦 Vuex中一共有五个状态 State Getter Mutation Action Module

State

⏺️ 提供唯一的公共数据源,所有共享的数据统一放到store的state进行储存,与data有些一样;那么这个怎么使用呢？

方法一：
- this.$store.state.全局数据名称
方法二：
- 1.导入mapstate函数
- 需要数据的页面引入：import { mapState } from “vuex”
- 2.挂在Store
- 引入仓库文件
  import store from “./store/index.js”
- const app = new Vue({
  …App,
  store
  })
- 3.使用mapstate
- computed:{
  …mapState(‘home’,[‘indexData’])
  } 注意:这里的home是分模块;

Getter

⏺ Getter和Vue中的computed,进行缓存，对于Store中的数据进行加工处理形成新的数据.

Mutation

⏺ 更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。Mutation 必须是同步函数

    methods:{
    语法:...mapMutations('模块名',['方法'])  
    ...mapMutations('cart',['changeCountMutaion','changeSelectMutaion','changeAllSelectedMutaion'])
    }
    使用方法同上面一样.

Action

⏺ Action 类似于mutation,不同在于:

第一点：
- Action 提交的是 mutation，而不是直接变更状态。
第二点:
- Action 可以包含任意异步操作。

例子:

   // 发起请求 那首页数据
    async getIndexDataActions({commit}){
        // 1.执行异步任务
        const res = await request('/getIndexData') //小程序
        // 2.commit触发mutations 
        commit('changeIndexDataMutations',res.indexData)
    }

Module

⏺ 由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。Vuex 允许我们将 store 分割成模块（module）。

    export default {
        namespaced:true,//分模块
        state,
        mutations,
        actions,
        getters
    }

⏺ 这里的模块就是Mutation就是那里的一个解释:语法:…mapMutations(‘模块名’,[‘方法’]);这些也就是我一个人的理解，如果有不懂的地方，请参考官网:Vuex官网

Stylus

⏺ CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更见简洁，适应性更强，代码更直观等诸多好处。
从个人理解层面上来讲，Stylus中的语法非常的简洁，而且Stylus中还可以像Js一样，去写逻辑，非常的完善；相比于Sass、Less来讲，我个人非常的喜欢Stylus

Stylus变量

⏺ stylus对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，
但是在stylus中不能用@开头

      font-size = 14px
      body
         font font-size Arial, sans-serif
      
      //编译为：
      body {
         font: 14px Arial, sans-serif;
      }