Vue项目结构 - 码农教程

初识Vue项目结构

我们打开命令行窗口，cmd。启动vue的界面。

vue ui

一般都会自己弹出来浏览器，没有的话自己手动访问 localhost:8000 即可。

都是中文的，大家可以自己根据提示创建新的项目。（现在的前端都这么炫酷了吗。）

项目完成后如何启动项目，在右边栏->任务 ->serve->运行

两个地址都是可以访问的，下面那个在手机端也可以访问噢，不过要同个局域网，也就是同个WiFi。

可以在这里直接点击编辑器打开，也可以去硬盘找到你的项目存放目录，用编辑器打开。我使用的是vs code，实际上idea也是可以编辑的，不过需要一些简单的配置，安装一个叫vue的插件，设置为ES6。

下面我们去看vue项目结构。

注意：Book.vue是我测试的时候加上的。

App.vue是个什么玩意呢，就是我们的访问项目时映入眼帘的首页。

红色款里面估计就是对应我们的导航栏了，我在这里加了个Book，我如何访问到/book这个网址呢，

很明显我需要在某个地方配置一个映射地址，在此之前我们先去views目录写Book.vue页面。

<template>
  <div>
    <img alt="Vue logo" src="../assets/logo.png" />
    <table class="book">
      <tr>
        <td>编号</td>
        <td>图书名称</td>
        <td>作者</td>
      </tr>
      <tr v-for="(item,index) in books" :key="index">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>{{item.author}}</td>
      </tr>
    </table>
    <hr />
    {{msg}}
  </div>
</template>
<style >
.book {
  text-align: center;
  margin: auto;
}
</style>
<script>
export default {
  name: "Book",
  data() {
    return {
      msg: "Hello Vue",
      books: [
        {
          id: 1,
          name: "Java",
          author: "大佬"
        },
        {
          id: 2,
          name: "Python",
          author: "大哥"
        }
      ]
    };
  }
};
</script>

接下去我们去做一个映射，让Book.vue映射为/book，导航栏那里只是一个展示。

我们来到router目录中的index.js，可以看到这里面实际就是写我们的映射路径了。

我们将/views/Book.vue这个页面导入。

import Book from '../views/Book.vue'

在下面配置路径的地方加入，在const routes = {} 中。

  {
    path: '/book',
    component: Book
  }

这样子就完事了，我们去编译启动项目，点击导航栏上的Book。