element乘风破浪

　　之前进入公司都是有成型的vue项目进行二次开发，所以对如何创建vue项目并不了解。最近开发新项目，前端选择elementui来进行开发，有幸自己完整搭建项目，所以和大家分享一下搭建过程，一起在vue中乘风破浪。
　　1。我们需要创建vue项目。第一步需要安装node。js。可通过访问https：nodejs。orgzhcn进行下载，安装成功后可通过运行命令行nodev进行查看是否安装成功。如下图所示。
　　2。接下来我们需要全局安装vuecli，需要注意的是vuecli对node。js版本是一定的要求。
　　可以通过运行如下命令进行vuecli的安装（因vuecli为国外镜像，下载较慢，可通过更换淘宝源进行安装，运行命令如第1行所示）。安装完成后可运行第三行命令来检查是否安装成功。npminstallgcnpmregistryhttps：registry。npm。taobao。orgcnpminstallgvueclivueV
　　接下来到我们重磅环节，创建vue项目。首先以管理员身份运行cmd命令行窗口，进入任意一个想创建项目的文件夹，运行vuecreatedemo01命令后，如下图所示。
　　可自由选择vue3还是vue2版本，或者也可以进行自定义配置。（我选择vue3版本进行安装，选中后回车进行安装，安装完成后则显现如下图所示界面）
　　根据提示命令进行运行，出现如下界面，代表我们安装完成。
　　我们访问localhost：8080后，出现项目界面。
　　至此我们vue项目已安装成功，接下来我们安装elementui。我们可以通过运行如下命令进行安装。（elementplus为element3，支持手机端展示）npminstallelementplussave
　　接下来我们需要通过编辑器打开项目，来引入element。import｛createApp｝fromvueimportAppfrom。App。vueimportElementPlusfromelementplus需要引入的部分1importelementplusdistindex。css需要引入的部分2createApp（App）。use（ElementPlus）需要引入的部分3createApp（App）。mount（app）
　　打开HelloWorld页面，将内容改为如下代码。templateelswitchvmodelvaluesizelargeactivetextOpeninactivetextClosebrelswitchvmodelvalueactivetextOpeninactivetextClosebrelswitchvmodelvaluesizesmallactivetextOpeninactivetextClosetemplatestylescoped。swt｛textalign：center；｝style
　　在编辑器内运行npmrunserve命令，打开项目页面，如下图所示。
　　至此安装elementui的流程就到此结束，请愉快地在vue双向绑定的世界中冲浪吧。