Element-UI

转载https://blog.csdn.net/qq_26562641/article/details/78134324

 

开发环境

---

1.安装webpack

npm install -g webpack

• 1

2.安装vue-cli

vue-cli是什么？

vue-cli 是vue.js的脚手架，用于自动生成vue.js模板工程的。

使用步骤：

• 安装vue-cli：

  npm install -g vue-cli

  • 1

• 使用vue-cli构建项目

  vue init webpack project-name  //创建一个基于webpack模板的名为project-name的项目

  • 1

  目前可用的模板包括：

  • browserify–全功能的Browserify + vueify，包括热加载，静态检测，单元测试。
  • browserify-simple–一个简易的Browserify + vueify，以便于快速开始。
  • webpack–全功能的Webpack + vueify，包括热加载，静态检测，单元测试。
  • webpack-simple–一个简易的Webpack + vueify，以便于快速开始。

• 安装项目依赖

  1. cd project-name //进入项目目录

  2. npm install //安装项目依赖

  3. npm run dev //运行项目

  • 1
  • 2
  • 3

此时在浏览器打开：localhost:8080即可看到欢迎页。

关于webpack和vue-cli的更多使用方法参见官方文档。

• 但是这个只能在本地跑，要如何在我们自己的服务器上访问呢？此时需要执行

  npm run build

  • 1

---

搭建开发环境

本来想用vue-cli重新创建项目，试了几次总是出现各种问题，没办法成功。最后在仔细查看 Element-UI 的官方文档的 快速上手 部分的时候发现 饿了么 团队给了一个他们自己的 项目模板 。于是我就用这个模板来尝试了下，结果成功了。所以，如果你不想太折腾的话，建议还是使用官方给的项目模板，可以省很多事。

第一步：安装项目模板

• 克隆/下载项目模板

• 将下载的模板放到你项目的根目录下

• 安装依赖

  npm install

  • 1

• 运行项目模板

  npm run dev

  • 1

  此时在浏览器打开：localhost:8080即可看到欢迎页。

  

项目模板里已经把需要配置的文件都配置好了。

第二步：安装element-ui

第一步，我们成功安装了项目模板，接下来，我们需要安装element-ui到项目下。

npm i element-ui@next -D

• 1

开始使用

接下来我们就可以参照 Element-UI 的官方文档上手开发了。

例子

我们参照官方的按钮组件使用说明，在项目模板的基础上做一个按钮的例子。其它文件不需要改动，只修改App.vue文件的内容。代码如下：

App.vue

1. <template>

2. <div id="app">

3. <img src="./assets/logo.png">

4. <h1>{{ msg }}</h1>

5. <el-button @click.native="startHacking">Let's do it</el-button>

6. <div class="block">

7. <span class="demonstration">显示默认颜色</span>

8. <span class="wrapper">

9. <el-button type="success">成功按钮</el-button>

10. <el-button type="warning">警告按钮</el-button>

11. <el-button type="danger">危险按钮</el-button>

12. <el-button type="info">信息按钮</el-button>

13. </span>

14. </div>

15. <br/>

16. <div class="block">

17. <span class="demonstration">hover 显示颜色</span>

18. <span class="wrapper">

19. <el-button :plain="true" type="success">成功按钮</el-button>

20. <el-button :plain="true" type="warning">警告按钮</el-button>

21. <el-button :plain="true" type="danger">危险按钮</el-button>

22. <el-button :plain="true" type="info">信息按钮</el-button>

23. </span>

24. </div>

25. </div>

26. </template>

27. <script>

28. export default {

29. data () {

30. return {

31. msg: 'Use Vue 2.0 Today!'

32. }

33. },

34.  

35. methods: {

36. startHacking () {

37. this.$notify({

38. title: 'It Works',

39. message: 'We have laid the groundwork for you. Now it\'s your time to build something epic!',

40. duration: 6000

41. })

42. }

43. }

44. }

45. </script>

46.  

47. <style>

48. body {

49. font-family: Helvetica, sans-serif;

50. }

51. </style>

52.