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

前端框架笔记

news 2025/10/30 23:40:51

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

Appium+python自动化（十六）- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

编程新知 2025/10/23 16:55:43

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

现代密码学 | 椭圆曲线密码学—附py代码

Elliptic Curve Cryptography 椭圆曲线密码学&#xff08;ECC&#xff09;是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础&#xff0c;例如椭圆曲线数字签…...

编程新知 2025/10/27 21:58:02

关于 WASM：1. WASM 基础原理

一、WASM 简介 1.1 WebAssembly 是什么&#xff1f; WebAssembly&#xff08;WASM&#xff09; 是一种能在现代浏览器中高效运行的二进制指令格式&#xff0c;它不是传统的编程语言&#xff0c;而是一种 低级字节码格式&#xff0c;可由高级语言&#xff08;如 C、C、Rust&am…...

编程新知 2025/10/21 18:20:07

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

编程新知 2025/10/30 5:58:19

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/10/29 7:28:18

Python Einops库：深度学习中的张量操作革命

Einops&#xff08;爱因斯坦操作库&#xff09;就像给张量操作戴上了一副"语义眼镜"——让你用人类能理解的方式告诉计算机如何操作多维数组。这个基于爱因斯坦求和约定的库&#xff0c;用类似自然语言的表达式替代了晦涩的API调用&#xff0c;彻底改变了深度学习工程…...

编程新知 2025/10/16 12:04:52

Python 实现 Web 静态服务器（HTTP 协议）

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

编程新知 2025/10/30 18:40:18

WebRTC从入门到实践 - 零基础教程

WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC&#xff1f; WebRTC&#xff08;Web Real-Time Communication&#xff09;是一个支持网页浏览器进行实时语音…...

编程新知 2025/8/9 9:56:56

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

编程新知 2025/8/27 0:09:05