Vue框架应用实战项目式教程 实训指导书 实训指导书1：留言板-框架搭建（1）.pdf

Vue项目结构认识【任务描述】【实验环境】【任务实施】【实验结论】

Vue项目结构认识

【任务描述】

本任务要求将HTML版本的Vue论坛项目通过Vue.js进行改写，实现页面的布局与样式。界面样式如下图所示。

发

开

战

实

用

应

架

框

e

u

V

【实验环境】

VisualStudioCode

Node.js10.X及以上版本

Vue/cli脚手架4.5.0及以上版本

【任务实施】发

（1）清空【App.vue】文件中的默认展示代码。将代码还原为如下初始结构。开

template/template战

script

exportdefault{实

}

/script用

style/style

（2）在【assets】文件中新建【css】和【img】文件夹，用于放置项目需要的样式和图片等文件。

应

（3）将素材中的图片拷贝至【assets】下的【img】目录中，【bootstrap.css】样式表拷贝至【css】目录中，如下图

所示。架

框

e

u

V

（4）拷贝素材文件【index.html】body中的页面结构到【App.vue】的template/template节点中。

发

（5）从【assets】文件夹中引入HTML结构所需的图片。开

imgclassd-blockmx-autosrc./assets/img/logo.png!--引入logo图片--

imgsrc./assets/img/male.pngaltwidth24height24!--引入头像图标--

战

imgsrc./assets/img/female.pngaltwidth24height24!--引入头像图标--

（6）导入页面所需的样式。实

【bootstrap.css】中的样式，我们直接在script标签中通过import方法引入即可。

用

HTML页面style标签中的内联样式放置于Vue中的style标签内，注意添加scoped属性，防止页面样式污染。

scriptsetup应

import./assets/css/bootstrap.css;

架

/script

sty