Vue框架应用实战项目式教程实训指导书.docxVIP

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

Vue项目结构认识

【任务描述】

HTML本任务要求将

HTML

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

【实验环境】

VisualStudioCode

Node.js10.X及以上版本

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

【任务实施】

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

template/template

template/templatescript

exportdefault{

}

/script

style/style

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

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

body中的页面结构到【App.vue】的

body

中的页面结构到【App.vue】的

节点中。

节点中。

template/template

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

img

imgclass=d-blockmx-autosrc=./assets/img/logo.png!--引入logo图片--

imgsrc=./assets/img/male.pngalt=width=24height=24!--引入头像图标--

imgsrc=./assets/img/female.pngalt=width=24height=24!--引入头像图标--

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

import

import

script

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

标签中通过

【bootstrap.css】中的样式，我们直接在

方法引入即可。

scoped

scoped

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

style

标签内，注意添加

属性，防止页面样式污染。

HTML页面

style

scriptsetup

import./assets/css/bootstrap.css;

/script

stylescoped.line{

display:inline-block;width:4px;

height:24px;

background:linear-gradient(#20c997,#198754);vertical-align:middle;

margin-right:10px;position:relative;top:-2px;

}

.title:hover{

color:#198754;cursor:pointer;

}

/style

（7）在浏览器打开项目编译地址，默认为

http://localhost:8080/

,即可得到Vue.js渲染的留言板界面。

【实验结论】

本章节主要学习了Vue的项目结构和实例结构，并将HTML模板改写为Vue项目形式。帮助同学们了解Vue项目中各个文件的作用。

留言数据渲染

【任务实施】

本任务需要将“热门留言”模块中招聘简介数据通过数据绑定的方式显示在界面上。

步骤一.在script中准备页面数据。

scriptsetup

import{ref}fromvue

import./assets/css/bootstrap.css

constarticle=ref(Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。欢迎广大开发者对Vue留下宝贵的建议。

)

/script

步骤二.通过插值{{}}语法将文章数据渲染至页面中。

template

!--页面容器--

divclass=containermain

!--文章内容--

divclass=py-5text-center

imgclass=d-blockmx-auto

src=../assets/img/logo.png

pclass=lead

{{article}}

/p

/div

/main

/div

/template

步骤三.在控制台通过vuerunserv