第一个vue项目

项目目录 

启动vue项目

npm run serve

1.vue.config.js文件

(CLI通过vue-cli-serve启动项目,解析配置配置文件vue-condig-js)

// vue.config.js

//引入path板块,这是Node.js的一个内置模块,用于处理文件路径,这里引用它是为了方便后面设置路径

const path = require('path');//便于处理文件路径

//module.exports 用于导出模块的内容

module.exports = {

  //用于自定义Webpack的配置

  configureWebpack: {

    //可以为路径设置别名

    resolve: {

      alias: {

        // 设置 '@' 别名指向 'src' 文件夹,@/components 就表示 src/components

        '@': path.resolve(__dirname, 'src')

      }

    }

  },

  //用于配置开发服务器

  devServer: {

    host: '0.0.0.0', // 允许外部访问

    port: 8080 // 设置开发服务器端口

  }

};

2.public/index.html

(项目入口文件,webpack会将打包的js文件注入到index-html文件内)

<!-- 项目入口的HTML文件,webpack会将打包后的javascript文件注入到这个html文件内 -->

<!DOCTYPE html>

<!-- html的根元素 -->

<html lang="">

  <!-- 包含文档的元数据 -->

  <head>

    <!-- 设置字符编码为utf-8支持多种语言 -->

    <meta charset="utf-8">

    <!-- 提示ie浏览器以最高版本的渲染引擎渲染页面 -->

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

    <!-- 设置视图,使得页面在浏览器上面可以自适应页面 -->

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

    <!-- 目的是为了设置网页图标,绿色的那个vue,这里的BASE_URL是webpack的环境变量,指向公共资源favicon-ico -->

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

    <!-- 通过webpack的htmlWebpackPlugin插件动态注入标题 -->

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

  </head>

  <!-- 包含页面的主题内容 -->

  <body>

    <!-- 如果当前浏览器禁用js,就会显示如下部分 -->

    <noscript>

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

    </noscript>

    <!-- 用于挂载vue应用的容器,将app的内容渲染到此处 -->

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

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

     <!-- 打包后的Javascrip文件会自动注入此处 -->

  </body>

</html>

3.src/App-vue 

(档 Vue 应用挂载到 index.html 中的 <div id="app"></div> 元素上的时候就会开始启动vue项目,其中App.vue是根组件)

<!-- 这是vue应用的主组件,其他的组件都会嵌套到这个组件内,档主html文件运行之后,-->

 <!-- app挂载到html上面之后,就会开始启动vue项目,从这里开始 -->

 <!-- template部分用于定义组件的html(即页面上显示的内容) -->

<template>

  <!-- app这是一个容器元素,整个组件的内容都包裹在这个div内部,挂载在main.js的文件中的app上 -->

  <div id="app">

    <!-- 这是vue的插值语法用于动态绑定数据 -->

    <h1>{{ message }}</h1>

    <!-- 这是一个自定义组件HelloWorld的用法 -->

    <HelloWorld msg="Welcome to Your Vue.js App"/>

    <!-- 是vue router提供的内容,用于显示当前路由对于的组件内容,内部放置了两个导航连接 -->

    <router-view>

      <router-link to="/">Home</router-link>

      <router-link to="/About">About</router-link>

    </router-view>

  </div>

</template>

<!-- 部分用于定义组件的逻辑,包括数据、方法、生命周期等。 -->

<script>

// 从 ./components/HelloWorld.vue 文件中导入 HelloWorld 组件,这样就可以在当前组件中使用HelloWorld

import HelloWorld from './components/HelloWorld.vue'

// 定义并导出当前组件的配置对象

export default {

  name: 'App',

  data() {

    return {

      message: "Hello, Vue!app通过message这里是我添加的vue部分" // 定义响应式数据

    };

  },

  // 注册子组件,使其可以在模板中使用

  components: {

    HelloWorld

  }

}

</script>

<!-- 部分用于定义组件的CSS样式 -->

<style>

#app {

  /* 设置字体 */

  font-family: Avenir, Helvetica, Arial, sans-serif;

  /* 用于优化字体的抗锯齿效果 */

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  /* 将文本居中对齐 */

  text-align: center;

  /* 设置文本颜色。 */

  color: #47812b;

  /* 设置顶部外边距 */

  margin-top: 60px;

}

</style>

4.src/router/index.js 

// 路由配置文件

// 需要提前安装vue-router 终端输入命令 npm install vue-router

// 导入必要的模块,其中createRouter和createWebHistory是从vue-router包中导入的,

// 其中createRouter用于创建一个路由实例

// createWebHistory是一种路由模式,用于实现基于浏览器历史记录的路由导航

import { createRouter, createWebHistory } from 'vue-router';

// 从../views/Home.vue 文件中导入 Home 组件

import Home from '../views/Home.vue';

// 包含了路由规则的数组,每个路由规则定义了路径path和对应的组件component

const routes = [

  {

    path: '/',

    name: 'Home',

    component: Home

  }

];

// 用于创建一个路由实例,接受一个配置对象

const router = createRouter({

  // 指定路由的模式。在这里,使用了 createWebHistory(),表示使用浏览器的历史记录模式

  history: createWebHistory(),

  // 提供路由规则数组,定义了路径和组件的映射关系

  routes

});

// 导出路由实例

export default router;

5.页面级组件Home.vue和About.vue

(Vue Router 会根据当前 URL 加载对应的组件,并将其渲染到 <router-view> 中)

5-1  Home.vue

<template>

    <div>

      <h1>这里是Home页面级别Page</h1>

    </div>

  </template>

  <!-- 定义组件逻辑 -->

  <script>

// export default这是 ES6 的模块导出语法,用于将当前组件定义导出,使其可以在其他地方被导入和使用。

// 在 Vue 中,每个 .vue 文件都是一个独立的模块

   export default {

    name: 'Home'         //定义组件名为Home

  };

  </script>

5-2  About.vue

 <template>

    <div>

      <h1>About Page</h1>

    </div>

  </template>

  <script>

  export default {

    name: 'About'

  };

  </script>

6. src/assets/

(用于放置一些静态资源)

7.components

(用于放置一些可复用的子组件) 

8.views

(用于放置一些页面级组件,通常是路由的直接目标)

特性src/componentssrc/views
用途可复用的子组件页面级组件
依赖性独立,不依赖于页面逻辑依赖于路由配置
嵌套关系可以嵌套在其他组件或页面中组合多个子组件构建页面
路由管理不直接参与路由管理直接作为路由目标被渲染
示例按钮、输入框、导航栏等首页、关于页、详情页等

other解释

 什么是,en或zh-CN

<html lang="en"> <!-- 页面内容为英语 -->
<html lang="zh-CN"> <!-- 页面内容为简体中文 -->

文档的元数据

关于文档的信息,用于描述HTML文档的属性,但不会直接显示在网页上。它们通常放在HTML的<head>标签中,常见的元数据包括:

  • <meta charset="utf-8">:指定字符编码,确保网页支持多种语言。

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">:设置网页在移动设备上的显示方式,确保自适应屏幕。

  • <meta name="description" content="网页描述">:提供网页的简短描述,用于搜索引擎结果页面(SERP)。

  • <title>:设置网页标题,显示在浏览器标签页上。

  • <link>:用于引入外部资源,如CSS文件、图标等。

  • <script>:用于引入JavaScript文件。

这些元数据帮助浏览器、搜索引擎或其他工具更好地理解和处理网页内容。

BASE_URL指向公共资源

<div id="app"></div> 挂载应用解释

html文件

<div id="app">
  <h1>{{ message }}</h1>
</div>

在Vue实例中:

data() {
  return {
    message: "Hello, Vue!"
  };
}

最终,浏览器会显示:

<div id="app">
  <h1>Hello, Vue!</h1>
</div>

在 Webpack 的构建流程中,dist 文件夹(或你指定的其他输出目录)是专门用于存放构建后的文件的地方。这些文件是经过 Webpack 打包、优化后的最终产物,可以直接部署到生产环境中。以下是将文件输出到 dist 文件夹的原因:

分离开发环境和生产环境 

什么是DOM元素?

DOM(Document Object Model,文档对象模型)是HTML文档的编程接口。它将HTML文档表示为一个由节点和对象组成的树状结构,允许开发者通过JavaScript动态访问和操作文档内容

在Vue.js中,Vue接管了DOM操作,开发者不需要直接操作DOM,而是通过声明式的数据绑定来实现页面的更新。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Qt】QWidget属性介绍

&#x1f3e0;个人主页&#xff1a;Yui_ &#x1f351;操作环境&#xff1a;Qt Creator &#x1f680;所属专栏&#xff1a;Qt 文章目录 前言1. enabled属性2.geometry属性2.1 改变控件位置2.2 女神表白程序2.3 知识补充——window frame 3. windowsTitle属性4. windowIcon属性…

嵌入式八股ARM篇

前言 ARM篇主要介绍一下寄存器和中断机制,至于汇编这一块…还请大家感兴趣自行学习 1.寄存器 R0 - R3 R4 - R11 寄存器 R0 - R3一般用作函数传参 R4 - R11用来保存程序运算的中间结果或函数的局部变量 在函数调用过程中 注意在发生异常的时候 cortex-M0架构会自动将R0-R3压入…

nerfstudio以及相关使用记录(长期更新)

NeRFStudio 是NeRF/3DGS研究和开发的集成平台。 提供了一个用户友好的界面和一系列工具&#xff0c;帮助研究人员和开发者更高效地构建、训练和评估 NeRF 模型。以前使用的时候用完就丢一边了&#xff0c;没有注意记录&#xff0c;现在有一个工程调用了nerfstudio&#xff0c;部…

《论分布式系统架构设计及其应用》架构师论文

【摘要】 2022年3月&#xff0c;我参与了某金融科技公司“智能风控云平台”项目的研发工作&#xff0c;担任系统架构师职务&#xff0c;负责分布式系统架构设计与核心技术选型。该平台旨在为银行、保险等金融机构提供实时风险评估、反欺诈及数据服务&#xff0c;需支撑每秒十万…

黄金还能再涨吗?

写在前面&#xff1a;【财富自由计算助手】已上线&#xff0c;快算算你的财富自由要多少 逻辑比事实更真实。 最近&#xff0c;黄金涨得妈都不认。 连菜市场大妈都在讨论&#xff0c;要不要囤点黄金。 2022 年初&#xff0c;俄乌冲突升级为全面战争以来&#xff0c;黄金价格…

AutoDev × MCP 双向赋能:AutoDev 即 MCP 服务,MCP 服务即 AutoDev 指令

在 Agentic Coding 这一话题下&#xff0c;工具使用&#xff08;Tool Use/Function calling&#xff09;是一个非常有意思的话题。完成一个软件开发任务&#xff0c;需要使用到大量的工具&#xff0c; 除去在 IDE 及其插件生态本身提供的功能外&#xff0c;还会使用到大量的外部…

DataWhale 大语言模型 - GPT和DeepSeek模型介绍

本课程围绕中国人民大学高瓴人工智能学院赵鑫教授团队出品的《大语言模型》书籍展开&#xff0c;覆盖大语言模型训练与使用的全流程&#xff0c;从预训练到微调与对齐&#xff0c;从使用技术到评测应用&#xff0c;帮助学员全面掌握大语言模型的核心技术。并且&#xff0c;课程…

安装 oepn-webui报错 Cannot connect to host api.openai.com:443 ssl

一、发现问题 安装 open-webui 的报错 api.openai.com 不通&#xff0c;因为 open-webui 最新版和以前的不一样了&#xff0c;所以网上的很多资料都用不了&#xff0c;经过一番摸索&#xff0c;找到解决办法 另外如果发现浏览器打开之后白屏&#xff0c;则是因为后台正在配置…

【6】树状数组学习笔记

前言 树状数组是我学的第一个高级数据结构&#xff0c;属于 log ⁡ \log log 级数据结构。 其实现在一般不会单独考察数据结构&#xff0c;主要是其在其他算法&#xff08;如贪心&#xff0c;DP&#xff09;中起到优化作用。 长文警告&#xff1a;本文一共 995 995 995 行…

研发团队协作软件推荐:18款工具对比

本文将深入对比18款主流研发团队协作软件&#xff1a;PingCode、 Worktile、钉钉、飞书、企业微信、Teambition、蓝湖、石墨文档、明道等。 在当今信息化时代&#xff0c;研发团队协作软件已经成为企业提高工作效率、改善团队沟通与管理的重要工具。借助这些软件&#xff0c;企…

Java8的新特性

1.Lambda表达式和函数式接口 Lambda的基础&#xff1a;函数式接口 Java 8与之前版本的区别&#xff1a; Java 7及之前&#xff1a;接口中只能包含抽象方法&#xff0c;无法通过函数式接口简洁地表示Lambda表达式。Java 8&#xff1a;通过FunctionalInterface注解&#xff0c;明…

数据库管理-第302期 国产类RAC架构数据库网络连接方式(20250314)

数据库管理302期 2025-03-14 数据库管理-第302期 国产类RAC架构数据库网络连接方式&#xff08;20250314&#xff09;1 Oracle RAC2 DMDSC3 YAC4 KES RAC总结 数据库管理-第302期 国产类RAC架构数据库网络连接方式&#xff08;20250314&#xff09; 作者&#xff1a;胖头鱼的鱼…

Spring框架详解(IOC容器-上)

IOC&#xff08; Inversion of Control&#xff0c;控制反转&#xff09;和DI&#xff08;dependency injection&#xff09;是Spring框架的核心特性&#xff0c;也是Spring框架的基础。 Spring框架作为一个IOC容器&#xff0c;负责加载、创建和管理Spring Bean。 接下来介绍…

架构学习第八周--Kubernetes博客搭建

目录 一、整体架构 二、部署MySQL主从 三、部署Redis哨兵 四、部署WordPress 五、注意事项 一、整体架构 本项目为在一主三从的Kubernetes集群上部署WordPress博客。因为WordPress部分容器版本自行集成Apache和PHP服务&#xff0c;因此在Kubernetes上部署WordPress只需提供…

【品铂科技】在高精度定位行业内的口碑怎么样?

1. ‌技术实力与行业认可‌ 公司自主研发的ABELL无线实时定位系统在复杂环境中&#xff08;如工业、司法监狱等&#xff09;展现出厘米级&#xff08;5-10厘米&#xff09;高精度定位能力&#xff0c;客户反馈系统稳定性强、抗干扰能力突出&#xff0c;成为行业技术标杆‌。参…

长度最小的子数组-滑动窗口解法

本来觉得自己双指针学的还可以了&#xff0c;于是今天直接刷了一道滑动窗口题&#xff0c;没想到还是被坑绊倒了两次。这次我想记录在博客里&#xff0c;不仅可以防止我以后重蹈覆辙&#xff0c;兴许也还可以帮助到其他人。 题目来自力扣&#xff1a;209. 长度最小的子数组 - …

深入理解Linux网络随笔(七):容器网络虚拟化--Veth设备对

深入理解Linux网络随笔&#xff08;七&#xff09;&#xff1a;容器网络虚拟化 微服务架构中服务被拆分成多个独立的容器&#xff0c;docker网络虚拟化的核心技术为&#xff1a;Veth设备对、Network Namespace、Bridg。 Veth设备对 veth设备是一种 成对 出现的虚拟网络接口&…

深入理解 Maven BOM 及其继承特性

深入理解 Maven BOM 及其继承特性 一、什么是 Maven BOM&#xff1f; Maven BOM&#xff08;Bill Of Materials&#xff0c;物料清单&#xff09;是一种特殊的 Maven 项目&#xff0c;用于集中管理依赖项的版本信息。BOM 项目本身并不包含实际的代码或资源&#xff0c;而仅仅…

C语言(25)

一.数据在内存中的存储 1.整数在内存中的存储 整数在内存中以二进制的形式储存&#xff0c;分别为原码&#xff0c;补码&#xff0c;反码 有符号的整数&#xff0c;在上述三种形式都有符号位和数值位两个部分&#xff0c;符号位为0是正数&#xff0c;1是负数&#xff0c;最高…

一篇博客搞定时间复杂度

时间复杂度 1、什么是时间复杂度&#xff1f;2、推导大O的规则3、时间复杂度的计算3.1 基础题 13.2 基础题 23.3基础题 33.4进阶题 13.5进阶题 23.6 偏难题 13.7偏难题 2&#xff08;递归&#xff09; 前言&#xff1a; 算法在编写成可执行程序后&#xff0c;运行时要耗费时间和…