vue学习——在项目中使用Element-ui的upload的功能

有两种使用Element-ui做上传操作demo的方法
1.使用官方文档给提供的训练模板即可
2.自己新建vue项目，在里面配置element-ui的方法。

第一种方法见官方文档的github

第二种方法：
新建vue项目：
使用vue-cli，webpack
1.

vue init webpack projectName

安装vue项目，按照提示进行安装即可
2.进入项目目录，npm run dev
3.项目此时就已经可以在固定端口打开了
4.配置upload上传，此处参考官方文档
5.安装element插件npm i element-ui -S
此时会有两种方法使用element提供的方法
6.1.下载完插件后引入整个element

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

这时，就可以在.vue文件中按官网的方法写有关上传文件的demo了
6.2还可以按需使用，不需将所有element的包都引入到项目中，可以使用哪个就引入哪个，具体操作是这样：
首先，安装 babel-plugin-component，npm install babel-plugin-component -D
其次修改.babelrc

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});

——————————————————
以下是成品demo的样子，还不错！