当前位置： 首页 > news >正文

前端框架笔记

news 2025/9/9 21:06:05

Vue.js的安装

安装Vue.js有两种方法：

（1）类似于Bootstrap或jQuery，直接通过HTML文件中的标签引用。为了方便开发者使用，Vue.js提供了相关的CDN，通过如下代码可以引用最新版本的Vue.js：

` <script src="https://cdn.jsdelivr.net/npm/vue"></script>`

通过指定版本号，可以引用不同版本的Vue.js，这样项目工程不会因为新版本的Vue.js而出现不兼容的问题。

` <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>`

除了CDN方式外，还可以下载源代码直接引入。对于一个大型项目而言，直接引入JavaScript文件的方式可能并不便捷，所以笔者采用npm的安装方式。

（2）npm安装方式。
新建项目文件夹，使用npm init命令初始化项目，然后使用如下命令安装Vue.js，与Express的安装步骤一样。
npm install vue
package.json文件会自动添加Vue.js的依赖项，代码如下：

` {"name": "2-3-2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"vue": "^2.6.10"}}`用Vue.js编写Hello World——CDN方式

介绍了安装Vue.js的两种方式，第一种是通过CDN方式或引入静态文件，通过CDN方式编写Hello World程序较为简单，下面直接演示。

【示例】用Vue.js编写HelloWorld——1。
新建HTML文件，命名为index.html，引入Vue.js。完整的代码如下：
`

 01 <!--HelloWorld-->02 <html lang="en">03 <head>04     <meta charset="UTF-8">05     <title>Title</title>06 </head>07 <body>08 <div id="app">09     <!--显示文字内容-->10         {{text}}     11 </div>12 <!--引入Vue-->      13   <script src="https://cdn.jsdelivr.net/npm/vue"></script>14 <script>15     <!--实例化Vue-->16     var vm = new Vue({17         el: '#app',                             //指定属性id里的app18         //数据内容19         data: {20             text: 'hello world!!!'21         }22     })23 </script>24 </body>25 </html> `

通过浏览器打开index.html，网页效果如图

1683521467187.png

用Vue.js编写Hello World——Webpack方式

对于Vue.js框架而言，输出一个简单的Hello World程序可能并不简单，浏览器本身不识别后缀为vue的文件，所以vue文件不能通过浏览器直接打开，类似于HTML这样的页面也无法直接引入vue文件。
如果想要使用Vue.js编写程序，需要Webpack打包工具将.vue文件编译成普通的JavaScript文件，再通过页面的引入去执行这个JavaScript文件。

【示例2-5】用Vue.js编写HelloWorld——2。

（1）新建项目工程，使用npm init初始化项目代码，此时生成package.json文件，接着安装Webpack，命令如下：
npm install webpack

（2）Webpack安装后需要再安装webpack-cli（一个使用Webpack的命令行工具），命令如下：
npm install webpack-cli

（3）安装Vue.js，命令如下：
npm install vue

（4）安装vue-loader和vue-template-compiler，这样才可以让Webpack识别Vue.js，安装命令如下：
npm install vue-loader
npm install vue-template-compiler

安装完成后的package.json文件如下：

 `{"name": "2-3-2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"vue": "^2.6.10","vue-loader": "^15.7.1","vue-template-compiler": "^2.6.10"},"devDependencies": {"webpack": "^4.39.3","webpack-cli": "^3.3.7"}`

（5）新建一个webpack.config.js文件，用于配置Webpack打包工具。Webpack的配置需要指定入口文件并且引入vue-loader，完整的代码如下：

 `01 const path = require('path');02 const VueLoaderPlugin = require('vue-loader/lib/plugin');03 04 module.exports = {05     //指定入口文件06     entry:path.join(__dirname, 'app.js'),07     //指定输出的文件位置和文件名称08     output: {09         path: path.join(__dirname,'dist'),10         filename: 'build.js'11     },12     plugins: [13         //在使用新版的vue-loader时，必须引入这个插件14         new VueLoaderPlugin()15     ],16     module: {17         //指定不同格式的规则18         rules: [19             //解析.vue文件20             {21                 test: /\.vue$/,22                 loader: 'vue-loader'23             },24         ]25     }26 }`

这里指定了入口文件导出的位置和引入模块时的一些规则，通过这个配置让Webpack可以编译同级目录中的app.js文件，并且在dist文件夹中建立新的build.js作为导出的文件。

（6）编辑app.js中的内容。在app.js中需要引入Vue.js、获取页面中的body节点，并且将所有需要显示的内容挂载在上面，完整的代码如下：

` 01 //引入vue02 import Vue from 'vue'03 import Hello from './helloworld.vue';04 05 const root = document.createElement('div')06 document.body.appendChild(root)07 08 //mount将Hello模块挂载到root根节点中09 new Vue({10     render: (h) => h(Hello)11 }).$mount(root)`

（7）上述代码引入了一个还未建立的Hello模块，其文件名为helloworld.vue，也就是本例的Vue.js部分，该文件中指定了一个变量，赋值为HelloWorld并显示在页面上。

 01 <template>02     <div>03         <p>{{text}}</p>04     </div>05 </template>06 07 <script>08     export default{09         name: "Hello",10         data(){11             return {12                 text: 'HelloWorld!!!'13             }14         }15     }16

其中，{{text}}部分显示下方script/data中text的值“HelloWorld!!!”，而模板的部分将会被挂载在一个HTML文件的body节点中，最终将所有的内容显示在页面中。

（8）Hello World实例到此就完成了。在命令行中使用如下命令打包：
webpack --config webpack.config.js
也可以将此命令添加到package.json中，通过webpack-cli的方式使用，这样会更加方便。修改后的代码如下：

{"name": "2-3-2","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack --config webpack.config.js"},"author": "",……}

在命令行窗口中使用如下命令完成打包操作，
npm run build

相关文章：

前端框架笔记

Vue.js的安装 安装Vue.js有两种方法&#xff1a; &#xff08;1&#xff09;类似于Bootstrap或jQuery&#xff0c;直接通过HTML文件中的标签引用。为了方便开发者使用&#xff0c;Vue.js提供了相关的CDN&#xff0c;通过如下代码可以引用最新版本的Vue.js&#xff1a; <sc…...

编程日记 2023/6/10 16:05:09

详细设计文档

1. 引言 1.1 目的 1.2 范围 1.3 定义、缩略语和缩写 1.4 参考文献 1.5 概述 2. 系统架构设计 2.1 总体架构 2.2 模块划分 2.3 数据流程设计 2.4 接口设计 3. 模块详细设计 3.1 登录模块详细设计 3.1.1 类设计 3.1.2 方法设计 3.1.3 数据库表设计 3.1.4 界面设计 3.2 文章管理模…...

编程日记 2023/6/10 16:00:08

Java011——Java数据类型转换（基本数据类型）

回顾&#xff1a;Java八大基本数据类型 大类 类型名称 关键字 占用内存 取值范围 --------------------------------------------------------------------------------------------|字节型 byte 1 字节 -128~127 整型 |短整型 short 2 字节 -32768~32…...

编程日记 2023/6/10 15:55:07

mybatis-plus用法（二）

(5条消息) mybatis-plus用法&#xff08;一&#xff09;_渣娃工程师的博客-CSDN博客 AR模式 ActiveRecord模式&#xff0c;通过操作实体对象&#xff0c;直接操作数据库表。与ORM有点类似。 示例如下 让实体类User继承自Model package com.example.mp.po; import com.bao…...

编程日记 2023/6/10 15:50:06

SQL笔记-存储过程+循环

存储过程循环使用方法 Oracle Oracle中存储过程的循环使用方法如下&#xff1a; DECLAREi NUMBER; BEGINi : 1;WHILE i < 10 LOOPDBMS_OUTPUT.PUT_LINE(i || i);i : i 1;END LOOP; END;其中&#xff0c;DECLARE用于声明变量&#xff0c;BEGIN和END用于标识存储过程的开始…...

编程日记 2023/6/10 15:45:05

HNU-操作系统OS-作业1（4-9章）

这份文件是OS_homework_1 by计科2102 wolf 202108010XXX 文档设置了目录，可以通过目录快速跳转至答案部分。 第四章 4.1用以下标志运行程序：./process-run.py -l 5:100,5:100。CPU 利用率（CPU 使用时间的百分比）应该是多少？为什么你知道这一点？利用 -c 标记查看你…...

编程日记 2023/6/10 15:40:04

springboot 精华

一、基础 官方文档地址&#xff1a;Spring Boot 注&#xff1a;以下部分例子 有些用到 .properties 方式&#xff0c;有些用 .yml方式&#xff0c;两者可自行学习&#xff0c;这里部分是为了省空间而写 .properties 方式。 1、泛谈 &#xff08;1&#xff09;优势 快速构建…...

编程日记 2023/6/10 15:35:03

我用ChatGPT写2023高考语文作文（三）：新课标I卷

2023年 新课标I卷 适用地区&#xff1a;山东、福建、湖北、江苏、广东、湖南、河北、浙江 好的故事&#xff0c;可以帮我们更好地表达和沟通&#xff0c;可以触动心灵、启迪智慧&#xff1b;好的故事&#xff0c;可以改变一个人的命运&#xff0c;可以展现一个民族的形象……故…...

编程日记 2023/6/10 15:30:02

HTML 标签的学习

1.HTML 的结构 前端三剑客: HTML CSS JS,本章我们学习的是HTML HTML > 超文本标记语言 HTML代码是由"标签"构成的. 形如 <body>hello</body>标签名 (body) 放到 < > 中大部分标签成对出现. 为开始标签, 为结束标签.少数标签只有开始标签…...

编程日记 2023/6/10 15:25:00

计算耗时为微秒的方法(包含：时/分/秒/毫秒/微秒/纳秒)

计算耗时为微秒的方法1 #include<stdio.h> #include <windows.h> int main() {int a[10002];int i 0;double run_time;_LARGE_INTEGER time_start; //开始时间_LARGE_INTEGER time_over; //结束时间double dqFreq; //计时器频率LARGE_INTEGER f; //计时器频率Qu…...

编程日记 2023/6/10 15:19:59

通过 Python 封装关键词搜索阿里巴巴商品api接口

以下是使用 Python 封装关键词搜索阿里巴巴商品列表数据的步骤&#xff1a; 使用 requests 库向阿里巴巴搜索接口发送 HTTP 请求&#xff0c;可以使用 GET 或 POST 方法&#xff0c;请求参数中应包含搜索关键词、每页展示数量、当前页码等信息。 解析返回的 response 中的 HTM…...

编程日记 2023/6/10 15:14:58

分布式光伏消纳的微电网群共享储能配置策略研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/6/10 15:09:57

C语言写网络爬虫总体思路

使用C语言编写爬虫可以实现网络数据的快速获取和处理&#xff0c;适用于需要高效处理海量数据的场景。与其他编程语言相比&#xff0c;C语言具有较高的性能和灵活性&#xff0c;可以进行底层操作和内存管理&#xff0c;适合处理较复杂的网络请求和数据处理任务。 但是&#xf…...

编程日记 2023/6/10 15:04:56

机器学习实战六步法之训练模型、优化模型、部署模型（七）

要落地一个机器学习的项目&#xff0c;是有章可循的&#xff0c;通过这六个步骤&#xff0c;小白也能搞定机器学习。 看我闪电六连鞭&#xff01;&#x1f923; 训练模型 当确定好机器学习算法之后&#xff0c;就可以通过训练数据集中的特征和标签&#xff0c;根据样本数据的…...

编程日记 2023/6/10 14:59:54

《C++高级编程》读书笔记（七：内存管理）

1、参考引用 C高级编程&#xff08;第4版&#xff0c;C17标准&#xff09;马克葛瑞格尔 2、建议先看《21天学通C》 这本书入门&#xff0c;笔记链接如下 21天学通C读书笔记&#xff08;文章链接汇总&#xff09; 1. 使用动态内存 1.1 如何描绘内存 在本书中&#xff0c;内存单…...

编程日记 2023/6/10 14:54:53

Scrum团队的三个角色

Scrum团队中包括三个角色&#xff0c;他们分别是产品负责人、开发团队和 Scrum Master。 Scrum 团队是自组织、跨职能的完整团队。自组织团队决定如何最好地完成他们的工作,而不是由团队外的其他人来指挥他 们。 跨职能的团队拥有完成工作所需要的全部技能,不需要依赖团队外部…...

编程日记 2023/6/10 14:49:52

python环境中使用 requirement.txt 安装依赖

在 Python 项目中&#xff0c;我们通常使用 requirement.txt 文件记录项目所依赖的第三方库&#xff0c;以便在其他机器上部署项目时更方便地安装这些依赖。在使用 requirement.txt 安装依赖时&#xff0c;可以按照以下步骤进行&#xff1a; 安装 pip 要使用 requirement.txt…...

编程日记 2023/6/10 14:44:51

UE5 材质常用大全

名称快捷方式类别计算方式/简介用法/说明Contant1+鼠标左键基础常量定义浮点数，与多通道运算时，自动影响多通道。各种基础参数Constant2Vector2+鼠标左键基础常量2维向量，2通道，影响2个通道。R/G,用于调整UVConstant3Vector3+鼠标左键基础常量3维向量，3通道，影响3个通道R…...

编程日记 2023/6/10 14:39:50

笔记本安装centos操作系统

一、下载centos镜像 centos官方历史版本&#xff1a;Index of / 常用的镜像文件类型介绍&#xff1a; DVD ISO&#xff1a;普通光盘完整安装版镜像&#xff0c;可离线安装到计算机硬盘上&#xff0c;包含大量的常用软件&#xff08;一般选择这种jing&#xff09;。 Everythi…...

编程日记 2023/6/10 14:34:49

Polarion工作流插件(自定义)

创建插件命名插件配置插件Condition&Function package com.polarion.capital.example.conditions;import com.polarion.alm.tracker.model.IWorkItem; import com.polarion.alm.tracker.workflow.IArguments; import com.polarion.alm.tracker.workflow.ICallContext; impo…...

编程日记 2023/6/10 14:29:48

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/9/1 12:53:45

【JVM】- 内存结构

引言 JVM&#xff1a;Java Virtual Machine 定义&#xff1a;Java虚拟机&#xff0c;Java二进制字节码的运行环境好处&#xff1a; 一次编写&#xff0c;到处运行自动内存管理&#xff0c;垃圾回收的功能数组下标越界检查&#xff08;会抛异常&#xff0c;不会覆盖到其他代码…...

编程新知 2025/9/9 14:49:12

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2025/8/21 18:40:12

《用户共鸣指数（E）驱动品牌大模型种草：如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

编程新知 2025/8/26 10:14:34

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

编程新知 2025/7/20 15:22:30

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/7/19 3:59:22

使用Matplotlib创建炫酷的3D散点图：数据可视化的新维度

文章目录 基础实现代码代码解析进阶技巧1. 自定义点的大小和颜色2. 添加图例和样式美化3. 真实数据应用示例实用技巧与注意事项完整示例（带样式）应用场景在数据科学和可视化领域，三维图形能为我们提供更丰富的数据洞察。本文将手把手教你如何使用Python的Matplotlib库创建引…...

编程新知 2025/6/16 21:06:50

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

编程新知 2025/7/8 0:38:36

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

PostgreSQL——环境搭建

一、Linux # 安装 PostgreSQL 15 仓库 sudo dnf install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-$(rpm -E %{rhel})-x86_64/pgdg-redhat-repo-latest.noarch.rpm# 安装之前先确认是否已经存在PostgreSQL rpm -qa | grep postgres# 如果存在&#xff0…...

编程新知 2025/9/8 15:21:15