9-1-vue项目结构和vue文件创建及访问

vue项目结构

下面的目录结构是基于webpack构建的vue项目的目录结构

vue

vue文件创建及访问

一、创建vue文件

XXX.vue组件文件，构成：

1视图层

<template>

</template>

2业务逻辑

<script>

export default {

  name: 'HelloWorld',

}

</script>

3样式

<style lang="scss" scoped>

</style>

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

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

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

（1）先将组件导入到index.js中

import News from '../components/News.vue'

（2）配置当前组件的路由

  {

    path:'/news',

    name:'News',

    component:News

  }

在浏览器，地址栏中，输入 路径，访问 该路径下，对应的组件