大数据分析技术应用-vue环境配置

6vue项目环境搭建学习目标掌握vue的基本概念掌握vue项目搭建的过程132知识思政技能能搭建出VUE环境能在vue中安装node培养科学探究精神培养客观严谨精神学习目标1、vue的基本概念2、vue项目环境搭建一、vue的基本概念/是目前前端最火的框架之一单个html网页可以基于vue开发单独功能模块可以基于vue开发整个项目都可以基于vue开发渐进：

vue读作view，用于构建用户界面。一、vue的基本概念vue的特点：一、vue的基本概念组件化：vue支持组件化开发，允许将一个页面划分成多个独立的组件，提高了代码的复用性和维护性。响应式：vue提供了响应式数据绑定，当数据发生变化时，界面会自动更新。一、vue的基本概念vue是前端开发人员的首选入门框架，有很多优势：vue可以进行组件化开发，使代码编写量大大减少，易于理解。vue可以对数据进行双向绑定。vue编写出来的网页在各种设备上都能显示出非常好看的效果。vue使用路由实现页面的切换和跳转,不会刷新页面。二、vue项目环境配置前提：1、熟悉cmd命令行，win+r打开cmd命令行,

cddir等命令2、已经安装15.0或更高版本的node.js二、vue项目环境配置配置vue需要安装node的原因:node.js使JavaScript能够在服务器端运行,处理请求、访问数据库等。node.js通常用作后端服务器，而vue.js则用于构建用户界面，前后端职责分明，便于项目的管理和维护。vue.js只聚焦于视图层,容易与其它库或已有项目整合。而node可以提供包管理工具,整个项目就能实现模块化组件化。node.js和vue.js存在紧密的联系，在开发大型跨端应用程序时，可以相互配合，共同提升开发效率和质量。二、vue项目环境配置1、node.js的安装和配置1）进入node.js官网/en，点击菜单栏第3项“DOWNLOADS”，如图所示。二、vue项目环境配置1、node.js的安装和配置2)选择长期支持LTS(LongTermSupport的缩写)版本，根据操作系统类型选择对应安装文件，这里选择64位Windows安装包。开始下载，下载好的安装包名称为“node-版本号.msi”,把安装包保存在电脑中。二、vue项目环境配置1、node.js的安装和配置3)为避免占用C盘空间，在C盘之外的盘符新建文件夹。比如在D盘下，新建名为node的文件夹，用于存储安装文件。双击下载好的安装包，开始安装。（注意：在安装过程中，把默认的安装路径修改为本步新建的文件夹路径，即D:\node），其他步骤按安装向导进行。二、vue项目环境配置4)当系统新安装一个程序时，会到path中指定的路径去寻找该程序。所以，安装完程序还需要设置环境变量path，让操作系统能运行程序。安装结束后，将node安装文件路径添加到系统环境变量中。1、node.js的安装和配置二、vue项目环境配置4)操作步骤为：右键单击【此电脑】-【属性】-【高级系统设置】-【环境变量】，在【系统变量】中点击【Path】,单击【编辑】按钮，D:\node添加到系统环境变量列表中。1、node.js的安装和配置二、vue项目环境配置1、node.js的安装和配置5)打开node文件夹，在其中新建两个子文件夹，分别命名为：node_cache和node_global,,用于第7步配置缓存路径和全局安装路径。二、vue项目环境配置1、node.js的安装和配置6)Win+R打开终端操作界面，输入node-v（注意：node后面有空格），回车，

查看node版本。如果显示node版本

，则表明node.js安装成功。二、vue项目环境配置1、node.js的安装和配置7)紧接着，在提示符后输入：npmconfigsetprefix“D:\node\node_global”,设置npm全局安装路径。在下一条提示符后输入：npmconfigsetcache“D:\node\node_cache”，配置缓存路径。二、vue项目环境配置1、node.js的安装和配置8)打开环境变量对话框

，在【系统变量】中点击【新建】，输入变量名为：NODE_PATH(注意：系统环境变量名称一般采用大写字母命名)，变量值为：node_modules路径（直接复制node_modules路径到变量值对话框中）二、vue项目环境配置1、node.js的安装和配置9)打开环境变量对话框

，在【系统变量】中点击【新建】，输入变量名为：NODE_PATH(注意：系统环境变量名称一般采用大写字母命名)，变量值为：node_modules路径（直接复制node_modules路径到变量值对话框中）单击【确定】按钮，则系统变量列表中新增了一项NODE_PATH。二、vue项目环境配置1、node.js的安装和配置10)编辑【用户变量】中的【Path】，点击【新建】，在用户环境变量列表中新增node_global和node_cache的路径，最后，单击【确定】按钮，完成用户环境变量的设置。

二、vue项目环境配置以上10个步骤完成了node.js的安装和配置。npm是nodejs平台默认的包管理工具，新版本的nodejs已经集成了npm，所以npm会随同nodejs一起安装，安装完成后可以利用“npm-v”命令查看是否安装成功。下面使用npm工具安装vue.js。二、vue项目环境配置1)以管理员模式打开终端，输入npminstallvue-g（windows下npm安装vue,-g是指安装到global全局目录）

，全局安装

vue.js。2、vue.js的安装二、vue项目环境配置方法：以管理员模式打开终端，输入vue–v,如果显示vue的各种命令，则表示安装成功。3、

查看vue.js是否安装成功二、vue项目环境配置4、vue脚手架的安装

在管理员模式下，在终端输入npminstall@vue/cli-g,全局安装脚手架。本项目是一个蜂产业数据的可视化驾驶舱，在单页面呈现echarts的地图、折线图、饼图等。cli是Command-LineInterface的缩写，翻译为命令行界面，俗称脚手架。vue-cli是一个官方发布的vue.js项目脚手架,使用vue-cli可以快速搭建Vue开发环境以及对应的webpa