Vue3.0极速入门- 目录和文件说明

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

目录结构

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

目录截图

Vue3.0极速入门- 目录和文件说明,vue

目录说明

目录/文件 说明
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>

 文章来源地址https://www.toymoban.com/news/detail-674057.html

到了这里,关于Vue3.0极速入门- 目录和文件说明的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 后端“fastapi”+前端“vue3+ts+ElementPlus”上传文件到uploads目录

    确保已安装好python3和fastapi mail.py 运行fastapi服务器 使用浏览器访问 http://127.0.0.1:8000/http://127.0.0.1:8000/docs 确保已安装node.js和yarn 使用vite初始化前端目录  安装element-plus main.ts中导入element-plus  修改vite.config.ts配置“CORS 跨域” 修改App.vue 运行 使用浏览器访问 http://127.0.0.1:70

    2024年02月22日
    浏览(53)
  • 关于前端框架vue2升级为vue3的相关说明

    一些框架需要升级 当前(202306) Vue 的最新稳定版本是 v3.3.4 。Vue 框架升级为最新的3.0版本,涉及的相关依赖变更有: 前提条件:已安装 16.0 或更高版本的Node.js(摘) 必须的变更:核心库vue@23、路由vue-router@34、状态管理vuex@34 构建工具链: Vue CLI Vite(摘) 状态管理: Vuex Pi

    2024年02月15日
    浏览(51)
  • vue3 vite 打包 二级目录刷新空白

    控制台报错:Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of \\\"text/html\\\". Strict MIME type checking is enforced for module scripts per HTML spec. 打包路径问题,修改vite.config.ts文件的base

    2024年02月09日
    浏览(58)
  • vue3 + vite 性能优化,详细代码说明

    对于Vue 3和Vite应用的性能优化,以下是一些常见的技巧和建议: 使用Tree-shaking:Vue 3和Vite支持ES模块的静态分析,因此可以利用Tree-shaking特性,只引入项目中实际使用的模块,减少打包体积。 懒加载路由:使用Vue Router的动态导入功能,将路由按需加载,可以减少初始加载的

    2024年02月02日
    浏览(41)
  • Spring Cloud + Vue前后端分离-第9章 大文件断点续与极速秒传

     源代码在GitHub - 629y/course: Spring Cloud + Vue前后端分离-在线课程 作为一个视频网站,一个文件小则几十M,大则上G,上传一个大文件受网络影响很大,文件越大,上传失败率越高 我们要完善文件上传功能,支持断点续传,当文件上传到一半,网络断了,下次再上传时,只上传

    2024年02月04日
    浏览(42)
  • nginx vue2+webpack 和 vue3+vite 配置二级目录访问

    我们开发中会遇到这样的需求,让我们用服务器nginx部署一个用域名的二级目录来访问项目 https:xxx/二级目录/ 来放访问项目 目录 思路 1、nginx配置(vue2 和 vue3配置的nginx相同) 2、vue2+webpack的配置 (1)vue.config.js配置 (2)router配置 3、vue3+vite的配置 (1)vite.config.js配置 (

    2024年02月09日
    浏览(58)
  • 「Vue3面试系列」Vue 3.0中Treeshaking特性有哪些?举例说明一下?

    Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术,专业术语叫 Dead code elimination 简单来讲,就是在保持代码运行结果不变的前提下,去除无用的代码 如果把代码打包比作制作蛋糕,传统的方式是把鸡蛋(带壳)全部丢进去搅拌,然后放入烤箱,最后把(没有

    2024年02月01日
    浏览(42)
  • 【vue3】vue3的三种写法(附带provide/inject、toRefs说明、ref,reactive的区别)

    写法一(vue3的写法) toRefs定义: toRefs可以将对象(只能接收rective对象)中的属性变成响应式。 正常reactive对象数据也是响应式的,如果用toRefs解构出去会更加方便。 toRefs什么时候用? 数据量如果很多, 我们一般会用解构来简化代码, 那么在vue3 中如果使用对象的解构,

    2024年02月13日
    浏览(49)
  • vue3+vite中使用环境变量 .env 的一些配置情况说明

    在项目文件中新建文件.env .env.pro 两个文件其中.env 是默认设置 .env.pro 为正式环境设置 1、设置.env中的内容信息 注意vue3+vite 必须使用VITE开头的配置信息 否则无法获取 如果不想使用VITE开头自己修改就在vite.config.ts文件中添加envPrefix:“APP_” 2、在 vite 中使用环境变量,可以用

    2024年02月04日
    浏览(65)
  • vue3 快速入门系列 —— vue3 路由

    在vue3 基础上加入路由。 vue3 需要使用 vue-router V4 ,相对于 v3,大部分的 Vue Router API 都没有变化。 Tip :不了解路由的同学可以看一下笔者之前的文章:vue2 路由 参考:vue2 路由官网、vue3 路由官网 在 Vue Router API 从 v3(Vue2)到 v4(Vue3)的重写过程中,大部分的 Vue Router API 都

    2024年04月09日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包