在Vuecli中添加elementui插件

1.CL4配置

Vue提供了一个CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。CLI4的配置流程大致总结了流程如下：

打开终端：

  • 安装node.js，安装完node.js之后，npm也会自动安装。查询是否安装成功的命令：node -v npm -v
  • 使用npm安装一般比较慢，故安装cnpm淘宝镜像来替换npm
  • 全局安装脚手架工具vue-cli，命令如下：npm install --global @vue-cli
  • 使用vue create project-name创建项目
  • 选择Manually select features自定义配置
  • 选择In package.json 存放到 package.json 中，这样项目结构比较简单
  • 进入终端，运行项目：npm run serve
  • 使用npm --save install axios安装axios

2.项目目录介绍

├── README.md
├── index.html
├── package.json
├── src
│   ├── App.vue
│   ├── assets
│   │   ├── img
│   │   └── logo.png
│   ├── requst.js // 封装post请求配置文件
│   ├── components
│   │   └──Helloworld.vue
│   ├── views
│   │   ├── About.vue
│   │   └── Home.vue
│   ├── main.js
│   ├── router // 路由配置文件
│   │   └── router.js  
│   └── store
│       └── store.js  
└── babel.config.js

public:用于存放静态文
public/index.html是一个模板文件，生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。
src存放各种vue文件的地方
src/assets用于存放各种静态文件，如图片
src/compnents用于存放我们的公共组件
src/views用于存放我们写好的各种页面，如login、main等
src/App.vue主vue模块 引入其他模块，app.vue是项目的主组件，所有页面都是在app.vue下切换的
src/main.js:入口文件，主要作用是初始化vue实例，同时可以在此文件中引用某些组件库或者全局挂在一些变量
src/router.js 路由文件，这个里边可以理解为各个页面的地址路径，用于我们访问，同时可以直接在里边编写路由守卫
src/store.js主要用于项目里边的一些状态的保存，state中保存状态
package.json模块基本信息项目开发所需要模块，版本，项目名称

3.添加elementui插件

在项目开发中，使用框架和组件会极大的便利开发过程，elemenui是基于vue的一套组件库，其较为多样的组件为开发带来便利（轮子哥：不要重复造轮子），elementui也为cli脚手架提供了一个插件(传送门)，无需使用npm安装便可迅速使用组件。

我们也可以通过在终端进入vuecli项目并输入vue add element指令将组件添加到vue项目中：

vue add element

（1）在安装过程中，尽量选择fully install（便利开发，若选择性安装则每使用一个组件需在element.js和main.js引入

（2）尽量不选择sass安装

（3）选择zh中文字体完成组件的添加

完成添加之后便可以愉快的享受组件带来的便利啦 ！！！