Vue开发基础一： Vue介绍及开发环境搭建

2023-04-26 09:28| 来源: 网络整理| 查看: 265

RogerZhong @ 2023-04

一、前端开发主流三大框架

Vue ：尤雨溪主导开发（官网链接： https://cn.vuejs.org/ ） React ：Facebook 主导开发（官网链接： https://react.dev/ ） Angular ：Google 主导开发（官网链接： https://angular.cn/ ）

1、三大框架共同点都是MVVM模式 —— Model，View，ViewModel Angular：数据绑定、操作Dom通过ViewModel完成的 React和Vue的ViewModel的高效率通过框架自身提供的Virtual Dom（虚拟dom）来实现，它是一个js对象，数据的变化会被映射到这个虚拟Dom上，再去修改真实Dom结构，比Angular的ViewModel直接绑定真实Dom树的操作效率更高 2、三大框架优缺点框架优点缺点 Vue 1. 国产框架，对国内开发者更友好。所以它的学习成本是三个框架中最低的2. 体积最小，加上它的处理机制，在非大型项目的对比中，它的性能是最高的。3. vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树4. vue实现了数据的双向绑定,react数据流动是单向的 1. vue的响应系统无法检测属性的添加和删除，以及某些数组的修改2. 发展的时间较短，生态环境更小 React 1. React本身不能算作一个框架，因为它本身的功能有限，不过它有一个庞大的生态系统，全世界无数开发人员在为它提供开源包2. 轻量：React和Vue的可组装性强于angular，更加灵活 3. React的单项数据流机制3. React-native，一个优秀的移动端开发框架，使用react特有的jsx语法，将html融入到js中，自动适配了不同的移动端的屏幕分辨率4. state，所有的数据都储存在state中，只可以使用setState方法去改变 1. React的灵活性就导致了在选择上要耗费成本，相同的功能也会有很多开源人员贡献包（这一问题在vue上也同样存在） 2. React的jsx语法，学习起来并不是很难，但它的写法是把html和js结合起来，导致一些IDE无法格式化，代码的可读性较差 3. 使用Redux在处理数据流时，需要学习使用saga语法 4. 每当应用的状态被改变时,全部组件都会重新渲染，所以需要shouldComponentUpdate生命周期函数方法控制 Angular 1. google有着稳定的维护团队。google的Adwords业务就使用了angular，环境更稳定 2. Angular + TypeScript( google+微软 ) 3. Angular自带了几乎所有页面应具有的功能，路由、表单、ajax、模版、双向数据绑定等等。它原生的form表单模块非常强大，除了双向绑定的基本功能，还自带验证等 4. 它的每一个组件都是一个文件夹，html、js、和css文件是分开的，让代码更加清晰 1. 较难调试：Angular的代码整洁、规范，很容易维护和审查，但控制台报错信息较差，较难看出问题在哪 2. 太重：它自带了很多模块，压缩后达到了168k，而vue仅为50k。即使在4版本中拆分了一些功能，但依然还是很重 3. 学习成本高：它有很多的概念，有些还较难理解，api文档内容多，增大了阅读难度。较难上手二、Vue项目构建方式 1、通过CDN使用Vue.js 创建html文件，引入vue.js 不需要使用 Node.js

index.html 示例代码

Document Hello Vue -- CDN {{msg}} const { createApp } = Vue; createApp({ data(){ return { msg: "HOHO" } } }).mount('#app')

注： CDN 的全称是 Content Delivery Network，即内容分发网络。是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。 CDN的关键技术主要有内容存储和分发技术。

2、使用本地 vue.js 文件

将CDN中的js文件下载到本地，作为本地js文件资源引入后，使用vue

{{msg}} const { createApp } = Vue; createApp({ data(){ return { msg: "HOHO hoho" } } }).mount('#app') 3、使用 vue-cli 搭建项目第一步：安装 Node.js 第二步：使用 Node.js 安装 vue-cli 第三步：使用 vue-cli 命令创建项目 (1) 安装 Node.js

Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。 Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。

Node.js 下载地址： https://nodejs.org/zh-cn/download

安装过程中记得勾选上自动配置电脑环境变量的选项，然后一路Next即可，安装完成后验证安装结果：

查看node与npm版本信息（2）使用 Node.js 安装 vue-cli 将npm切换为cnpm（淘宝镜像） npm install -g cnpm --registry=https://registry.npm.taobao.org 设置cnpm成功显示使用cnpm全局安装 vue-cli cnpm install -g @vue/cli 安装vue-cli命令安装完成后显示验证安装结果查看vue-cli版本 (3) 使用 vue-cli 命令创建项目 vue create mycli 使用vue命令创建项目，项目名称为“mycli”

注意：项目名称不能有大写字符

在选择项目配置界面中，可以选择预设的配置，或者手动设置：选择项目配置

手动选择需要的组件

按照项目实际需要选择

选择需要使用的Vue版本

选择Vue3.x

后续选择：历史模式、配置文件、保存配置等，目前均使用默认值，一路回车即可

项目创建完成后显示提示

项目创建成功界面使用命令启动项目 //进入mycli目录 cd mycli //启动项目 npm run serve 项目启动成功在浏览器中访问项目 image.png

【本文地址】

公司简介

联系我们