vite-vue3

vite + vue3 使用文档(单页应用-超简单教程)

这些是使用 Vite + Vue 3 的基本步骤和概念，希望对你有所帮助！请记得在实际开发中参考相关的官方文档和示例以获取更详细的信息。

以下是使用 Vite + Vue 3 的简要使用文档：

1. 安装 Vite

在终端中运行以下命令安装 Vite：npm install -g create-vite
检查版本信息：vite -v 输出如：vite/4.3.5 win32-x64 node-v16.13.2

2. 初始化一个项目：

使用 Vite 创建一个新项目：create-vite my-project --template vue
进入项目目录：cd my-project
安装项目依赖：npm install
启动开发服务器：npm run dev
可以看到启用了开发环境的地址如： Local: http://127.0.0.1:5173/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uh5F861r-1686036825597)(vite-vue3_files/1.jpg)]

3. 查看项目：以下是一个基本的 Vite + Vue 3 项目的目录树结构：

my-project
├── dist
├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── components
│   │   └── HelloWorld.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── package.json
├── README.md
└── vite.config.js

这是一个简单的示例，你可以根据自己的需求在该结构上进行扩展和修改。其中，重要的文件和目录包括：

dist: 构建后生成的文件夹，用于部署到服务器上。
public: 静态资源目录，包含 index.html 和其他公共文件。
src: 源代码目录，包含 Vue 组件、主应用程序文件和其他辅助文件。
src/components: 存放自定义组件的目录。
src/App.vue: 根组件，作为应用程序的入口点。
src/main.js: 主应用程序文件，用于初始化 Vue 应用程序和导入相关模块。
vite.config.js: Vite 的配置文件，用于自定义构建和开发服务器的行为。

这只是一个基本示例，实际项目中的目录结构可能会更加复杂，具体取决于你的项目需求和组织方式。

3.1 项目重点文件（夹）

src/App.vue
a. 使用了
这个示例展示使用了
src/components About组件
App.vue 新增路由渲染
5. 使用状态管理：vue3 依旧可以使用vuex，但是官方启用了新的库pinia – 非必须使用
- Pinia 是一个基于 Vue 3 的状态管理库，它提供了类似 Vuex 的 API，但是更加简单和直观。
- Pinia 的使用方式与 Vuex 类似，但是它更加轻量级和易于使用。在使用 Pinia 时，可以通过定义 store 来管理应用程序的状态，并在组件中使用 useStore 函数来访问 store 中的状态和操作。
- 要在 Vite + Vue 3 项目中安装和使用 Pinia 状态管理库，你可以按照以下步骤进行操作：
1. 在你的项目根目录下打开终端或命令提示符。
2. 运行以下命令使用 npm 安装 Pinia：
```
npm install pinia
```
  或者，如果你使用的是 yarn 包管理器，可以运行以下命令：
```
yarn add pinia
```
3. 安装完成后，在你的项目中创建一个新的文件，例如 src/store/index.js，用于配置和导出 Pinia。
4. 打开 src/store/index.js 文件，并添加以下内容：
```
import { createPinia } from 'pinia';

const pinia = createPinia();

export default pinia;
```
  在这个示例中，我们导入了 createPinia 函数，用于创建和配置 Pinia 实例。然后，我们使用 createPinia() 创建了一个名为 pinia 的 Pinia 实例，并将其导出。
5. 在主应用程序文件 src/main.js 中导入并使用 Pinia。打开 src/main.js 文件，并添加以下内容：
```
import { createApp } from 'vue';
import App from './App.vue';
import pinia from './store';

const app = createApp(App);
app.use(pinia);
app.mount('#app');
```
  在这个示例中，我们导入了 createApp 函数和应用程序的根组件 App。然后，我们导入并使用了之前创建的 Pinia 实例 pinia，通过调用 app.use(pinia) 将 Pinia 插件安装到应用程序中。
6. 现在，你可以在你的组件中使用 Pinia 进行状态管理。
  - 首先，在 src/store/counter.js 文件中定义你的 Pinia store。
```
import { defineStore } from 'pinia';
import { ref } from 'vue'
// 方式一
// export const useCounterStore = defineStore('counter', {
//   state: () => ({
//     count: 0,
//   }),
//   actions: {
//     increment() {
//       console.log('add')
//       this.count++;
//     },
//   },
// });

// 方式二 推荐 显然更符合vue3使用风格 简洁
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0);
  const increment = () => {
    count.value++
  }

  return { count, increment }
})
```
在这个示例中，我们使用 defineStore 函数定义了一个名为 counter 的 store。在 state 部分，我们定义了一个名为 count 的状态变量。在 actions 部分，我们定义了一个名为 increment 的动作，用于增加 count 的值。

在你的组件中导入并使用 Pinia store。
counter.vue
```
    
    
    
```
在这个示例中，我们通过 import 语句导入了我们之前定义的 useCounterStore，并在 setup 函数中创建了一个名为 counterStore 的 store 实例。然后，我们通过返回对象的方式将 count 和 increment 绑定到组件的模板中。

现在，你可以在你的组件中使用 Pinia store 进行状态管理。通过在模板中访问和修改 store 中的状态和动作，可以实现组件之间的状态共享和交互。

6. 打包到服务器部署：
- 在终端中运行以下命令构建项目：npm run build。
- 构建完成后，你将在 dist 目录中获得一个打包好的项目。
- 将 dist 目录中的文件上传到服务器上的合适位置。
- 配置服务器以正确地提供静态文件。
- 也可以把代码库拉到服务器打包到指定位置
7. 前后端 JSON 数据交互（fetch）：
- 在组件中使用内置的 fetch 函数或第三方库（如 Axios）进行网络请求。
- 例如，在组件的方法中使用 fetch 请求 JSON 数据，并使用 Promise 来处理响应。
- 跨域查看后记二
list.vue
这些是使用 Vite + Vue 3 的基本步骤和概念，希望对你有所帮助！请记得在实际开发中参考相关的官方文档和示例以获取更详细的信息。

后记一

script setup 是 Vue 3 Composition API 中一个新的标签,它允许你在模板中直接使用 Composition API 的变量、函数等。
在 Vue 2 中,如果我们想在模板中使用 JavaScript 变量或函数,需要先在
而在 Vue 3 Composition API 中,我们可以使用
script setup 有以下特点:
- 它独立于
  在这个例子中:
  - name 是在

你可能感兴趣的:(学习,vue.js,前端,javascript)

web安全学习笔记（1）头发的天敌是代码 web安全学习笔记 web安全学习笔记
一、网络安全分支1.web安全——网站2.二进制安全物联网安全工控安全二、网站是如何搭建起来的1.服务器服务器与我们的家庭使用电脑有什么区别？①没有显卡②CPU+内存不同于家庭电脑2.操作系统家庭系统：WindowsXPWindows7Windows8Windows9Windows10Windows11服务器操作系统：Windows2000Windows2003Windows2008Windows
CentOS 7系统双网卡配置动态链路聚合（bond4）追巨 centos linux 运维网络 shell 服务器
一、应用场景在机房建设时，服务器的网卡需要配置成bond4，可以使用我下面的配置文件和脚本来进行配置，简化配置流程。bond4，即动态链路聚合，它可以将服务器上的两个物理网卡聚合为一个，两个网口逻辑成一个网口，配置一个ip地址，其中一个网口故障down掉，另一个网口仍然可以正常工作，起到一个冗余的作用，本文章只讲配置过程，大家可以搜索一下，深入学习一下链路聚合的知识。服务器操作系统为：CentOS
Pygame ，一个强大的游戏创作引擎李昕壑游戏 python
0.开篇废话（允许跳过）接下来，系列“游戏制作，但是使用Python，还能离线玩？干！”会为您介绍使用Python完成游戏创作的相关内容，但是，请注意：Python不能用于开发过度精细的3D游戏，如想尝试3D游戏，请移步：虚幻引擎5-UnrealEngine请认准系列名称，都在部分0.中，学习前请确认，以免造成内容不连续今天的内容为Pygame游戏库的简要介绍，后续更新的内容为Pygame优秀样例
深度学习算法，该如何深入，举例说明 liyy614 深度学习
深度学习算法的深入学习可以从理论和实践两个方面进行。理论上，深入理解深度学习需要掌握数学基础（如线性代数、概率论、微积分）、机器学习基础和深度学习框架原理。实践上，可以通过实现和优化深度学习模型来提升技能。理论深入数学基础线性代数：理解向量、矩阵、特征值和特征向量等，对于理解神经网络的权重和偏置矩阵至关重要。概率论：用于理解模型的不确定性，如Dropout等正则化技术。微积分：理解梯度下降等优化算
随想秦家炎
最近每天除了上班睡觉大部分时间都是在学习王东岳先生的东西方哲学课程，这是混沌大学之前的课程，可谓含金量之高，前所未有。虽然所讲内容骇然听闻，还是被深深吸引进去，难以自拔，或者很想陷入，绝无想出来之意。从人类迁徙，引出生存结构的概念，这是一个极具思考的思考方法，极其深刻的原认知方法论。从人类语言的对比，象形文字和拼音文字的由来，以及特点对比，引出思维方式不同，进而造成东西方文化极大的差异。而统筹这两
export default vs module.exports：JavaScript 模块导出的双雄对决正小安 vue杂谈前端 javascript ecmascript
exportdefaultvsmodule.exports：JavaScript模块导出的双雄对决在JavaScript的模块化编程中，exportdefault和module.exports是两种不可或缺的语法，它们分别代表了ES6模块系统（也称为ES2015模块或ES6模块）和CommonJS模块系统的核心导出机制。了解它们之间的区别与联系，对于编写可维护、跨平台兼容的JavaScript代码
挂云帆，济沧海铸出彩年华――2019年夏网络研修心得兴国254肖萍
沐浴着盛夏的晚风，我手捧心爱的手机，带着“稻花香里说丰年”的喜悦，徜徉于互加计划的知识海洋中，遇上了醉人的风景，邂逅了最美的专家。此次研修，虽然时间不长，但我收获颇丰。通过这次培训，我深深感到不能等、不要问来不来得及，应该趁着青春年华不断学习，不断提升，才能在自己的教学领域中游刃有余。下面我谈谈自己的几点收获：1.趁青春年华，做勤学好问者。少壮不努力，老大徒伤悲。也许是大部分年长者共同的感叹。学习
20200327李晓飞学习分享飞常开心
一、今日第一励语：Whatyouarelookingforisnotoutthere,it’sinyou.今日第二励语：今天多一份拼搏、明天多几份欢笑。师父今天分享了一句话：你所有的一切你都能找到原因，记得向内求，找自己。昨天梦想成真训练营开营了，希望自己在未来的11天能够蜕变成自己想要的样子。那还记得白手起家成功人士都有什么品质吗？回顾一下吧，1、每天提前三个小时起床去准备，例如九点上班，就6点
三月，万物复苏，好事正酿陈怀南
日精进打卡第203天姓名：陈怀南546期学员，565期志工公司：宁波新斯维箱包有限公司[知～学习]背诵《六项精进》1遍共281遍背诵《大学》1遍共257遍诵读《干法》，听樊登读书《干法》读《活法》2遍（1.27开始看第三遍）樊登听书《扫除道》《非暴力沟通》等26本抄写《活法》1遍完结听《活法》《日行一善》《京博国学》公众号文章三月，万物复苏复苏的意义也许就是让我们遇见更温暖的事物在暖风醉人的时光里
打造高效医院运维团队：一体化监控能力的全方位提升 MXsoft618 运维管理软件运维软件智能运维管理系统运维
在数字化时代，医院信息系统的稳定运行至关重要。为了提高医院运维团队的一体化运维监控能力，我们需要从多个方面入手，构建一套全面、高效的运维体系。首先，培训和技能提升是基石。我们应该为运维团队提供定期的技术培训，使他们熟练掌握新监控工具的使用技巧，学习系统故障排查方法和性能优化手段。此外，通过组织技术分享会，团队成员能够及时了解最新的运维技术和行业趋势，保持与时俱进。其次，制定标准化流程和规范对于提升
心理学入门——心理学基础篇清风拂天涯
图片发自App现在对心理学感兴趣的人越来越多，其中也有不少希望未来能从事心理咨询师工作的人群，而很多人希望在当下学习一些心理学基础，为工作、生活增添色彩，心理学基础可以说是学习心理学的根基。图片发自App学好心理学对于我们的生活来说也是有很大的帮助的。但是很多人都想去学习心理学，但却又不知道该如何入手。心理学基础入门很难吗？其实这样的心理学爱好者很多。因为很多原因，没有在学校受过系统的心理学的学习
网络安全工程师自主学习计划表（具体到阶段目标）大模型综述 web安全网络安全系统安全安全学习
前言接下来我将给大家分享一份网络安全工程师自学计划指南，全文将从学习路线、学习规划、学习方法三个方向来讲述零基础小白如何通过自学进阶网络安全工程师，全文篇幅有点长，同学们可以先点个收藏，以免日后错过了。目录前言学习路线学习规划初级1、网络安全理论知识（2天）2、渗透测试基础（1周）3、操作系统基础（1周）4、计算机网络基础（1周）5、数据库基础操作（2天）6、Web渗透（1周）中级、高级7、脚本编
十块钱做一块钱的生意总结之八不戴帽子的米兔
逆水行舟不进则退逆向法真谛与滚雪球法一一对应：第一逆急躁浮躁逆速成主张脚踏实地踏踏实实学外语（不着急，心态平和）第二逆凭空的强化和提高扎扎实实打基础然后再提高（不间断，匀速机制）第三逆苦恼，享受英语学习的乐趣（不亏损，保留胜利果实）老钟的逆向法是经典的、典型的滚雪球案例
新加坡 - A Fine City 小土也
前两天和朋友吃饭，聊到了各自对新加坡的看法，发现这个城市真是让人又爱又恨。我曾经在新加坡学习4年，后又去英国学习3年，期间也去过不少欧洲的城市。和其它去过的城市相比，新加坡可以说是最安全的一个城市了，犯罪率非常低，真的达到了夜不闭户的程度。曾经住过寄宿家庭，晚上真的不锁门。然而，这种安全感对于人们的生活和商业发展固然是非常好的，但也造成了人们自由度的被压缩。比如，新加坡全面禁烟，就连室外的遮雨棚下
公共部门人力资源管理——就业现状思考 - 草稿潮澜
在现阶段的中国，因为社会各层人员的学习环境和成长环境不同，各个时间段的各自需求也不同，在满足工作人员最低的物质需要的基础上，就需要不同的、多方面的鼓励机制或制度。就业人员所生活的环境不同就会造成对工作要求的不同，对于对物质需要比较强烈的社会人员，在公共部门目前的薪资制度中，薪资待遇比较稳定，就难以对其产生很强的就业吸引，无法激励就业人员对公共部门工作的积极性。而对于一部分人来说，在公共部门工作是非
7+纯生信，单细胞识别细胞marker+100种机器学习组合建模，机器学习组合建模取代单独lasso回归势在必行！生信小课堂
影响因子：7.3研究概述：皮肤黑色素瘤（SKCM）是所有皮肤恶性肿瘤中最具侵袭性的类型。本研究从GEO数据库下载单细胞RNA测序（scRNA-seq）数据集，根据原始研究中定义的细胞标记重新注释各种免疫细胞，以确定其特异性标志。接着通过计算免疫细胞通信网络，结合对通信网络的大量分析和通信模式的识别，对所有网络进行了定量表征和比较。最后基于bulkRNA测序数据，使用机器学习训练了枢纽通讯细胞的特定
vue3 什么是Composition API 我为什么要使用它？软件技术NINI vue案例 vue.js 前端 javascript
CompositionAPI（组合式API）是Vue3中引入的一组全新的API，旨在提供一种更加灵活和可组合的方式来组织和复用组件逻辑。这一改变是Vue.js向函数式编程和更现代的开发方式迈出的重要一步。以下是CompositionAPI的详细解析：一、基本概念定义：CompositionAPI是一组允许开发者以函数式编程风格组织Vue组件逻辑的API。目的：提高代码的可读性、可维护性、复用性和类
用JavaScript写一个简单的9*9乘法表迷雾yx javascript 开发语言 ecmascript
Documentspan{width:80px;padding:5px10px;display:inline-block;/*可以使行内元素表现得像块级元素一样*/text-align:center;/*文本居中*/border:1pxsolidturquoise;margin:2px;/*每个边框之间距离为2px*/border-radius:10px;/*边框圆润*/box-shadow:6p
How can I load the openai api configuration through js in html? 营赢盈英 AI ai python javascript html node.js openai
题意：怎样在HTML中通过JavaScript加载OpenAIAPI配置问题背景：Iamtryingtosendarequestthroughjsinmyhtmlsothatopenaianalyzesitandsendsaresponse,butifinthejsIputthefollowing:我正在尝试通过HTML中的JavaScript发送一个请求，以便让OpenAI分析它并发送响应，但如
张秋珍践行第197天20211217 涓涓溪流_ff90
1、赞美：男人的大智慧，让我不得不佩服。一直在学习，在练功功夫，没想到被人一句话道破，“所有问题都有答案，只是看你想不想去做，面对问题，只要你认真思考，都是可以解决的，怕只怕你打心里根本就不想解决”。三人行必有我师矣，两人行也有老师，佩服，我真的领教了，原来榜样在身边。2、幸福三件事：（1）早读，可以无缝连接，没有出现过读书找不到地方的时候，几乎没有出现过读完书不关麦的时候，时时事事都观照自己的言
吾家小狸奴木子清澈
吾家小狸奴，只能养在屋。不能爬墙头，跳上门顶伏。门板何其薄，难阻小狸奴。但见起身行，钢丝同难度。暂当飞岩走，权作门上游。吾家有喵唤老黑，性格乐天自贪玩。好探索来爱学习，清茶一杯也新奇！祝简友们中秋小长假快乐安康！
王阳明：忙时守得心不乱，闲时修得心不空！长胜阳明心学文化传媒
岁月是公平的的，他给每个人的时间都一样。有的人忙忙碌碌地活着，有的人却在有限的生命中找到了无限的价值，这其中的差异，都能从心上找到原因。为了更好的学习心学，王阳明的弟子们共同举办了一个心学读书会，目的就是让大家在修行中互帮互助，共同成长。由于这个宝贵的共修时间稍纵即逝，因此被称作“惜阴会”，阳明先生对此表示了肯定，并且给予了弟子们足够的支持。从此，不管课业是忙是闲，这个读书会每两个月举办一次，每次
筑梦琴勤情
回首百年党史，那是一幅波澜壮阔的绚丽画卷，回顾走过的路、不忘来时的路，归根结底是为了继续走好前行的路。作为一名从教16年的青年教师，要善于学习，学以致用，真正做到学史践行办实事，筑梦前行暖人心；要时刻以中华民族发展史上涌现的优秀人物为榜样。为国家蒙辱的旧中国带来救亡之道的陈独秀、李大钊，为革命建设培养有用人才的红色教育家徐特立、成仿吾，用爱与责任呵护贫困学子求学梦的一线教师张桂梅、陈立群都是我的榜
2018年9月4日史响庆
9.4日周二晴庆妈妈第370篇今天庆庆发新书了，中午放学就要买书皮，中午急着回家就没有买成，下午放了学就把这个任务完成了！庆庆很高兴！知道保护自己的书籍才能好好的学习！今天孩子都来大姐家门市了。先让孩子吃了饭，要了喜欢吃的包子，今天多了茶叶蛋，孩子几乎每个人都吃了两个，一会就吃饱了！之后他们就去屋里写作业去了！祥恒妈妈像老师一样看着他们几个！看到每个孩子都很认真的写着！我进屋看了看，每个孩子的字写
21天｜二哈《万万没想到》傅子龙
【Day8】今日阅读《万万没想到》，P180—P200。编程思维，才是每个人都需要掌握的基本生存技能。而这个技能里面，又分几个核心技能。第一个，是学习能力，准确来讲，是学习事物本质的能力。这个世界上无数事情的发生，有无数种因素，而在无数事件的表象中，都有少数的底层的规律，这种规律，就是事物的本质，或者说原理。学习原理的好处在于，大大的提升效率，一万件互不相干的事件背后，可能就十几种原理，只是排列组
30道Python基础练习题程序媛学姐 Python python 服务器开发语言
大家好，我是程序媛学姐，今天为大家梳理了30道Python基础练习题，方便大家学习参考。1.编写一个程序，输出"Hello,World!"这个程序的目标是简单地输出一条消息，即"Hello,World!"。在Python中，可以使用print语句来实现这个功能。示例代码：#输出"Hello,World!"print("Hello,World!")在上面的示例代码中，print("Hello,Wor
20190615 颜儿有幸
姓名：颜萍公司：上海晋名实业有限公司六项精进361期学员【日精进打卡第455天】六项精进375期志工【日精进打卡第422天】六项精进504期志工【日精进打卡第79天】【知～学习】《六项精进》大纲0遍，共394遍《大学》开篇0遍，共592遍《六项精进》通篇0遍，共20遍《心法》0遍，共1遍。《思维方式》0遍，共1遍。【经典名句分享】1.不乱于心，不困于情。不畏将来，不念过往。如此，安好。2.心若向阳
亲自日记195天吉怡晨妈妈
2018年7月25日星期三(晴)早上起来小怡一出家门就说:“妈妈，我咋感觉闷的出不来气啊？”我告诉她说:“因为天气太热了，要多喝水，不要在外面跑……”“你当恁闺女傻啊妈妈？这么热的天在外面会被火辣辣的太阳晒蜕皮，放心吧我不会在外面跑。”没等我说完闺女就接上了。十点去辅导班接小怡，小怡坐在车里说:“妈妈，我好幸运啊，如果你没有车，骑电车还不把我晒成肉干了，我得好好学习，长大了找个好工作，像你一样，坐
父母该如何与青春期的孩子相处？大大小米
中考是人生中的第一道坎，经历过初三的学生想必都具有风里来雨里去的经历。熬夜苦读、压力倍增等情况想必经历过高考的人都会有这样的感受。对学生来说，初三是学习生涯的转折点。那些为“中考大战”做准备的学生压力可谓无处不在，无时不有。进入初三，学业压力明显增大，从家中的叮嘱、老师的引导中他们已经明白了中考的重要性。所以成绩成为衡量一个人优秀是否的重要因素，而考入名校则是通往幸福人生的唯一捷径。同时，孩子压力
java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署鸿源网络数据库 mysql java
java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署java计算机毕业设计高校学生资助管理信息系统源码+mysql数据库+系统+lw文档+部署本源码技术栈：项目架构：B/S架构开发语言：Java语言开发软件：ideaeclipse前端技术：Layui、HTML、CSS、JS、JQuery等技术后端技术：JAVA运行环境：Win10、JDK1.8数据库：MySQ
集合框架天子之骄 java 数据结构集合框架
集合框架集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。简单介绍： Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
Table Driven（表驱动）方法实例 bijian1013 java enum Table Driven 表驱动
实例一： /** * 驾驶人年龄段 * 保险行业，会对驾驶人的年龄做年龄段的区分判断 * 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞) */ public class AgePeriodTest { //if...el
Jquery 总结 cuishikuan java jquery Ajax Web jquery方法
1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim(' Hello ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
面向对象概念的提出麦田的设计者 java 面向对象面向过程
面向对象中，一切都是由对象展开的，组织代码，封装数据。在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。下面就结合编程语言的发展史，聊一聊面向过程和面向对象。 c语言由贝尔实
linux网口绑定被触发 linux
刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。一、环境描述我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。二、双网卡绑定步骤： 2.1 修改/etc/sysconfig/network
XML基础语法肆无忌惮_ xml
一、什么是XML？ XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。二、为什么学习XML？用来解决程序间数据传输的格式问题做配置文件充当小型数据库三、XML与HTM
为网页添加自己喜欢的字体知了ing 字体秒表 css
@font-face { font-family: miaobiao;//定义字体名字 font-style: normal; font-weight: 400; src: url('font/DS-DIGI-e.eot');//字体文件 } 使用： <label style="font-size:18px;font-famil
redis范围查询应用-查找IP所在城市矮蛋蛋 redis
原文地址： http://www.tuicool.com/articles/BrURbqV 需求根据IP找到对应的城市原来的解决方案 oracle表（ip_country）：查询IP对应的城市： 1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994 2. select city from ip_
输入两个整数，计算百分比 alleni123 java
public static String getPercent(int x, int total){ double result=(x*1.0)/(total*1.0); System.out.println(result); DecimalFormat df1=new DecimalFormat("0.0000%");
百合——————>怎么学习计算机语言百合不是茶 java 移动开发
对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
linux下tomcat开机自启动 bijian1013 tomcat
方法一：修改Tomcat/bin/startup.sh 为: export JAVA_HOME=/home/java1.6.0_27 export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:. export PATH=$JAVA_HOME/bin:$PATH export CATALINA_H
spring aop实例 bijian1013 java spring AOP
1.AdviceMethods.java package com.bijian.study.spring.aop.schema; public class AdviceMethods { public void preGreeting() { System.out.println("--how are you!--"); } } 2.beans.x
[Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization bit1129 serialization
enableComplexMapKeySerialization配置项的含义 Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。 GsonBuilder用于
【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题 bit1129 Stream
包括Spark Streaming在内的实时计算数据可靠性指的是三种级别： 1. At most once，数据最多只能接受一次，有可能接收不到 2. At least once, 数据至少接受一次，有可能重复接收 3. Exactly once 数据保证被处理并且只被处理一次，具体的多读几遍http://spark.apache.org/docs/lates
shell脚本批量检测端口是否被占用脚本 ronin47
#!/bin/bash cat ports |while read line do#nc -z -w 10 $line nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then echo $line:ok else echo $line:fail fi done 这里的ports 既可以是文件
java-2.设计包含min函数的栈 bylijinnan java
具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/ import java.util.ArrayList; import java.util.List; public class MinStack { //maybe we can use origin array rathe
Netty源码学习-ChannelHandler bylijinnan java netty
一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享” 例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是因为每一次调用decode方法时，可能数据未接收完全（incomplete），它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的 p
java生成随机数 cngolon java
方法一： /** * 生成随机数 * @author [email protected] * @return */ public synchronized static String getChargeSequenceNum(String pre){ StringBuffer sequenceNum = new StringBuffer(); Date dateTime = new D
POI读写海量数据 ctrain 海量数据
import java.io.FileOutputStream; import java.io.OutputStream; import org.apache.poi.xssf.streaming.SXSSFRow; import org.apache.poi.xssf.streaming.SXSSFSheet; import org.apache.poi.xssf.streaming
mysql 日期格式化date_format详细使用 daizj mysql date_format 日期格式转换日期格式化
日期转换函数的详细使用说明 DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
一个程序员分享8年的开发经验 dcj3sjt126com 程序员
在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。明确入行的目的很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
android欢迎界面淡入淡出效果 dcj3sjt126com android
很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。主要代码如下： package com.myaibang.activity; import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
linux 复习笔记之常见压缩命令 eksliang tar解压 linux系统常见压缩命令 linux压缩命令 tar压缩
转载请出自出处:http://eksliang.iteye.com/blog/2109693 linux中常见压缩文件的拓展名 *.gz gzip程序压缩的文件 *.bz2 bzip程序压缩的文件 *.tar tar程序打包的数据，没有经过压缩 *.tar.gz tar程序打包后，并经过gzip程序压缩 *.tar.bz2 tar程序打包后，并经过bzip程序压缩 *.zi
Android 应用程序发送shell命令 gqdy365 android
项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！发就发吧！一、关于shell指令：我们知道，shell指令是Linux里面带的
java 无损读取文本文件 hw1287789687 读取文件无损读取读取文本文件 charset
java 如何无损读取文本文件呢？以下是有损的 @Deprecated public static String getFullContent(File file, String charset) { BufferedReader reader = null; if (!file.exists()) { System.out.println("getFull
Firebase 相关文章索引 justjavac firebase
Awesome Firebase 最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。 Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。开发者只需引用一个 API 库文件就可以使用标准 RE
C++学习重点 lx.asymmetric C++笔记
1.c++面向对象的三个特性：封装性，继承性以及多态性。 2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。 3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。 4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。 &n
java bean和xml相互转换 q821424508 java bean xml xml和bean转换 java bean和xml转换
这几天在做微信公众号做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题，然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧，还是贴出来记录一下顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。 packag
C 语言初级位运算 1140566087 位运算 c
第十章位运算 1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节 2、位运算符：运算符作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或他们的优先级从高到低； 3、位运算符的运算功能： a、按位取反： ~01001101 = 101
14点睛Spring4.1-脚本编程 wiselyman spring4
14.1 Scripting脚本编程脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行; 如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦; 如果我们的应用不允许重启,这在现实的情况中也是很常见的; 在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean; spring支持脚本

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他

vite-vue3

vite + vue3 使用文档(单页应用-超简单教程)

1. 安装 Vite

2. 初始化一个项目：

3. 查看项目：以下是一个基本的 Vite + Vue 3 项目的目录树结构：

{{ msg }}

5. 使用状态管理：vue3 依旧可以使用vuex，但是官方启用了新的库pinia – 非必须使用

Count: {{ count }}

6. 打包到服务器部署：

7. 前后端 JSON 数据交互（fetch）：

后记一

你可能感兴趣的:(学习,vue.js,前端,javascript)