Vue中使用Element-ui快速搭建网页

最近写了一个简单的邮件统计页面，一个列表、一个比较详细的页面。

由于页面比较简单，其实使用bootstrap、jquery、Awesome就可以完成了。只是页面上对邮件分类查看、筛选的事件比较多；当form中的select、input等值发生改变的时候，就需要重新从后台获取数据，感觉这样的功能需求，使用vue就会方便很多。于是就打算使用vue写一份。

第一步：使用vue-cli快速创建项目

1. 在想要放置项目根目录的地方打开cmd

      快捷方式：

      打开到目录，然后在路径处输入cmd，然后enter（回车），就可以打开处于这个位置的小黑屏了。

2. 在命令行输入命令：  xiaoman 是项目名称，也会是根目录文件夹名

vue create xiaoman

接下来会让你根据需要，选择需要的包、要使用的配置等、

我是选择了手动配置，即：Manually select features 

然后选择需要的：

使用history路由模式，没有使用hash的方式方便，去网上搜索了一下，history会有很多坑！？

history模式注意事项：
 这种模式需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问对应的URL时 就会返回 404，这就不好看了。

额…我是没有使用过history模式的，都是用hash模式。

最后是问你是否保存一个项目预设，以后就不用一个一个选择了。我是没有保存过…

然后回车，会自动下载安装包了，

3. 下载完成后

可以使用命令行cd xx 进入文件夹，然后运行 npm run serve 启动项目，

在run serve之前可以打开项目根目录下的  package.json ,在“serve”字段后面加上 --open

这样在项目npm run serve成功之后，会自动打开默认浏览器打开项目，方便很多。

也可以在进入文件夹后 运行 vue ui 打开vue项目管理盘

点击项目管理盘上的运行按钮，就会启动npm run serve，若没有报错，就可以点击对号上方的启动app按钮打开项目。

第二步：准备文件、路由结构、引入element-ui

1. 删除或直接修改项目不需要的组件、路由
   

   脚手架创建的项目里，home.vue、Helloworld这些不需要的组件删除或者直接修改成自己需要的组件，记得还要去修改路由、以及路由对应的组件。

   组件建议都使用懒加载的方式，可以加快页面加载速度。

   创建好自己需要的组件、路由之后，看下页面是否报错，试一下路由是否对应正确。

2. 安装 组件库

   使用 npm i element-ui -s

   然后根据项目需要使用的组件数量决定，是引入整个 Element，或是根据需要仅引入部分组件。

   ---如果需要使用的组件很多，可以引入整个Element。

   整个引入在main.js写入：

   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);   即可使用所有的组件。

   ---使用个别组件，就按需引入组件，可以减小项目体积，但是一个一个引入，较麻烦一些。

   借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

   首先，安装 babel-plugin-component：

          npm install babel-plugin-component -D

       然后将 .babelrc 修改为：

（如果按照element-ui官网给的设置，我的项目会报错，不晓得为啥…可能是版本问题？）

3. 使用组件

 在element官网的组件中找到需要使用的组件，在main.js中引入、注册就可以使用了。

   在main.js 中写入：

组件中：

从官网上复制下来的代码，修改为自己需要的即可

注意在 data中定义需要的数据、在methods中定义需要的函数。

如果还有其他的需求，可以去查看组件提供的Attributes、Options、Events、Methods，通常就可以满足需求了。

但是使用element-ui组件，修改样式很困难…

还有一个组件可能要引入多个元素，这样就不能放在main.js里面，再新建一个element.js

注意里面要引入vue

然后在main.js中引入element.js即可。