UNIAPP
导入文件
在使用 src="vue/js" 导入文件时，确保路径正确。
.el 类只对第一个生效
要确保 .el 类对所有元素都生效，可以使用选择器 .el 前面加上元素类型，例如 div.el。
数据声明
避免刻意使用 _ 和 ￥ 声明数据，因为在 Vue 源码中会使用这些符号。
v-指令
使用 v- 开头的指令来操作 DOM，例如 v-bind, v-on。
响应式
Vue 中的响应式是指数据的变化会影响到视图的更新，确保数据和视图保持同步。
Vuex、Router、Axios
这些是常用的 Vue.js 生态系统的组件，分别用于状态管理、路由和 HTTP 请求。
// store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
},
},
actions: {
incrementAsync({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
},
},
});
// router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
Vue.use(VueRouter);
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = new VueRouter({
routes,
});
export default router;
// 使用 Axios 发送 GET 请求
import axios from 'axios';
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
// 使用 Axios 发送 POST 请求
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1,
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error posting data:', error);
});
Flex布局
Flex 布局是一种灵活的布局方式，可以实现各种复杂布局需求。
display: flex：使用 flex 布局
flex-wrap：控制是否换行
align-items：交叉轴对齐方式
align-content：多轴线对齐方式
justify-content：主轴对齐方式
flex-grow、flex-shrink、flex-basis：控制元素的放大、缩小和基础大小
快捷方式
使用 flex-grow: 1 可以让元素自动拉伸，flex-shrink: 0 可以防止元素缩小。
登录保持
通过 Token 实现登录保持，客户端传递用户名密码到服务器端进行鉴权，成功后服务器端返回 Token 字符串，客户端带着 Token 发送请求到服务端，服务端验证 Token 的有效性。
JWT
JSON Web Token（JWT）是一种用于传输信息的安全方式，包含 Header、Payload 和 Signature。
页面传参
页面传参可以通过 URL 参数传递，也可以使用事件传递数据。
组件调用
使用自定义组件可以提高代码复用性，父子组件通信可以通过 props 和事件进行。
判断环境与平台
通过 process.env.NODE_ENV 可以判断开发环境和生产环境，通过条件编译可以判断不同平台。
跨端兼容
通过条件编译和平台判断，可以实现跨端兼容。
全局定义及通信
全局定义组件和事件可以让不同组件之间进行通信。
