创建项目

如何使用 mddir 命令生成目录结构树

规范文件目录

## 默认目录
|-- undefined|-- .gitignore|-- babel.config.js|-- jsconfig.json|-- package.json|-- README.md|-- vue.config.js|-- yarn.lock|-- 开发文档.md|-- public|   |-- favicon.ico|   |-- index.html|-- src|-- App.vue|-- main.js|-- assets|   |-- logo.png|-- components|-- HelloWorld.vue## 完善目录
|-- undefined|-- .gitignore|-- babel.config.js|-- directoryList.md|-- jsconfig.json|-- package.json|-- README.md|-- vue.config.js|-- yarn.lock|-- 开发文档.md|-- mock/                // 模拟数据|-- public/|   |-- favicon.ico|   |-- index.html|-- src/|   |-- App.vue|   |-- main.js|   |-- api/|   |-- assets/         // 静态资源目录|   |   |-- logo.png|   |   |-- icons  		// svg|   |   |-- images|   |-- components/     // 公共组件目录|   |   |-- HelloWorld.vue|   |-- router/         // 路由配置目录|   |-- store/          // 状态管理目录|   |-- styles/         // 公共样式目录|   |-- utils/          // 工具函目录|   |-- views/          // 页面目录|-- static              // 静态资源目录，不会被打包

安装必要插件

yarn add vue-router --save
配置一下路由，显示在页面中
App.vue

views/Home.vue 随便写点文字
router/index.js

import { createRouter, createWebHashHistory } from "vue-router";
const routes = [{path: "/",name: "home",component: () => import("../views/Home.vue"),},
];const router = createRouter({history: createWebHashHistory(),routes,
});export default router;

main.js

import router from "@/router/index";const app = createApp(App);
app.use(router);
app.mount("#app");

yarn add vuex@next --save

yarn add less less-loader --save

yarn add axios --save

yarn add vue-axios --save

Vue3 中使用 “vue-axios“

超百个免费api接口，分享给你

main.js

import axios from "axios";
import VueAxios from "vue-axios";app.use(VueAxios, axios);
app.provide('axios', app.config.globalProperties.axios) 

App.vue

公共样式

vue-cli4中引入全局less变量的方式
styles/commons.less

// --------- Colors -----------
@primary-color: #3873F8;  // 全局主色
@link-color: #1890ff;  // 链接色
@success-color: #229F87;  // 成功色
@warning-color: #F67778;  // 警告色
@error-color: #F35248;  // 错误色// --------- 中性色 -----------
@gray-0: #202020;
@gray-1: #585858;
@gray-2: #949494;
@gray-9: #F6F6F8;
@gray-10: #ffffff;// --------- font -----------
@font-12: 12px;
@font-14: 14px;
@font-16: 16px;// --------- 间距 -----------
@padding-4: 4px;
@padding-8: 8px;
@padding-12: 12px;
@padding-20: 20px;// 全局控制
body {padding: 0;margin: 0;line-height: 1.5;color: @gray-0;font-size: @font-14;transition: all 0.3s;font-family: Avenir, Helvetica, Arial, sans-serif;
}p {padding: 0;margin: 0;
}li {list-style: none;
}img {padding: 0;margin: 0;display: block; // flex布局变成块可能更好
}a {text-decoration: none;&:hover {text-decoration: underline;}
}input, textarea {outline: none;
}

vue.config.js

const { defineConfig } = require("@vue/cli-service");
const { resolve } = require("path");module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,pluginOptions: {"style-resources-loader": {preProcessor: "less",patterns: [resolve(__dirname, "./src/styles/commons.less")], //引入全局less文件},},
});

添加字体图标

vue导入图标的3种方式【阿里图标】
vue引用阿里彩色图标（symbol引用）

综合两篇博客所述 我决定使用第三种方式 .svg（第一篇博客中所介绍的）
yarn add svg-sprite-loader

svg放在src/assets/icon/svg目录下
vue.config.js

const { defineConfig } = require("@vue/cli-service");
const path = require("path");const webpack = require("webpack");
function resolve(dir) {return path.join(__dirname, dir);
}module.exports = defineConfig({// eslint-loader 是否在保存的时候检查lintOnSave: false,// 部署应用包时的基本 URL,用法和 webpack 本身的 output.publicPath 一致publicPath: "./",// 输出文件目录outputDir: "dist",// 是否使用包含运行时编译器的 Vue 构建版本runtimeCompiler: false,// 生产环境是否生成 sourceMap 文件productionSourceMap: false,// 生成的 HTML 中的  和 

assets/icons/index.js

import SvgIcon from "@/components/SvgIcon.vue";const svgRequired = require.context("./svg", false, /\.svg$/);
svgRequired.keys().forEach((item) => svgRequired(item));export default (app) => {app.component("svg-icon", SvgIcon);
};

main.js

import SvgIcon from "@/assets/icons/index";
SvgIcon(app);

使用

页面逻辑梳理

因为 考虑到要适配移动端，这里在之前的home组件下，在弄WallMessage.vue
修改路由

import { createRouter, createWebHashHistory } from "vue-router";
const routes = [{path: "/",redirect: "/wall",name: "home",component: () => import("../views/Home.vue"),children: [{path: "wall",component: () => import("../views/WallMessage.vue"),},],},
];const router = createRouter({history: createWebHashHistory(),routes,
});export default router;

搭建TopBar

App.vue

Home.vue

TopBar.vue

实现效果：

按钮组件

写按钮组件 不用任何ui框架 Button.vue

TopBar.vue中使用

留言墙照片墙

底部组件

FooterBar.vue

主页面的搭建

WallMessage.vue
主页面分为留言墙和照片墙
将页面中的文字记录在util/data.js中

// 墙的性质
export const wallType = [{name: "留言墙",slogan: "很多事情值得记录，当然也值得回味。",},{name: "照片墙",slogan: "很多事情值得记录，当然也值得回味。",},
];// 分类标签
export const label = [["留言","目标","理想","过去","将来","爱情","亲情","秘密","信条","无题",],["我","ta","喜欢的","有意义的","值得纪念的","母校","生活","天空","我在的城市","大海",],
];

创建note卡片

NoteCard.vue

创建mock数据以及使用

yarn add mockjs --save
mock/index.js

let Mock = require("mockjs");// 留言note
export const note = Mock.mock({"data|19": [{// 创建时间moment: new Date(),// id"id|+1": 1,// userid"userId|+1": 10,// 内容"message|24-96": "@cword",// 标签label"label|0-10": 0,// namename: "@cname",// like"like|0-120": 0,// 评论"comment|0-120": 0,// 背景颜色"imgurl|0-4": 0,// 是否撤销"revoke|0-20": 0,// 是否举报"report|0-20": 0,//   类型type: 0,},],
});
![请添加图片描述](https://img-blog.csdnimg.cn/fdf30a5caf3c42f884118291c0f8831a.gif)

卡片居中方法以及时间方法

在组合式API中，如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。

时间&颜色

util/tools.js

// 时间方法
export const dateOne = (e) => {let d = new Date(e);let year = d.getFullYear();let month = d.getMonth() + 1;let day = d.getDate();if (day < 10) day = "0" + day;if (month < 10) month = "0" + month;return year + "." + month + "." + day;
};// 卡片背景色
export const cardColor = ["rgba(252,175,162,0.30)","rgba(255,227,148,0.30)","rgba(146,230,245,0.30)","rgba(168,237,138,0.31)","rgba(202,167,247,0.30)","rgba(212,212,212,0.30)",
];

NoteCard.vue

添加留言按钮

增加弹出层组件

优化弹出层组件

vue中改变滚动条样式（CSS）