Web开发

首页 » 常识 » 问答 » 测试开发之前端VUE框架的搭建与使用基
TUhjnbcbe - 2023/3/26 20:46:00
白癜风医的好吗 http://m.39.net/pf/a_4595396.html

「来源:|无量测试之道ID:gh_a1aa25a6d」

这是无量测试之道的第篇原创

今日分享主题:前端框架Vue的入门安装步骤

简单介绍下吧,Vue是当下流行的前端框架之一,与Angular和React并称为三大优秀的前端框架。Vue可以轻松地结合后端框架开发测试平台或web应用。感兴趣的小伙伴可以网上搜索关于Vue的详细资料和介绍。

我也正在使用Python+Vue框架开发测试管理工具中。今天的内容主要是从Vue的入门安装来总结和分享的。

以下所有命令需要以管理员模式执行。本篇文章分享以Mac版本为示例。Windows进入cmd的doc窗口前就切换成以管理员身份运行。Mac在终端运行命令时,可以直接在命令前加上sudo以管理员权限运行。

1、初始化一个名为:element_ui_vue的项目工程命令:vueinitwebpackelement_ui_vue

初始化过程的页面信息如上图所示,按照命令行提示一步步执行,作为vue的新手,尽量不选择在初始化时默认去安装一些插件,这些插件可以在后面手动安装,有助于理解。看到上面的界面提示:说明element_ui_vue的项目工程初始化成功。

2、安装依赖插件,分别是:vue-router,element-ui,sass-loader,node-sass(1)、进入初始化项目:element_ui_vue的目录命令:cdelement_ui_vue

(2)、安装vue-router

命令:npminstallvue-router--save-dev

以安装vue-router为例,出现vue-router

x.x.x说明插件安装成功,如果有报错可根据提示来解决和修复,以下插件安装同理。

(3)、安装element-ui命令:npmielement-ui-S

(4)、安装依赖

命令:npminstall

安装依赖时,如果出现如上图中的提示:“runnpmauditfixtofixthem,ornpmauditfordetails”解决方法:根据命令提示直接执行命令:npmauditfix即可修复

(5)、安装sass加载器

命令:cnpminstallsass-loadernode-sass--save-dev

这个sass加载器,我使用的是cnpm也就是淘宝镜像来安装的,相较于npm的国外镜像来说快很多,如果在使用npm安装失败后,可以换成cnpm来安装。

(6)、启动测试命令:npmrundev

启动成功,去浏览器,输入url:

1
查看完整版本: 测试开发之前端VUE框架的搭建与使用基