Vue+element-ui搭建迷你电商平台系列篇

发表于:2023-1-13 09:39

字体: | 上一篇 | 下一篇 | 我要投稿

 作者:无敌大白    来源:掘金

#
vue
  Vue是现在比较流行的前端开发框架,适用于构建用户界面,容易上手,简单的API实现方式,自下而上,与第三方库或者项目整合。
  最近学习了用Vue+element-ui搭建一个迷你电商平台,结构简单,功能齐全,对接后端、数据库后,就可以是个完整的电商产品了。
  环境配置
  Node.js
  下载地址:https://nodejs.org/en/
  安装完毕后终端输入node -v查看是否安装成功,检查npm版本号npm -v。
  脚手架工具vue-cli:
npm install -g @vue/cli
  安装完毕后终端输入vue -V查看版本号。
  Vue脚手架创建项目
  图形界面创建
  通过vue ui命令启动 vue cli service 后,访问 http://localhost:8000/project/create 可以直接进入项目创建流程。
  详情
  设置你的项目名称和包管理器,我们可以指定npm包管理器。
  预设
  若以前创建过并把配置预设成模版后会出现在这里,可以选择直接一键设置跟之前一样的配置。
  如果没有或需要不一样的配置,我们这里选「手动」,手动配置项目。
  功能
  「Choose Vue version」这个选型开启在后面配置页面会提供vue版本选择。
  「babel」是JavaScript的编译器,负责解析JavaScript代码,建议打开。
  「Router」负责项目的路由功能,建议选上。
  「Vuex」我这里用不上vuex所以先不选了,后面如果需要可以在安装的。
  「Linter / Formatter」代码规范的检测,这个我也先不选。
  配置
  「选择vue版本」我这里选的是2.X的版本。
  「路由模式的选择」我这里就用默认的hash模式,就是地址栏URL中会有 #的符号,以上创建步骤完成后我们就得到了一个完整的工程项目,还有命令创建方式,下一期继续。
vue init webpack testproject //本次项目创建方式
Command vue init requires a global addon to be installed.
Please run npm i -g @vue/cli-init and try again.
  本文内容不用于商业目的,如涉及知识产权问题,请权利人联系51Testing小编(021-64471599-8017),我们将立即处理
《2023软件测试行业现状调查报告》独家发布~

关注51Testing

联系我们

快捷面板 站点地图 联系我们 广告服务 关于我们 站长统计 发展历程

法律顾问:上海兰迪律师事务所 项棋律师
版权所有 上海博为峰软件技术股份有限公司 Copyright©51testing.com 2003-2024
投诉及意见反馈:webmaster@51testing.com; 业务联系:service@51testing.com 021-64471599-8017

沪ICP备05003035号

沪公网安备 31010102002173号