• 留言墙项目【Vue3 + nodejs + express + mysql】——上

    学习视频来自——b站

    创建项目

    在这里插入图片描述
    如何使用 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              // 静态资源目录，不会被打包


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53

    安装必要插件

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

    

    • 1
    • 2
    • 3

    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;


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    main.js

    import router from "@/router/index";

const app = createApp(App);
app.use(router);
app.mount("#app");

    • 1
    • 2
    • 3
    • 4
    • 5

    在这里插入图片描述
    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) 

    • 1
    • 2
    • 3
    • 4
    • 5

    App.vue

    
<script setup>
import { onMounted, inject } from "vue";

const axios = inject("axios"); //注入一下不然不能用
onMounted(() => {
  getPhoto();
});
const getPhoto = () => {
  axios.get("https://api.uomg.com/api/rand.qinghua?format=json").then((res) => {
    console.log(res);
  });
};
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    在这里插入图片描述

    公共样式

    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;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61

    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文件
    },
  },
});


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    添加字体图标

    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 中的  和