Vue系列第二篇：初识Vue项目

news2024/11/22 16:09:07

上一篇我搭建了Vue开发环境，创建了一个demo项目，借助nginx将Vue项目编译部署。这一篇来看一下Vue项目的结构。如下图所示：

我就创建一个空项目，结果Vue脚手架就帮我自动生成了这么多文件，看着挺吓人的。不用怕，这就是脚手架的厉害之处，面对这一堆文件，我们该如何理解项目架构，如何增加我们自己的功能呢？作为入门人员可以按照以下下顺序来理解项目。

接下来按照顺序来分别介绍一下这5个文件的用处。

目录

1.默认生成文件介绍

1.1.index.html

1.2.src/main.js 

1.3.src/App.vue

1.4.src/router/index.js

1.5.src/components/HelloWorld.vue

 2.添加自己业务代码

1.默认生成文件介绍

1.1.index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

index.html是整个项目的入口，<div id="app"></div>表示本html绑定了一个id为app的VUE对象。

1.2.src/main.js 

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

说明：

el: '#app'：vue对象的id是app

router：路由器

components: { App }：vue的组件名为App

template: '<App/>' ：template名为App

此处定义了一个id为app的VUE对象，index.html通过app这个id引用了这个对象。

1.3.src/App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

说明：

export default {

name: 'App'

}

export 了名为App的组件，导出以后main.js就可以引用它。

src/App.vue中的template可以理解为html的一部分片段，片断可以拼接到html对应的位置，构成一个有内容的完整的页面。<route-view/>是路由，根据用户的url不同，会路由到不同的vue文件，进而展示不同的页面内容。

1.4.src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

src/router/index.js决定了App.vue里<router-view/>位置会展示什么内容。

path: '/'：当用户访问http://localhost:8080/根目录就会默认路由到HelloWorld组件，这个组件的内容会被在src/App.vue里<router-view/>显示出来。

1.5.src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

src/components/HelloWorld.vue式脚手架默认生成的Vue对象。

运行npm run dev后，在浏览器输入：http://localhost:8080

 2.添加自己业务代码

2.1 注释src/App.vue中的标签：<img src="./assets/logo.png">

2.2 src/components/HelloWorld.vue中export default下的msg修改为“Vue，你好，初来乍到请多多的关照”

2.3 修改src/router/index.js和src/components目录下新增MyFirst.vue

src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import MyFirst from '@/components/MyFirst'

Vue.use(Router)

export default new Router({
  routes: [
    /*
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    */
    {
      path: '/',
      name: 'myfirst',
      component: MyFirst
    }
  ]
})

src/components/MyFirst.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'MyFirst',
  data () {
    return {
      msg: '这是我的第一个VUE页面'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

运行结果如下：

2.4修改修改src/router/index.js增加多个路由

import Vue from 'vue'
import HelloWorld from '@/components/HelloWorld'
import MyFirst from '@/components/MyFirst'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/hello'
    },
    {
      path: '/first',
      name: 'first',
      component: MyFirst
    },
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

(1) 情况一：http://localhost:8080/

（2） 情况二：http://localhost:8080/hello

 （3）情况三：http://localhost:8080/first

情况三http://localhost:8080/first 希望访问first页面，结果还是hello页面，而且浏览器中地址还被修改成了http://localhost:8080/first#/hello 导致路由不成功。通过查询发现Router有个参数mode，将其修改为mode: 'history'，再次测试，发现OK了。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/777761.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

第十一章、【Linux】正则表达式与文件格式化处理

第十一章、【Linux】正则表达式与文件格式化处理

正则表达式 &#xff08;Regular Expression, RE, 或称为常规表达式&#xff09;是通过一些特殊字符的排列&#xff0c;用以“搜寻/取代/删除”一列或多列文字字串&#xff0c; 简单的说&#xff0c;正则表达式就是用在字串的处理上面的一项“表示式”。正则表达式并不是一个工…
阅读更多...
「网络编程」传输层协议_ TCP协议学习_及原理深入理解（一）[万字详解]

「网络编程」传输层协议_ TCP协议学习_及原理深入理解（一）[万字详解]

「前言」文章内容大致是传输层协议&#xff0c;TCP协议讲解&#xff0c;续上篇UDP协议。 「归属专栏」网络编程 「主页链接」个人主页 「笔者」枫叶先生(fy) 目录 一、TCP协议介绍二、TCP协议2.1 解包与分用2.2 谈谈可靠性2.3 TCP的工作模式2.4 确认应答(ACK)机制2.5 16位序号与…
阅读更多...
【基于CentOS 7 的SSH服务】

【基于CentOS 7 的SSH服务】

目录 一、概念 二、特点 三、身份验证机制 1.密码验证 2.密钥对验证 四、验证过程 五、加密机制 1.单向加密 2.对称加密 3.非对称加密 六、基本参数 1.服务名 2.端口号 3.配置文件 3.1 服务器端 3.2 客户端 4.配置文件解析 4.1 /etc/ssh/sshd_config 4.2 /e…
阅读更多...
机器学习 day29（高偏差、高方差，参数d对模型的影响）

机器学习 day29（高偏差、高方差，参数d对模型的影响）

1. 高偏差、高方差、拟合能力、泛化能力 偏差和方差分别代表拟合能力和泛化能力若给左图数据集拟合一阶多项式&#xff08;d取1&#xff09;&#xff0c;则该模型有很高的偏差&#xff08;欠拟合&#xff09;。因为它对训练集和验证集的表现均不好&#xff0c;所以Jtrain很高…
阅读更多...
使用STM32 再实现循迹/跟随/摇头避障小车

使用STM32 再实现循迹/跟随/摇头避障小车

循迹小车 硬件介绍和接线 TCRT5000 使用方法和原理见89C52时期的介绍。 循迹小车需要使用两个TCRT5000&#xff0c;左侧的DO接到PB3&#xff1b;右侧的DO接到PB4 CubeMX 1. 在上节的基础上进行修改 配置两个传感器的GPIO 2. 惯例配置更新代码 Keil 注意&#xff0c;如果…
阅读更多...
Linux 学习记录54(ARM篇)

Linux 学习记录54(ARM篇)

Linux 学习记录54(ARM篇) 本文目录 Linux 学习记录54(ARM篇)一、框图分析1. 芯片手册内部框图2. 操作GPIO过程 二、通过汇编完成GPIO操作1. 常用的汇编指令2. GPIO初始化流程3. 查找相关寄存器(1. RCC寄存器(2. GPIO寄存器>1. 模式配置寄存器>2. 输出模式配置寄存器>3…
阅读更多...
【云原生】Prometheus之部署 Alertmanager 发送告警

【云原生】Prometheus之部署 Alertmanager 发送告警

前言 1. Alertmanager 发送告警的介绍 Prometheus 对指标的收集、存储与告警能力分属于 Prometheus Server 和 AlertManager 两个独立的组件&#xff0c;前者仅负责定义告警规则生成告警通知&#xff0c; 具体的告警操作则由后者完成。 Alertmanager 负责处理由 Prometheus…
阅读更多...
wxchart 小程序 线条图不显示y轴的网格线 （分割线）

wxchart 小程序 线条图不显示y轴的网格线 （分割线）

如下图&#xff1a;项目需求不显示包括x轴的6条灰色分割线。 分析&#xff1a; 看了一下源码已经写死了是5条分割线&#xff0c;加一条x轴刻度线。没给公开配置方法。 解决方案&#xff1a; 既然没有配置项目&#xff0c;可以转变思路&#xff0c;把这些线条配置成白色&…
阅读更多...
一文掌握如何前后端分离？

一文掌握如何前后端分离？

随着科技的进步和发展&#xff0c;低代码开发产品拥有广阔的市场前景。前后端分离似乎早已经是发展趋势了&#xff0c;因为做好前后端分离对于前后端的工程师而言是非常有利的&#xff0c;这样也有利于提升办公协作效率。那么&#xff0c;如何前后端分离&#xff1f;分别都有哪…
阅读更多...
CentOS 安装Mysql8

CentOS 安装Mysql8

1.检查是否已经安装mysql&#xff0c;停止mysql服务&#xff0c;删除mysql ps -ef | grep -i mysql systemctl stop mysqld rpm -e mysql 2.配置仓库 更新秘钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2022 安装mysql8的yum源 rpm -Uvh https://dev.mysql.…
阅读更多...
基于linux下的高并发服务器开发（第二章）- 2.17 内存映射（1）

基于linux下的高并发服务器开发（第二章）- 2.17 内存映射（1）

11 / 内存映射相关系统调用 #include <sys/mman.h> void* mmap(void *addr, size_t length, int prot, int flags,int fd, off_t offset); - 功能&#xff1a;将一个文件或者设备的数据映射到内存中 - 参数&#xff1a; - void* addr:NULL,由内核指定 - length:要映射的…
阅读更多...
【OpenCV】常见问题及解决办法

【OpenCV】常见问题及解决办法

文章目录 0 前言1 中文乱码问题2 非法路径问题 0 前言 本篇博客主要是总结OpenCV使用过程中遇到的一些问题&#xff0c;以及对应的解决办法&#xff0c;这里重点是关注OpenCV&#xff0c;既有基于C的&#xff0c;也有基于Python的&#xff0c;比较全面&#xff0c;而且也会随着…
阅读更多...
【Python】数据分析+数据挖掘——变量列的相关操作

【Python】数据分析+数据挖掘——变量列的相关操作

前言 在Python和Pandas中&#xff0c;变量列操作指的是对DataFrame中的列进行操作&#xff0c;包括但不限于选择列、重命名列、添加新列、删除列、修改列数据等操作。这些操作可以帮助我们处理数据、分析数据和进行特征工程等。 变量列的相关操作 概述 下面将会列出一些基本…
阅读更多...
对github项目提PR 请求的保姆级教程——以修改casdoor项目的swagger文档为例，干货满满

对github项目提PR 请求的保姆级教程——以修改casdoor项目的swagger文档为例，干货满满

Github入门教程可以在腾讯犀牛鸟开源人才培养计划里面学习。 PR简介 PR(Pull Request) 即拉取请求,是 GitHub 上进行协同开发的一种非常常用的方式。 它的基本流程是&#xff1a; 开发者fork一个开源项目的代码库,将其克隆到本地。在本地对代码进行修改、添加新功能等。将本…
阅读更多...
基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域的数据分析能力与项目科研水平教程

基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域的数据分析能力与项目科研水平教程

详情点击链接&#xff1a;基于ArcGIS、ENVI、InVEST、FRAGSTATS等多技术融合提升环境、生态、水文、土地、土壤、农业、大气等领域的数据分析能力与项目科研水平 一&#xff0c;空间数据获取与制图 1.1 软件安装与应用 1.2 空间数据 1.3海量空间数据下载 1.4 ArcGIS软件快…
阅读更多...
MySQL数据库（七）

MySQL数据库（七）

目录 一、联合查询 1.1内连接 1.2外连接 1.3自连接 1.4子查询 1.5合并查询 一、联合查询 实际开发中往往数据来自不同的表&#xff0c;所以需要多表联合查询。多表查询是对多张表的数据取笛卡尔积&#xff1a; 下面进行多表查询的练习&#xff0c;对应的在表的设计与数据插入中…
阅读更多...
练习时长两年半的网络安全防御“first”

练习时长两年半的网络安全防御“first”

1.网络安全常识及术语 下边基于这次攻击演示我们介绍一下网络安全的一些常识和术语。 资产 任何对组织业务具有价值的信息资产&#xff0c;包括计算机硬件、通信设施、 IT 环境、数据库、软件、文档资料、信息服务和人员等。 网络安全 网络安全是指网络系统的硬件、软件及…
阅读更多...
Stable Diffusion - 扩展 Roop 换脸 (Face Swapping) 插件的配置与使用

Stable Diffusion - 扩展 Roop 换脸 (Face Swapping) 插件的配置与使用

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/131856141 官网&#xff1a;GitHub - roop&#xff0c;参考论文&#xff1a;RobustSwap: A Simple yet Robust Face Swapping Model against Attr…
阅读更多...
kubesphere部署谷粒商城, nginx无法路由到网关服务

kubesphere部署谷粒商城, nginx无法路由到网关服务

使用kubesphere部署谷粒商城&#xff0c;微服务和nginx均已部署成功&#xff0c;其中ingress-controller已安装。但是nginx无法路由到网关服务。使用域名gulimall.com访问谷粒商城&#xff0c;默认访问的是nginx首页&#xff0c;路由失败。 校对nginx的配置信息&#xff0c;上游…
阅读更多...
MySQL数据库第十课-------join连接的再续------强强连锁

MySQL数据库第十课-------join连接的再续------强强连锁

作者前言 欢迎小可爱们前来借鉴我的gtiee秦老大大 (qin-laoda) - Gitee.com __________________________________________________________ 目录 join连接 内连接 左连接 右连接 外连接 其他连接 ______________________________________________________________ 作…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023