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),我们将立即处理