uni-app开发 node和vue基础

Posted 2023-05-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app开发 node和vue基础相关的知识，希望对你有一定的参考价值。

参考技术A 具体安装步骤和流程

小程序开发入门

Node.js 详解

node.js是什么？

Node.js 是一个基于 Chrome V8 引擎的 javascript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。

Node 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与php、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。

Node对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。Node是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node 使用事件驱动，非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

Node.js 的发展历程

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

介绍

Node.js 是一个非常新兴的开发工具，它诞生自 2009 年，年龄远不如 Python、Ruby、PHP 等老大哥，但是它确实有史以来发展最快的开发工具，没有之一。在这短短的几年间，我们看到了 Node.js 从当初的一无所有到如今的飞速发展，这是没有任何其他开发工具能够媲美的。

作者

Ryan Dahl，网名 ry，虽然如今已经没有多少人了解这一名字。是的，他就是 Node.js 的亲爹，我们依稀还记得那个安装 Node.js 需要执行这行命令的日子。

名字的由来

其实 Node.js 最开始叫「Web.js」（发布之前），后来因为 API 设计越来越庞大，ry 和他的团队依稀感觉到Web.js 已经过于狭隘了，于是就有了现在的名字。

Vue.js详解

Vue.js是什么？

Vue.js是一款流行的JavaScript前端框架，一个用于创建用户界面的开源JavaScript框架，旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。

学习网站： https://learning.dcloud.io/#/?vid=0

Node.js 和 Vue.js 的区别

一个是前端框架，一个是服务端语言。

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。

Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。

Node.js 的包管理器 npm，是全球最大的开源库生态系统。

Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现- 响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

Uni-app基础

Uni-app基础

一、Uni-app是什么？

uni-app是一个使用Vue.js开发跨平台应用的前端框架；开发者编写一套代码，uni-app将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。

二、使用步骤

1.推荐使用软件Hbuilder X

下载地址：HBuilderX-高效极客技巧

2.创建项目及初始化步骤

（1）启动小程序

（2）启动小程序

1.微信公众平台查看自己的小程序id 开发 → 开发管理 → 开发设置 → 找到appid

2.在uniapp 中进行配置目录下的manifest.json → 微信小程序配置 → 填写小程序appid

（3）目录结构

├── pages # 页面（每个页面可以作为一个文件）
├── static # 静态资源（图片、音视频）
├── unpackage # 打包文件
├── App.vue # 主文件（可以定义全局方法、样式、变量）
├── main.js # 入口（引入插件）
├── pages.json # 页面路由
├── package.json # npm相关文件
└── uni.scss # 常用于定义全局样式变量、第三方ui库的样式（插件）

四、一个.vue文件和 .html文件的区别

可看见的区别：

1.uniapp里不使用div 使用 view 替换

2.html里面使用 img uniapp里使用 image

3.script 跟我们平常写的格式不一样了

其他区别：

1.vue里的template 只能有一个根标签如果多个会报错

2.js 定义变量： var a = 3; vue里面存放在data里不需要声明

3.js里的this 指向 window vue里面指向当前的vue实例

4.想要获取变量、方法要使用 this.

5.js修改元素的值需要document. 获取再赋值 vue里直接使用变量就可以了总结减少操作DOM

vue：

1.插值表达式（胡子表达式）

变量、判断条件（三元）如果里面想使用字符串加引号

2.data

定义初始数据用的

data()

return

键：值

3.methods 方法

作用：写一些我们自己定义的方法（函数）

<template> 
<!-- template 模板的意思 -->
	<view class="content">
		<view class="text-area">
			<text class="title">title</text>
		</view> -->
	</view>
</template>

<script>
	export default 
		data() 
			return 
				title : 'Hello',
				title1:'hello world'
			
		,
		onLoad() 
			console.log(12);
		,
		methods: 

		
	
</script>

<style>
	.content 
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	
</style>

html：

 <!DOCTYPE html>
   <html lang="zh-CN">
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   <body>
       <script>
       </script>
   </body>
   </html>