Web-WebApp Vue.js 目录结构

这篇具有很好参考价值的文章主要介绍了Web-WebApp Vue.js 目录结构。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

WebApp Vue.js 目录结构

目录解析

Web-WebApp Vue.js 目录结构,HTML5,web前端,前端,web app,vue.js

目录/文件 说明

  • build 最终发布的代码存放位置。
  • config 配置目录,包括端口号等。我们初学可以使用默认的。
  • node_modules npm 加载的项目依赖模块
    src
    这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
  • assets: 放置一些图片,如logo等。
  • components: 目录里面放了一个组件文件,可以不用。
  • App.vue: 项目入口文件,我们也可以直接将组建写这里,而不使用 components 目录。
  • main.js: 项目的核心文件。
  • static 静态资源目录,如图片、字体等。
  • test 初始测试目录,可删除
  • .xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
  • index.html 首页入口文件,你可以添加一些 meta 信息或同统计代码啥的。
  • package.json 项目配置文件。
  • README.md 项目的说明文档,markdown 格式
    在前面我们打开 APP.vue 文件,代码如下(解释在注释中):
  • src/APP.vue
<!-- 展示模板 -->
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <hello></hello>
  </div>
</template>
 
<script>
// 导入组件
import Hello from './components/Hello'
 
export default {
  name: 'app',
  components: {
    Hello
  }
}
</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>

接下来我们可以尝试修改下初始化的项目,将 Hello.vue 修改为以下代码:
src/commponents/Hello.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>
 
<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: '欢迎来到Vue世界!'
    }
  }
}
</script>

学习记录,每天不停进步。文章来源地址https://www.toymoban.com/news/detail-645523.html

到了这里,关于Web-WebApp Vue.js 目录结构的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 截屏插件 js-web-screen-shot(Vue 、html)

    最近有个需求是需要再页面上截屏并上传的,于是找到了这个插件【js-web-screen-shot】 先在package.json中添加这个 然后 npm install 然后在对应页面的vue文件的 script 中 import 接下就可以使用了; 使用方式大概就是 定义一个按钮,来触发构建该插件对象(也可以用其他方式) 然后就

    2024年02月12日
    浏览(37)
  • 无涯教程-HTML5 - Web 存储

    HTML5引入了两种机制是会话存储(Session Storage)和本地存储(Local Storage),它们将用于处理不同的情况。 几乎每个浏览器的最新版本都支持HTML5存储,包括Internet Explorer。 HTML5引入了 sessionStorage 属性,站点将使用该属性将数据添加到会话存储中,并且在该窗口中打开的同一站点中的

    2024年02月19日
    浏览(42)
  • HTML5 Web Storage学习

    web Storage是html5新增的数据存储方法,它与cookie之间的区别在于, 存储空间:cookie 的大小被限制在 4KB,Storage大小一般为 5~10MB,与具体浏览器有关; 网络消耗:只要涉及 cookie 请求都会携带cookie数据,消耗网络的带宽,Storage不会自动发送到服务器; 使用方面:Storage 提供了更

    2024年02月12日
    浏览(33)
  • web头歌 html5-图像的运用

    一、新媒体新闻网页的设计 任务描述 本关任务:编写一个带有背景图的新闻网页。 相关知识 为了完成本关任务,你需要掌握:1.网页背景的设置,2.标题标签,3.水平线标签,4.段落标签,5.font标签。 编程要求 在右侧编辑器中的 Begin - End 区域内补充代码,具体要求是: 1.为

    2024年02月02日
    浏览(40)
  • HTML5 Web Worker之性能优化

    描述 由于 JavaScript 是单线程的,当执行比较耗时的任务时,就会阻塞主线程并导致页面无法响应,这就是 Web Workers 发挥作用的地方。它允许在一个单独的线程(称为 工作线程 )中执行耗时的任务。这使得 JavaScript 代码可以在后台执行,而不会阻塞主线程并导致页面无响应。

    2024年03月16日
    浏览(47)
  • HTML5:构建现代、交互式的Web应用

    HTML5作为最新版本的HTML标准,引入了许多令人兴奋的特性和改进,使Web开发更加灵活和强大。本篇博客将围绕HTML5的核心功能展开,包括语义化标签、多媒体支持、表单增强、Canvas绘图、地理定位、本地存储等方面。我们将通过详细的代码示例和实用的技巧,帮助你全面掌握

    2024年02月12日
    浏览(45)
  • html5 web 按钮跳转方法(及其相关)

    html5 web 按钮跳转方法(及其相关) 方法一 a href=\\\"javascript:\\\" οnclick=\\\"history.go(-2); \\\"返回前两页/a 方法二 a href=\\\"javascript:\\\" οnclick=\\\"self.location=document.referrer;\\\"返回上一页并刷新/a 方法三 $(\\\".btn\\\").click(function(){ window.history.back(); }); //或者直接a标签添加 a class=\\\"\\\" href=\\\"javascript:history.go(-1)\\\"返

    2024年02月04日
    浏览(44)
  • 【web世界探险家】HTML5 探索与实践

    📚博客主页:爱敲代码的小杨. ✨专栏:《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 |《MySQL探索之旅》 ❤️感谢大家点赞👍🏻收藏⭐评论✍🏻,您的三连就是我持续更新的动力❤️ 🙏小杨水平有限,欢迎各位大佬指点,相互学习进步! 学习任何一门语言,首先要

    2024年03月21日
    浏览(42)
  • 音频播放器Web页面代码实例(基于HTML5)

    音频播放器Web页面代码实例(基于HTML5):   特别需要注意的点:     如果上传文件时设置的是默认转码方式,所有的文件都会转码为视频文件,使用音频播放器播放视频文件时,只会播放声音,没有图像。     如果上传文件时设置了\\\"源文件播放\\\",平台不会对源文件进行

    2024年02月16日
    浏览(36)
  • HTML5+CSS3+移动web 前端开发入门笔记(二)HTML标签详解

    排版标签用于对网页内容进行布局和样式的调整。下面是对常见排版标签的详细介绍: 标题使用至标签进行定义。定义最大的标题,定义最小的标题。具有align属性,属性值可以是:left、center、right。 将给定的HTML代码转换为Markdown格式的标题标签如下所示: 效果演示: H3:

    2024年02月07日
    浏览(65)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包