202105241621844846121241

1、检验vue项目是否可以运行

202105241621844874200173

2、XXX.vue组件文件,构成:

(1)视图层

<template>

</template>

(2)业务逻辑

<script>

export default {

  name: 'HelloWorld',

}

</script>

(3)样式

<style lang="scss" scoped>

</style>

scoped 表示当前样式 只作用在当前组件上。该区域的样式,不会和其他组件发生冲突!

3、配置当前vue文件对应的路由

先在src文件夹中的comcomponents里配置News.vue文件

202105241621845295969736

(1)到router目录下index.js中配置某个组件的路由

202105241621845401673316

(2)在浏览器,地址栏中,输入路径:服务器地址/news

http://localhost:8084/news

202105241621846006181220