学习参考：【带小白做毕设】01. 前端Vue3 框架的快速搭建以及项目工程的讲解_哔哩哔哩_bilibili

 

Vue框架结构

  •  node_modules: 这个是依赖包下载之后的存放目录
  •  public: 存放全局的静态文件， 比如说网页的icon
  • src:
    • assert : 一般是存放代码引用的静态文件，比如：css, js, img
    • components: 放一下vue的组件 (可复用的代码块，就叫组件)
    • router : 定义路由文件的目录
    • views: 存放 vue 网页文件的目录
    • App.vue: vue 页面全局的入口,所有 vue 文件的父级
    • main.js: 代码的配置文件，引入第三方的组件或者我们自己定义一些组件、css、js 等
  • index.html: vue编译成网页才能在浏览器渲染
  • jsconfig.json: 内部配置文件
  • package.json: 定义依赖库的文件
  • package-lock.json: 在下载依赖的时候锁定版本的一个文件
  • vite.config.js: 全局的配置文件

 

 

设置网页标题

在index.html文件中可以进行修改设置，修改位置如下图：

 下图为效果图：

 

 

 

处理内容在网页中显示的样式

在文件src下的assets下再创建一个css文件夹，在内部再创建一个global.css这个文件作为全局的样式，css文件的作用好像就是怎么渲染你的网页内容，将其按照css设定的规则展示出来

* {
        box-sizing: border-box
}

body {
    margin: 0;
    padding: 0;
    color : #333;
    font-size: 14px;
}

a {
    text-decoration: none;
}

 再在main.js中引入global.css

 再启动vue就行了 npm  run dev

最后效果图：

 相较于之前的页面，字体贴边了，字的颜色变浅了。

 

路由配置

例如添加一个404页面

在src/asset文件夹下创建一个imgs文件夹，用于存放要展示的图片

 在view文件夹中添加一个404.vue文件，用于书写将图片展示在页面上

对404.vue添加代码：

1 <template>
2     <div>
3         <img style='width: 100%' src="@/assets/imgs/404.png" alt="">
4     </div>
5 </template>
  • style='width: 100%' ：用于设置图片在页面中的大小，按照100%来放缩加载
  • src="@/assets/imgs/404.png"   :@的作用好像就是直接找到这个src文件

 

处理完上述内容，还需要添加路由才能在页面中展示出来

 后续访问路径下方的/notFound网页就能显示了，效果如下图：

 还可以添加一些额外的设置让整体页面好看一些

<template>
    <div style="height: 100vh; display: flex; align-items: center; justify-content: center">
        <div style="width: 50%">
            <img style='width: 100%' src="@/assets/imgs/404.png" alt="">
            <div style="text-align: center; padding: 20px 0; font-size: 20px;"><a style="color:#3741fb" href="/">返回主页</a></div>     
        </div>
    </div>
</template>

好像每个内容都可以添加设置格式 style，单独对这个进行设置，下图为效果图:

 对于寻找到其他路径下方的可以统一设置为404，因为没有这些路由接口会显示为空白，这样设置可以自动调整到notFound的路由