vue项目神器，vue-cli和ElementUI

vue-cli

vue-cli是开发vue项目的一个脚手架工具，在模块化开发中，我们可以使用vue-cli快速搭建一个项目，在创建项目过程中还可以集成第三方插件，快速的把项目搭建起来，我们可以针对对应的模块进行开发。

全局安装 npm install -g @vue/cli
查看是否安装成功 vue --version
创建项目 vue create my-project
启动项目 npm run serve
在这里我们创建的项目集成了babel,vuex,vue-router,less

创建好vue-cli项目以后我们需要做些什么？

• 熟悉项目目录

我们需要明白项目中各个模块是做什么的

node-modules-----------第三方依赖文件
public----------------------文件夹放的是公共文件
src--------------------------为主要的代码文件夹,src中：
api(自己写的)------------写一些与后台数据交互的文件
assets----------------------存放一些静态资源，比如说图片之类的
components---------------写组件的地方
plugins---------------------插件模块，比如说引入第三方插件elementUI
router-----------------------配置路由
store------------------------配置仓库
utils(自己写的)-----------写一些配置文件 比如配置aixos
views-----------------------写页面的地方
vue.config.js--------------webpack的配置文件，会和vue自身的配置合并

• 编写配置文件

我们可以编写一些配置文件，比如项目启动的命令，封装一下axios，封装一下后台接口之类的
再者，我们需要简单的配置一下仓库配置一下，虽然使用脚手架搭建项目过程中，文件已经帮我们引入且写好模板，但我们还是得下载一下依赖，比如说vuex，我们需要在终端中执行一下npm i -D vuex命令来下载依赖，否则无法使用，剩下的就是对vuex内部的编写，路由router也是如此。

• 进行项目开发

在项目的基本框架搭建好以后，我们就可以按需求对项目进行开发了，在项目开发过程中我们可以使用elementUI进行开发。

ElementUI

• elementUI是什么

elementUI是一个组件库，里面有很多已经封装好的组件，单选框，表单，表格等等，这些已经写好的组件我们可以直接使用，当然我们可以对这些组件进行二次开发，比如更改样式大小之类的。使用这些写好的组件可以节省我们很多时间，开发一个项目的成本大大降低。
我们可以到官网查看这些组件https://element.eleme.cn/#/zh-CN

• 怎么安装

官网提供了几种方式安装elementUI,用npm安装–npm i element-ui -S。或者内部文件使用cdn引入
但在这里，我们可以在vue-cli中打开终端执行vue add element命令即可添加elementUI（引入elementui的时候，全部引入，覆盖变量，ZH-CN），在plugins文件夹中则会多出一个element文件

• 怎么使用

在安装好并引入好elementUI以后，我们打开官网，找到我们需要的组件，比如button组件

我们找到我们想要用的组件，点击组件下方的显示代码，复制对应的代码到自己的项目中即可使用
如果对该组件想了解更多，我们可以在官网组件页面的下方查看组件的属性和参数，如：

总结

vue-cli是一个脚手架工具，能快速搭建起一个规范的项目，elementUI组件库提供写好的组件给我们直接使用，这两者都能大大减少我们开发一个项目的时间和成本。