第一个vue项目

news2025/3/19 3:03:08

项目目录 

启动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.coloradmin.cn/o/2317538.html

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

相关文章

基于CNN的多种类蝴蝶图像分类

基于CNN的多种类蝴蝶图像分类

基于CNN的多种类蝴蝶图像分类&#x1f98b; 基于卷积神经网络对64992786张图像&#xff0c;75种不同类别的蝴蝶进行可视化分析、模型训练及分类展示 导入库 import pandas as pd import os import matplotlib.pyplot as plt import seaborn as sns import numpy as np from …
阅读更多...
Unity插件-适用于画面传输的FMETP STREAM使用方法（三）基础使用

Unity插件-适用于画面传输的FMETP STREAM使用方法（三）基础使用

目录 一、插件介绍 二、组件介绍 三、Game View Streaming 1、使用 FM Network UDP 的基本设置 Server Scene Client Scene 2、使用使用 FM WebSocket 的基本设置 四、Audio Streaming 五、Microphone Streaming 一、插件介绍 ​​​​​​Unity插件-适用于画面传输的…
阅读更多...
微信小程序wx.request接口报错(errno: 600001, errMsg: “request:fail -2:net::ERR_FAILED“)

微信小程序wx.request接口报错(errno: 600001, errMsg: “request:fail -2:net::ERR_FAILED“)

来看看报错 报错如下: 请求发送部分,代码如下: uni.request({url: self.serverUrl "/getRealName",method: GET,data: {"code": self.info.code,},header: {"Authorization": uni.getStorageSync(tokenHead) uni.getStorageSync(token)}}…
阅读更多...
基于Python+MySQL编写的（WinForm）图书管理系统

基于Python+MySQL编写的（WinForm）图书管理系统

一、项目需求分析 1.1 项目介绍 项目背景 图书馆管理系统是一些单位不可缺少的部分,书籍是人类不可缺少的精神食粮&#xff0c;尤其对于学校来说&#xff0c;尤其重要。所以图书馆管理系统应该能够为用户提供充足的信息和快捷的查询手段。但一直以来人们使用传统人工的方式管…
阅读更多...
[贪心算法] 摆动序列

[贪心算法] 摆动序列

1.解析 这里我们的贪心体现在&#xff0c;这里我们只需要找到每一个拐点位置的数字即可&#xff0c; 证明&#xff1a; 当我们在A点时&#xff0c;我们下一步的选择有四种 A到D这个线段内的数字&#xff08;不包括D&#xff09;选择D点D到F的点F之后的点 对于A到D来说&#xf…
阅读更多...
WPF未来展望：紧跟技术发展趋势，探索新的可能性

WPF未来展望：紧跟技术发展趋势，探索新的可能性

WPF未来展望&#xff1a;紧跟技术发展趋势&#xff0c;探索新的可能性 一、前言二、WPF 与.NET 技术的融合发展2.1 拥抱.NET Core2.2 利用.NET 5 及后续版本的新特性 三、WPF 在新兴技术领域的应用拓展3.1 与云计算的结合3.2 融入物联网生态 四、WPF 在用户体验和设计方面的创新…
阅读更多...
低空经济腾飞：无人机送货、空中通勤，未来已来

低空经济腾飞：无人机送货、空中通勤，未来已来

近年来&#xff0c;低空经济逐渐成为社会关注的焦点。从无人机送货到“空中的士”&#xff0c;再到飞行培训的火热进行&#xff0c;低空经济正迎来前所未有的发展机遇。随着技术进步和政策支持&#xff0c;这一曾经看似遥远的未来场景&#xff0c;正逐步变为现实。 低空经济如何…
阅读更多...
QT编译器mingw与msvc区别及环境配置

QT编译器mingw与msvc区别及环境配置

一.QT编译器mingw与msvc主要区别 二.QT开发环境配置 1. MinGW 配置 安装步骤&#xff1a; 通过 Qt 官方安装器 安装时勾选 MinGW 组件&#xff08;如 Qt 6.7.0 MinGW 64-bit&#xff09;。 确保系统环境变量包含 MinGW 的 bin 目录&#xff08;如 C:\Qt\Tools\mingw1120_64…
阅读更多...
【css酷炫效果】纯CSS实现进度条加载动画

【css酷炫效果】纯CSS实现进度条加载动画

【css酷炫效果】纯CSS实现进度条加载动画 缘创作背景html结构css样式完整代码基础版进阶版 效果图 通过CSS渐变与背景位移动画&#xff0c;无需JavaScript即可创建流体动态进度条。 想直接拿走的老板&#xff0c;链接放在这里&#xff1a;https://download.csdn.net/download/u…
阅读更多...
Feedback-Guided Autonomous Driving

Feedback-Guided Autonomous Driving

Feedback-Guided Autonomous Driving idea 问题设定&#xff1a;基于 CARLA 的目标驱动导航任务&#xff0c;通过知识蒸馏&#xff0c;利用特权智能体的丰富监督信息训练学生传感器运动策略函数 基于 LLM 的端到端驱动模型&#xff1a;采用 LLaVA 架构并添加航点预测头&#…
阅读更多...
图解AUTOSAR_CP_WatchdogDriver

图解AUTOSAR_CP_WatchdogDriver

AUTOSAR WatchdogDriver模块详解 AUTOSAR MCAL层看门狗驱动模块详细解析 目录 1. 模块概述2. 架构位置 2.1. 组件架构 3. 主要功能4. API接口5. 配置参数 5.1. 配置模型 6. 错误代码7. 状态管理 7.1. 状态机 8. 处理流程 8.1. 活动流程 9. 操作序列 9.1. 典型操作序列 10. 硬件…
阅读更多...
大数据学习（65）- Hue详解

大数据学习（65）- Hue详解

&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一…
阅读更多...
C语言学习笔记(第三部份)

C语言学习笔记(第三部份)

说明&#xff1a;由于所有内容放在一个md文件中会非常卡顿&#xff0c;本文件将接续C_1.md文件的第三部分 整型存储和大小端 引例&#xff1a; int main(void) {// printf("%d\n", SnAdda(2, 5));// PrintDaffodilNum(10000);// PrintRhombus(3);int i 0;int arr[…
阅读更多...
深入理解蒸馏、Function Call、React、Prompt 与 Agent

深入理解蒸馏、Function Call、React、Prompt 与 Agent

AI基础概念与实操 一、什么是蒸馏二、如何理解Function Call、React、Prompt与Agent&#xff08;一&#xff09;Function Call与Agent&#xff08;二&#xff09;Agent中的React概念&#xff08;三&#xff09;Prompt与Agent的关联 实操演练function callprompt 一、什么是蒸馏…
阅读更多...
记录一个SQL自动执行的html页面

记录一个SQL自动执行的html页面

在实际工作场景中&#xff0c;需要运用到大量SQL语句更新业务逻辑&#xff0c;对程序员本身&#xff0c;写好的sql语句执行没有多大问题&#xff08;图1&#xff09;&#xff0c;但是对于普通用户来说还是有操作难度的。因此我们需要构建一个HTML页面&#xff08;图2&#xff0…
阅读更多...
qt介绍图表 charts 一

qt介绍图表 charts 一

qt chartsj基于Q的Graphics View框架&#xff0c;其核心组件是QChartView和QChart.QChartView是一个显示图表的独立部件&#xff0c;基类为QGraphicsView.QChar类管理图表的序列&#xff0c;图例和轴示意图。 绘制一个cos和sin曲线图&#xff0c;效果如下 实现代码 #include…
阅读更多...
Transformer：GPT背后的造脑工程全解析（含手搓过程）

Transformer：GPT背后的造脑工程全解析（含手搓过程）

Transformer&#xff1a;GPT背后的"造脑工程"全解析&#xff08;含手搓过程&#xff09; Transformer 是人工智能领域的革命性架构&#xff0c;通过自注意力机制让模型像人类一样"全局理解"上下文关系。它摒弃传统循环结构&#xff0c;采用并行计算实现高…
阅读更多...
S32K144入门笔记（十）：TRGMUX的初始化

S32K144入门笔记（十）：TRGMUX的初始化

目录 1. 概述 2. 代码配置 1. 概述 书接上回&#xff0c;TRGMUX本质上是一个多路选择开关&#xff0c;根据用户手册中的描述&#xff0c;它可以实现多个输入的选择输出&#xff0c;本篇文章将验证如何通过配置工具来生成初始化配置代码。 2. 代码配置 笔者通过配置TRGMUX实现…
阅读更多...
有了大模型为何还需要Agent智能体

有了大模型为何还需要Agent智能体

一、什么是Agent&#xff1f; Agent&#xff08;智能体&#xff09; 是一种能感知环境、自主决策、执行动作的智能实体&#xff0c;当它与大语言模型&#xff08;如通义千问QWen、GPT&#xff09;结合时&#xff0c;形成一种**“增强型AI系统”**。其核心架构如下&#xff1a;…
阅读更多...
DNS主从服务器

DNS主从服务器

1.1环境准备 作用系统IP主机名web 服务器redhat9.5192.168.33.8webDNS 主服务器redhat9.5192.168.33.18dns1DNS 从服务器redhat9.5192.168.33.28dns2客户端redhat9.5192.168.33.7client 1.2修改主机名和IP地址 web服务器 [rootweb-8 ~]# hostnamectl hostname web [rootweb-8…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023