目录结构

以下文件均为npm create helloworld自动生成的文件目录结构

目录截图

目录说明

目录/文件 说明
node_modules npm 加载的项目依赖模块
src 这里是我们要开发的目录，基本上要做的事情都在这个目录里
assets 放置一些图片，如logo等。
components vue组件文件的存放目录,也是主要的工作目录
App.vue 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
main.js 项目的核心文件。
index.html 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档，markdown 格式

文件说明

index.html:启动页面

<div id="app">为后续的vue文件提供可替换的壳标签

<!DOCTYPE html>

<html lang="">

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <link rel="icon" href="<%= BASE_URL %>favicon.ico">

    <title><%= htmlWebpackPlugin.options.title %></title>

  </head>

  <body>

    <noscript>

      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

    </noscript>

    <div id="app"></div>

    <!-- built files will be auto injected -->

  </body>

</html>

main.js:入口文件，类似于java的main方法

功能有两个：

1、导入vue框架；

2、将App.vue的内容挂载(替换)到index.html的<div id="app"/>标签

import { createApp } from 'vue'

import App from './App.vue'

createApp(App).mount('#app')

App.vue：第一个vue文件

<!--

  一、Vue的文件结构为三段式

    1.template负责页面元素搭建

    2.script负责js代码

    3.style负责css样式

  二、使用其他的vue组件分两步

    1.导入：

      1.1在js方法中import组件

      1.2在export default中使用components注册组件

    2.使用：

      在template中使用组件标签

-->

<template>

  <img alt="Vue logo" src="./assets/logo.png">

  <HelloWorld msg="Welcome to Your Vue.js App"/>  <!-- 在template中使用组件标签 -->

</template>

<script>

import HelloWorld from './components/HelloWorld.vue' // 在js方法中import组件

export default {

  name: 'App',

  components: {

    HelloWorld        // 在export default中使用components注册组件

  }

}

</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>

HelloWorld.vue: 展示页面

msg是定义好的参数，外部组件(App.vue)可以通过参数传递的方式，将数据传给HelloWorld.vue

<template>

  <div class="hello">

    <h1>{{ msg }}</h1>

    <p>

      For a guide and recipes on how to configure / customize this project,<br>

      check out the

      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.

    </p>

  </div>

</template>

<script>

export default {

  name: 'HelloWorld',

  props: {

    msg: String

  }

}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

h3 {

  margin: 40px 0 0;

}

ul {

  list-style-type: none;

  padding: 0;

}

li {

  display: inline-block;

  margin: 0 10px;

}

a {

  color: #42b983;

}

</style>

Vue3.0极速入门(二) - 目录和文件说明的更多相关文章

  1. linux笔记二-----目录及文件命令

    一:目录及文件操作 1.file:识别文件类型 如果是文本文件,会显示ASCII: 如果是执行会显示shell script: 如果链接文件显示链接执行文件等信息 2.touch:改变文件或目录时间. ...

  2. ExtJs 6.0+快速入门，ext-bootstrap.js文件的分析，各版本API下载

    ExtJS6.0+快速入门+API下载地址 ExtAPI 下载地址如下,包含各个版本 http://docs.sencha.com/misc/guides/offline_docs.html 1.使用 ...

  3. python3.5+django2.0快速入门(二)

    昨天写了python3.5+django2.0快速入门(一)今天将讲解配置数据库,创建模型,还有admin的后台管理. 配置数据库 我们打开mysite/mysite/settings.py这个文件. ...

  4. ExtJs 6.0+快速入门，ext-bootstrap.js文件的分析，各版本API下载（一）

    ExtAPI 下载地址如下,包含各个版本 http://docs.sencha.com/misc/guides/offline_docs.html 1.使用工具HBuilder 2.java 版本 8 ...

  5. redis入门(二)

    目录 redis入门(二) 前言 持久化 RDB AOF 持久化文件加载 高可用 哨兵 流程 安装部署 配置技巧 集群 原理 集群搭建 参考文档 redis入门(二) 前言 在redis入门(一)简单 ...

  6. python3.5+django2.0快速入门(一)

    因为这篇教程需要用到anaconda的一些操作,如果还不懂anaconda的操作的同学可以看下这篇文章python 入门学习之anaconda篇. 创建python3+的开发环境 直接在终端输入:co ...

  7. vue3.0创建项目和基本配置

    借鉴博客:https://www.jianshu.com/p/6307c568832d/ https://www.cnblogs.com/KenFine/p/10850386.html 项目创建好后, ...

  8. linux入门教程(六) Linux文件与目录管理

    在linux中什么是一个文件的路径呢,说白了就是这个文件存在的地方,例如在上一章提到的/root/.ssh/authorized_keys 这就是一个文件的路径.如果你告诉系统这个文件的路径,那么系统 ...

  9. Java 快速入门-06-JDK 目录文件说明

    Java 快速入门-06-JDK 目录文件说明 JDK:开发环境,搞技术的人或者应用服务器使用 JRE:运行环境,如浏览器插件或者Swing界面的客户端等最终用户需要使用 JDK自含一个JRE,并依赖 ...

  10. Thinkphp5.0实战开发二------自动生成目录结构

    序言 ThinkPHP5.0 具备自动创建功能,可以用来自动生成需要的模块及目录结构和文件等,自动生成主要调用\think\Build 类库.ThinkPHP5.0中模块文件夹在application ...

随机推荐

  1. Android studio 提示“android qemu-system-i386.exe停止工作”

    解决方案 android studio 关闭AVD时提示"android qemu-system-i386.exe停止工作" 配置虚拟机时"Graphics"选 ...

  2. ef 查询生成语句的几种方式

    前言 整理一下ef 如何查看生成sql 语句的,现在有ef core 了,统一整理一下. 正文 方式如下: 数据库监听 这是一种推荐方式,因为调试和代码分开,不会有影响. 然后连接: 然后可以进行一些 ...

  3. mmdetection训练voc数据集

    首先需要准备好数据集,这里有xml标签数据转voc数据集格式的说明以及免费分享的数据集:xml转voc数据集 - 一届书生 - 博客园 (cnblogs.com) 1. 准备工作目录 我们的工作目录, ...

  4. 《c#高级编程》第4章C#4.0中的更改（九）——协变和逆变

    动态字典(Dynamic Dictionary)是指一个键值对集合,其中键和值的类型都可以在运行时确定并且可以动态变化.在C#中,可以使用 dynamic 关键字来实现这一功能. 例如,下面的代码演示 ...

  5. 力扣553(java)-最优除法（中等）

    题目: 给定一组正整数,相邻的整数之间将会进行浮点除法操作.例如, [2,3,4] -> 2 / 3 / 4 . 但是,你可以在任意位置添加任意数目的括号,来改变算数的优先级.你需要找出怎么添加 ...

  6. 云原生时代下，微服务体系与 Serverless 架构的发展、治理与融合

    简介: 7 月 22.23 日为期两天的 2022 稀土开发者大会召开在即,此次阿里云 Serverless 研发负责人杨皓然(不瞋)作为大会出品人,带来<微服务与 Serverless> ...

  7. Koordinator 0.6：企业级容器调度系统解决方案，引入 CPU 精细编排、资源预留与全新的重调度框架

    简介: 经过社区多位成员的贡献,Koordinator 0.6 版本正式发布.相较于上一个版本 0.5,新版本进一步完善了 CPU 精细化编排能力,更好的兼容原生用法:支持了资源预留的能力(Reser ...

  8. 成中集团线下IDC迁移上云

    阿里云根据成中集团业务场景入手,提供了上云方案和迁移建议,利用这套架构,保障了公司数据的安全性并且满足了公司对于备份机制的建立的基本诉求,并且降低了业务出现中断的风险. 公司介绍 成中简介: 我们公司 ...

  9. 使用 Uno Islands 在现有 WPF 里面嵌入 Uno 框架

    随着 2022 9 月份 Uno 发布了 4.5 版本,现有的 WPF 应用多了一个新的开发模式,那就是通过 Uno Islands 技术,在现有的 WPF 应用里面嵌入 Uno 应用.通过此方式可以 ...

  10. 2024-04-27：用go语言，在一个下标从 1 开始的 8 x 8 棋盘上，有三个棋子，分别是白色车、白色象和黑色皇后。 给定这三个棋子的位置，请计算出要捕获黑色皇后所需的最少移动次数。 需要注意

    2024-04-27:用go语言,在一个下标从 1 开始的 8 x 8 棋盘上,有三个棋子,分别是白色车.白色象和黑色皇后. 给定这三个棋子的位置,请计算出要捕获黑色皇后所需的最少移动次数. 需要注意 ...