《WebGIS之Vue零基础教程》（1）Vue简介

1 什么是Vue

Vue是一个动态构建用户界面的 渐进式 JS框架!

●构建用户界面: 将数据转换成界面(视图)

●渐进式: 自底向上,慢慢改进

a简单应用: 当成jQuery的代替品

b中型应用: 应用组件化, 重构某个(某些)页面

c大型应用: 使用全家桶开发

2 Vue的优点

Vue做为目前主流的三大前端框架,具有如下优点

●·上手容易

●平滑的学习曲线

●友好的文档

●活跃的社区 Vue框架集众家所长

●借鉴了Angular的模板语法和数据绑定

●借鉴了React的组件化和虚拟DOM

3 Vue的特点

Vue框架主要有如下特点

1.声明式渲染

2.响应式数据

3.组件化开发

下面我们就要正式开始学习Vue了。

1 搭建开发环境

Vue环境分为两种

• 不使用构建工具
• 使用构建工具

首先，我们会介绍 不使用构建工具 的环境,在组件化章节中介绍 使用构建工具 的方式：

1) 初始化

使用如下指令初始化

npm init -y

发现在目录下会多一个文件package.json, 这个文件用来管理该项目使用了哪些包

2) 安装vue

执行如下命令安装vue

npm install vue

以上命令可以简写为

npm i vue

在项目目录会产生一个文件夹node_modules和一个文件package-lock.json


在package.json文件中, 会多如下内容

目前, Vue的默认最新版本是3.2
在node_modules里可以找到vue/dist

 vue的各种版本说明

• vue.global.js是完整版(在初学阶段使用)
• esm(ES Module): 使用ES的模块规范导入导出export default
• runtime: 运行时版本, 相对于编译版本, 体积更小, 效率更高

3) 小结

💡 使用Npm安装Vue分为两步
1项目初始化: npm init -y
2安装vue: npm install vue

更多完整版VUE教程请添加：gis2210