MENU

Vue项目结构

April 9, 2020 • Read: 110 • Note,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。


本站所有未注明转载的文章均为原创,并采用CC BY-NV-SA 4.0 授权协议,转载请注明来源。

Archives QR Code
QR Code for this page
Tipping QR Code