VUE零基础项目实战（一）环境配置，vue框架安装和创建，element插件安装

VUE零基础管理系统项目实战（一）vue框架安装和创建，element插件安装

聊聊为什么做这个教程

本人是一位大三计算机科学与技术专业学生，平常也做一些网站和移动开发，在开发过程中接触到vue框架，用vue框架开发非常方便，你不必过多关注里面的细节，因为vue已经帮你完成好，非常适合我们这些学生菜鸟快速开发使用，里面可能会有一些表达错误，希望大家多多包含和指教

一vue框架的安装

vue框架的安装非常简单。建议大家安装3.0以上版本，因为3.0以上版本提供ui可视化页面进行项目管理，非常方面快捷

安装Node.js8.9以上版本

vue需要Node.js8.9以上版本提供支持 首先打开http://nodejs.cn/download/，下载Node安装包，可根据你的系统版本下载，下载完成后直接安装即可
安装完成后win+R，输入CMD打开命令窗口 输入命令即可查看Node版本和npm版本。

node -v
npm -v

出现版本号即安装成功，若失败建议重启电脑，懂的都懂

安装vue-cil脚手架

若之前已经安装过vue的旧版本，则要使用命令卸载

npm uninstall vue-cli -g

用管理员权限打开CMD，建议用管理员权限，不用管理员权限行不行我也不知道
安装命令：

npm install -g @vue/cli

查看版本号：

vue -V

出现版本号即安装成功
至此，vue框架已经安装到你的电脑
当然你也可以多装一点东西，例如淘宝镜像，提升下载速度等等，具体百度

二vue项目的创建和Element UI插件的安装

vue项目的创建

打开cmd 输入命令 vue ui

vue ui

在vue3.0以上版本中，即可弹出图形化管理页面

现在已经可以创建vue项目，第一次进去是不是这个画面我也忘了，都差不多。点击左上角按钮打开项目管理器创建新的vue项目

点击创建在你喜欢的硬盘位置创建一个新的项目

下一步，填写你喜欢的项目名字，具体配置如下

继续下一步，预设选择手动

下一步，选择预选

这3项和最后一项使用配置文件强烈建议都勾上
下一步

最后创建项目，点击不保存预设即可，当然你也可以保存

稍等几分钟，项目创建就会完成，在cmd中可以看见进度一直滚动

项目创建完成后会切换到另一个界面

左上角是你的项目名称。现在我们来测试下是否能够运行
在左侧菜单栏点击任务，在出现的界面点击serve，最后选择运行

运行完成后点击输出

点击local中的地址，出现

项目创建成功

Element UI插件的安装

elemenet是一款快速开发工具，可以帮助我们快速进行网站开发
切回到项目管理器，点击左侧菜单栏选择插件，在右上角选择添加插件

查找插件element，第一个就是，选中点击右下角安装

稍等一会即可安装完成，在弹出的配置栏直接点击完成安装即可。

最后验证安装，切回刚才local的地址，因为vue是动态加载的，所以我们不必要经过一系列保存等操作，可实时看见变化

此时界面已经变成这样，中间出现
If Element is successfully added to this project, you’ll see an below
element安装成功

结尾

到此，已经介绍了vue框架的安装创建方法和element插件的安装方法，相信你已经成功安装，下一节将会介绍idea的安装使用和导入vue项目，当然你可以不使用idea
因为我是项目开发和教程的写作同步进行，所以更新会有点慢，敬请谅解，如有错误，多多指教