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。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • CSS重要的盒子模型

    新浪导航栏的核心就是因为里面的字数不一样多,所以我们不方便给宽度,还是给padding ,撑开盒子的。

    乐心湖
  • 常见的Stream流生成

    乐心湖
  • Mybatis-Plus代码生成器

    乐心湖
  • Cell 单细胞文章 | 白凡课题组与合作团队揭示儿童结肠炎及炎症性肠病的致病机制及治疗方法

    2019年11月14日,北京大学白凡研究员团队与广州医科大学附属广州市妇女儿童医疗中心儿科研究所张玉霞研究员,国家临床重点专科儿科消化团队(杨敏、耿岚岚及龚四堂...

    生信宝典
  • Kali Linux Web渗透测试手册(第二版) - 6.8 - 检测和利用命令注入漏洞

    我们以前已经看到如何使用PHP的system()函数在服务器中执行操作系统命令。有时,开发人员使用诸如此类的指令或具有相同功能的其他指令来执行某些任务。最终,它...

    7089bAt@PowerLi
  • php企业建站源码

    用户1112962
  • 亚信数据说他们家的大数据操作平台很厉害,“友商”们会笑吗?

    <数据猿导读> 亚信数据橘云产品线总经理朱军说:“亚信数据的大数据操作平台来自开源但优于开源,性能与稳定程度非常高,几乎媲美Hortonworks所提供的产品跟...

    数据猿
  • 程序员跳槽刷题必备神器!不用打开浏览器,就能刷LeetCode

    LeetCode上面收集了各大公司的经典算法面试题,面试前刷一波最好不过了,今天要和大家分享的这个项目就是一个帮助大家快速刷LeetCode题目的VS Code...

    帅地
  • 关注成效而非产出

    我一直认为成效是我们应该关注的重点。试想一个团队提供了很多功能(无论我们是用代码量、功能点、还是用户故事来度量),只要这些功能没有帮助用户改善生产活动,其实都是...

    ThoughtWorks
  • 单片机触摸屏校准

    触摸屏就是显示屏加触摸贴膜 第一种情况 假设显示屏 ? 假设触摸贴膜 ? 如果把这张膜贴到显示屏上,,那就不需要校准了,,,,,,,,,,触摸得到的X轴和Y轴的...

    杨奉武

扫码关注云+社区

领取腾讯云代金券