Vue之Element-ui和Vue-cli的使用

Element-ui

单文件组件就像是一个个封装好的页面样板，我们可一把这些样板组合在一起形成一个完整的页面。就像QQ空间装扮一样，将个个样板放入QQ空间页面中组成自己风格的页面。而Element-ui就将我们需要的样式封装成单文件组件，我们可以直接集成到我们的项目中。

1. 在main.js中将emelent-ui引入到项目中

   1. import Vue from 'vue'
      import App from './App.vue'
      import router from './router/router.js'
      // 引入ElementUI
      import ElementUI from 'element-ui'
      // 引入css
      import 'element-ui/lib/theme-chalk/index.css'
      // 使用ElementUI
      Vue.use(ElementUI)
      
      new Vue({
          el:'#app',
          router,
          render:function(creater){
              return creater(App)
          }
      })
      

2. 在子组件中使用element-ui的代码,

   1. 
      
        
      
          默认
          
        
        
      
          自定义初始值
          
        
        
      
          隐藏 Tooltip
          
        
        
      
          格式化 Tooltip
          
        
        
      
          禁用
          
        
      
      
      
      
        export default {
          data() {
            return {
              value1: 0,
              value2: 50,
              value3: 36,
              value4: 48,
              value5: 42
            }
          },
          methods: {
            formatTooltip(val) {
              return val / 100;
            }
          }
        }
      
      

Emelent的其他效果样式可以参考官方网站：

http://element-cn.eleme.io/#/zh-CN/component/progress    【从这个网站可以下载很多模板】

我们的项目文件都是手动创建出来，在实际开发中我们可以借助vue-cli创建出我们的所有项目文件

1. 全局安装vue-cli

   1. sudo npm install --global vue-cli
      

2. 项目创建

   1. vue init webpack 项目名
      

3. 运行调试项目

   1. // 进入项目目录下，执行下面指令
      npm run dev
      

4. 项目打包

   1. npm run build
      

项目目录结构

• 文件夹1(src)，主开发目录，要开发的单文件组件全部在这个目录下
• 文件夹2(static)，静态资源目录，所有的css，js文件放在这个文件夹
• 文件夹3(components)，组件目录，vue格式的单文件组件都存在这个目录中
• 文件夹4(router)，路由目录，在此文件夹中配置组件路由

还有node_modules目录是node的包目录，config是配置目录，build是项目打包时依赖的目录。

页面结构说明

 整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。