精华内容
下载资源
问答
  • 简单的vue2 + vue-router + vuex + iview 入门项目,一个移动端平台的简易考试系统。灵感来源于近期工作项目中开发的一套考试平台系统。欢迎大家来issues指出错误共同进步。 项目运行 # 克隆到本地 git clone ...
        

    简单的vue2 + vue-router + vuex + iview 入门项目,一个移动端平台的简易考试系统。灵感来源于近期工作项目中开发的一套考试平台系统。欢迎大家来issues指出错误共同进步。

    项目运行

    # 克隆到本地
    git clone https://github.com/webproblem/vue-demo.git
    # 进入项目
    cd vue-demo
    # 安装依赖
    npm install,可以使用cnpm代替npm
    #运行项目
    npm run dev

    项目文件说明

    主要是src文件夹。

    • data: 模拟的数据
    • page: 存放的vue组件页面
    • router: vue路由文件
    • store: vuex状态管理文件
    • utils: 公共的工具函数

    功能描述及实现

    可以通过设置不同的路由参数来切换不同的考试试题

    <div class="button-group">
            <span><router-link :to="{name: 'exam1', query: {id: 1}}">考试试题一</router-link></span>
            <span><router-link :to="{name: 'exam1', query: {id: 2}}">考试试题二</router-link></span>
    </div>

    在src/data目录下的模拟数据中,配置好考试试题和考试时长等信息。

    /**
     * @param {Number} examTime 考试时长
     * @param {String} title 题目内容
     * @param {Array} options 答案选项
     * @param {Number} answer 正确答案索引,从0开始
     * @param {Number} score 题目对应的分数
     * @param {String} examId 题目唯一ID
    */
    
    export const examTime = 30;
    
    export const examList = [
        {
            title: "《春晓》这首诗是出自哪位诗人?",
            options: ["李白", "杜甫", "王维", "苏轼"],
            answer: 1,
            score: 5,
            examId: "0"
        }
    ]

    然后运行项目,进入首页就可以选择试卷答题了!!!

    在考试时间结束的时候,系统会自动提交答题试卷,或者在答完所有题的时候,手动点击提交试卷,系统会根据答题情况给出相应的考试结果。(还有一些细节没有考虑进去,后期可以添加查看答错题目的功能等)

    <template>
      <div class="exam-result">
          <div class="scores-container">
              <div class="">
                <header class="scores">{{getScore}}分</header>
                <label class="result-tips">{{resultTips}}</label>
              </div>
          </div>
      </div>
    </template>
    
    <script>
    import {mapState, mapMutations} from 'vuex'
    
    export default {
        data () {
            return {
                //答错的题
                errorExam: [],
                //答对的题
                sureExam: [],
                //总分
                totalScore: 0,
                //得分
                getScore: 0,
                resultTips: "",
                examList: []
            }
        },
        computed:mapState([
            'saveAnswer',
            'useTime',
            'examId'
        ]),
        mounted () {
            const vm = this;
            vm.examList = vm.$store.state.examList[this.examId - 1] || [];
            vm.getSureAnswer();
        },
        methods: {
            getSureAnswer() {
                var vm = this;
                vm.examList.forEach(function(item, index){
                    vm.totalScore += parseInt(item.score);
                    if((item.answer + 1) == vm.saveAnswer[index]){
                        vm.sureExam.push(item);
                        vm.getScore += parseInt(item.score);
                    }else{
                        vm.errorExam.push(item);
                    }
                })
                vm.setResultTips();
                console.log(this.useTime)
                console.log("答对题:" + vm.sureExam.length);
            },
            setResultTips() {
                const scores = [100 ,90, 70, 60, 40, 20],
                      tips = [
                          '哇,你太优秀了,厉害了!!!',
                          '智商只差一步就爆表了,继续加油!',
                          '表现很好,good!',
                          '嗯,不错,还有很大的进步空间!',
                          '还需要继续加油哦!!!',
                          'What are you弄啥嘞!'
                      ];
                if(this.getScore <= scores[5]) {
                    this.resultTips = tips[5];
                    return;
                }
                if(this.getScore <= scores[4]) {
                    this.resultTips = tips[4];
                    return;
                }
                if(this.getScore <= scores[3]) {
                    this.resultTips = tips[3];
                    return;
                }
                if(this.getScore <= scores[2]) {
                    this.resultTips = tips[2];
                    return;
                }
                if(this.getScore <= scores[1]) {
                    this.resultTips = tips[1];
                    return;
                }
                if(this.getScore <= scores[0]) {
                    this.resultTips = tips[0];
                    return;
                }
            }
        }
    }
    </script>

    本教程是基于已经有一定vue基础之上的,如果你还不了解什么是vue建议先去学习一下。友情链接:
    vue中文官网
    vuex文档
    vue-router文档
    欢迎大家star和issues。
    源码地址:
    https://github.com/webproblem/vue-demo

    展开全文
  • script引用vue,iview入门实战

    千次阅读 2018-06-29 13:49:05
    iview大体上可以分为两种使用方式: 1,直接使用script引用iview的js。 2,使用iview提供的脚手架。 第一种方式使用iview和vue比较简单,适合刚上手vue和iview以及想体验vue特性但是又不想搭建webpack的小伙伴。 ...

    iview大体上可以分为两种使用方式:

    1,直接使用script引用iview的js。

    2,使用iview提供的脚手架。

    第一种方式使用iview和vue比较简单,适合刚上手vue和iview以及想体验vue特性但是又不想搭建webpack的小伙伴。

    <!-- import Vue.js -->
    
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    <!-- import stylesheet -->
    
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    
    <!-- import iView -->
    
    <script src="//unpkg.com/iview/dist/iview.min.js"></script>

    当然引用js之后,对于iview的组件使用方式和iview的写法略有不同,大概就是组件的第一个大写变成小写然后后面跟一个‘-’。

    如果不想引用别人的资源或者希望在没有网络的环境下也能使用,可以单独下载vue.js和iview.js。放到你自己的项目中就可以了。

     

    在引入相关的js之后,就是创建我们的html模板了。

     

    <div id='test'>
        <i-button :type="" :title="" v-text="删除" @click="clickme"></i-button>
        <i-modal v-model="showDel" title="删除" @on-ok="confirmDel">
            <p>
                删除后数据将无法恢复!确定删除吗?
            </p>
        </i-modal>
    <div>

    这是简单的按钮和弹出框。接下来在<script></script>之间写js代码。当然也可以新建一个js放js代码。

    new Vue({
            el: '#test',
            data: {
                
            },
            mounted: function () {
                this.init();
               
            },
            methods: {
                init(){},
                clickme(){}
            }
        })

    这就是初始化vue对象的代码了。在data里写你需要用到的数据,mounted在vue生命周期中是在created和beforeMount之后,created的时候数据已经和data属性进行绑定(放在data中的属性当值发生改变的同时,视图也会改变)。

    el中必须写你想要为哪一段html代码初始化vue。你也可以在一个html中初始化多个vue对象,当然这没有必要。

    简单来说mounted是挂载vue数据的。

    methods中写用到的各种方法了。比如点击事件的方法就会写在methods中。方法之间的调用记得用this.方法名。

    这就是简单的script使用iview的方法了。这种方法虽然简单但并不是推荐的。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <!-- import Vue.js -->
    
        <script src="//vuejs.org/js/vue.min.js"></script>
    
        <!-- import stylesheet -->
    
        <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css">
    
        <!-- import iView -->
    
        <script src="//unpkg.com/iview/dist/iview.min.js"></script>
    </head>
    <body>
    <div id='test'>
        <i-button :type="" :title="" v-text="删除" @click="clickme"></i-button>
        <div @click="clickme">按钮不好使就点我</div>
        <i-modal v-model="showDel" title="删除" @on-ok="confirmDel">
            <p>
                删除后数据将无法恢复!确定删除吗?
            </p>
        </i-modal>
    <div>
    <script type="text/javascript">
    	new Vue({
            el: '#test',
            data: {
                
            },
            mounted: function () {
                this.init();
               
            },
            methods: {
                init(){},
                clickme(){}
            }
        })
    </script>
    
    </body>
    </html>
    
    
    
    

    vue.js下载

    iview推荐的是使用vue脚手架iview入门实战

    展开全文
  • 对于iview组件进行系统学习,由于前端基础太差,不会webpcak,又新看了webpack。个人理解就是一个对模块进行打包的工具 不过处于对iview组件的迫切使用,直接在html本地中测试了组件,嗯,比我写的好看一万倍了。...

    对于iview组件进行系统学习,由于前端基础太差,不会webpcak,又新看了webpack。个人理解就是一个对模块进行打包的工具

    不过处于对iview组件的迫切使用,直接在html本地中测试了组件,嗯,比我写的好看一万倍了。此处有坑就是不在node环境下template中写直接在HTML中写iview的话部分组件应该使用i-小写的,如此处阑珊布局,Col应写成i-col才好使,此处放上所有iview不在template中应修改的标签(不该的话直接放html里就会不对哦,来自于iview官网):

    以下组件,在非 template/render 模式下,需要加前缀 i-

    • Button: i-button
    • Col: i-col
    • Table: i-table
    • Input: i-input
    • Form: i-form
    • Menu: i-menu
    • Select: i-select
    • Option: i-option
    • Progress: i-progress

    以下组件,在所有模式下,必须加前缀 i-

    • Switch: i-switch
    • Circle: i-circle

    另外,在iview官网下有个坑就是Form表单的源代码,首先应把Form改为i-form,然后再官网下FormItem是使用的驼峰标识,在Vue.js的官网中也提到了,因此应该把FormItem改为Form-item,此处表示找错找了半小时才想到。。。。。。被坑得不要不要的了~

     

    本地测试代码

    <!DOCTYPE html>
    <html>
    <head>
           <meta charset="utf-8">
        <title>iview example</title>
        <link rel="stylesheet" href="iview/dist/styles/iview.css" />
        <script type="text/javascript" src="js/vue.min.js" ></script>
        <script type="text/javascript" src="iview/dist/iview.min.js" ></script>
    
        <link rel="stylesheet" href="css/syle.css" />
    </head>
    <body>
    <div id="app">
        <Row>
            <i-col span="12">
                <Steps :current="2">
                    <Step title="已完成" content="这里是该步骤的描述信息"></Step>
                    <Step title="进行中" content="这里是该步骤的描述信息"></Step>
                    <Step title="待进行" content="这里是该步骤的描述信息"></Step>
                    <Step title="待进行" content="这里是该步骤的描述信息"></Step>
                </Steps>
            </i-col>
            <i-col span="12">
                <Tabs value="name1">
            <Tab-pane label="我是" name="name1">你好</Tab-pane>
            <Tab-pane label="你好" name="name2">我是</Tab-pane>
        </Tabs>
                 <i-button @click="show">Click me!</i-button>
            </i-col>
        </Row>
        
        
        <Modal v-model="visible" title="Welcome">欢迎使用 iView</Modal>
        <Slider v-model="value1"></Slider>
        <Slider v-model="value2" range></Slider>
        <Slider v-model="value3" range disabled></Slider>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                visible: false,
                 theme1: 'light',
                 value1: 25,
                    value2: [20, 50],
                    value3: [20, 50]
            },
            methods: {
                show: function () {
                    this.visible = true;
                }
            }
        })
      </script>
    </body>
    </html>

    结果图:

     

    转载于:https://www.cnblogs.com/DoJavaByHeart/p/7390139.html

    展开全文
  • 关于 iView iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。... 以上内容乃是摘抄官网介绍,懒的写,以下代码以记录最近学习的一些问题解决,IViewUI入门练习~CDN模式全局...

     

    关于 iView

    iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

    特性

    • 高质量、功能丰富
    • 友好的 API ,自由灵活地使用空间
    • 细致、漂亮的 UI
    • 事无巨细的文档
    • 可自定义主题

           以上内容乃是摘抄官网介绍,懒的写,以下代码以记录最近学习的一些问题解决,IViewUI入门练习~CDN模式全局加载JS,值得注意的地方是,由于CDN模式与NPM 安装模式,在HTML中写入还是有一定的区别的,例如写一个日期控件:

    //CDN模式加载
    <Row style="margin-left:300px">
      <i-col span="12">
      </i-col>
      <i-col span="12">
        <date-picker style="left:0px" type="daterange" placement="bottom-start" placeholder="选择日期"></date-picker>
      </i-col>
    </Row>
    //NPM模式安装
    <Row style="margin-left:300px">
      <Col span="12">
      </Col>
      <Col span="12">
        <DatePicker style="left:0px" type="daterange" placement="bottom-start" placeholder="选择日期"></DatePicker>
      </Col>
    </Row>

     

    可以看出,明显的区别:DatePicker在CDN的模式下要用横杠 一 分开的,在HTML中是不能识别字符的大小写特性。官网也有介绍,但是由于我们平时都是直接找对应的组件,而且在组件中也没有专门写CDN模式的注意地方,挺头疼的,以下是部分的区别:

    在非 template/render 模式下(例如使用 CDN 引用时),组件名要分隔,例如 DatePicker 必须要写成 date-picker

    以下组件,在非 template/render 模式下,需要加前缀 i-

    • Button: i-button
    • Col: i-col
    • Table: i-table
    • Input: i-input
    • Form: i-form
    • Menu: i-menu
    • Select: i-select
    • Option: i-option
    • Progress: i-progress

    以下组件,在所有模式下,必须加前缀 i-

    • Switch: i-switch
    • Circle: i-circle

    官网传送带https://www.iviewui.com/docs/guide/start

    以下内容做为记录学习,给初学者的一个捷径。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>iview example</title>
        <script type="text/javascript" src="http://vuejs.org/js/vue.min.js"></script>
        <link rel="stylesheet" type="text/css" href="http://unpkg.com/iview/dist/styles/iview.css">
        <script type="text/javascript" src="http://unpkg.com/iview/dist/iview.min.js"></script>
        <style type="text/css">
         .ivu-select-dropdown{
         left:0px
          }
        </style>
    </head>
    <body>
    <div id="app">
        <Tabs value="name1">
            <Tab-pane label="我是" name="name1">你好<br />
                 <i-button @click="show">Click me!</i-button>
                 <Modal v-model="visible" title="Welcome">欢迎使用 iView</Modal>
            </Tab-pane>
            <Tab-pane label="博主" name="name2" style="height:300px">
                    <Row :gutter="16">
                        <i-Col span="6">
                            <div style="background-color:red">col-6</div>
                        </i-Col>
                        <i-Col span="6">
                            <div style="background-color:black">col-6</div>
                        </i-Col>
                        <i-Col span="6">
                            <div style="background-color:blue">col-6</div>
                        </i-Col>
                        <i-Col span="6">
                            <div style="background-color:green">col-6</div>
                        </i-Col>
                    </Row>
                    <Auto-Complete
                        v-model="value2"
                        @on-search="handleSearch2"
                        placeholder="input here"
                        style="width:200px">
                        <Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option>
                    </Auto-Complete>
            </Tab-pane>
            <Tab-pane label="秋意正寒" name="name3">秋意正寒
                 <Slider v-model="value3" range></Slider>
                <Row style="margin-left:300px">
                    <i-col span="12">
                        
                    </i-col>
                    <i-col span="12">
                        <date-picker style="left:0px" type="daterange" placement="bottom-start" placeholder="选择日期"></date-picker>
                    </i-col>
                </Row>
            </Tab-pane>
        </Tabs>
    </div>
    <script >
        new Vue({
            el: '#app',
            data: {
               visible: false,
               value3: [20, 50],
               value2: '',
               data2: []
            },
            methods: {
                show: function () {
                    this.visible = true;
                },
                 handleSearch2 (value) {
                    this.data2 = !value || value.indexOf('@') >= 0 ? [] : [
                        value + '@qq.com',
                        value + '@sina.com',
                        value + '@163.com'
                    ];
                }
            }
        })
      </script>
    </body>
    </html>

     

    推荐一个网友的总结使用,对于组件的理解比较全面一些,传送门http://blog.csdn.net/u012123026/article/details/72460470

        结束~

    转载于:https://www.cnblogs.com/kangzi/p/7495549.html

    展开全文
  • iview_入门

    万次阅读 2018-07-09 19:01:07
    执行npm install iview --save 在项目中引入iview 引入 iView # 一般在 webpack 入口页面 main.js 中如下配置: import iView from 'iview' import 'iview/dist/styles/iview.css' //导入样式 Vue.config....
  • iview使用入门

    千次阅读 2019-05-21 11:23:17
    Split 面板分割(官网地址)
  • IView 2.0.0入门案例

    2019-09-19 19:59:48
    iView 是Vue框架开发的UI框架,在iView1.0版本的时候就开始关注,但是未做过案例。截止目前,官网尚未更新iView2.0.0的案例及文档。今天终于抽了点时间做了个简单的案例,起抛砖引玉作用的同时,也在后续分享一下...
  • iview的使用入门

    2018-06-28 12:28:00
    (1)在git bash中安装iview,即: npm install iview --save (2)在main.js中引用并注册iView,即: import iView from 'iview' import 'iview/dist/styles/iview.css' Vue.use(iView) (3)为了...
  • ivew iview-project脚手架入门实战

    千次阅读 2018-06-29 14:47:19
    iview大体上可以分为两种使用方式: 1,直接使用script引用iview的js。 2,使用iview提供的脚手架。 第一种方式使用script引用iview和vue比较简单,适合刚上手vue和iview的小伙伴。 第二种方式iview已经为我们...
  • 主要介绍了新手快速入门微信小程序组件库 iView Weapp,iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称,大幅度降低了学习成本,是一套一套高质量的微信小程序 UI 组件库,需要的朋友可以参考下
  • Vue+iView结合代码——小白入门

    千次阅读 2019-02-14 18:08:00
    Vue+iView结合代码——小白入门当前环境步骤举个栗子 当前环境 已存在 npm 已安装 node (检查版本: node -v) 未全局安装vue-cli(检查是否成功安装 vue --version) 步骤 打开小黑板( Ctril+R 输入cmd 回车) 小...
  • 想必刚上的盆友都想把iview-admin发布到iis看下运行情况吧? 费劲千辛万苦好不容易把环境搭建好iview-admin安装好,结果发现开发环境可以正常运行,发布出来就报404错误。 只问你有木有? 而且网上也找不到正确的...
  • 先放一张没有修改过的iview对话框。 修改过的Modal。 代码: HTML: <Modal v-model="modalGlzcy" class-name="qzcxQzc" :closable="false"> <!-- <template #header> </template> -->...
  • 与vuex,vue-router,less,iview集成的vuejs入门项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run ...
  • iView快速使用

    2019-10-28 22:07:40
    文章目录iView快速入门#1 环境#2 官方文档#2.1 链接#2.2 前提条件#2.3 安装iView#2.4 快速上手#3 其他 iView快速入门 #1 环境 "view-design": "^4.0.0", "vue": "^2.5.2", #2 官方文档 #2.1 链接 ...
  • 小编根据C4认证的成长路径整理了前端框架的相关资源,从零基础带你进入vue前端框架的世界,除了vue前端框架,包含Element、vuetify、vue-strap和iview等。让小伙伴们从无到有,从浅入深的系统地学习vue前端框架。 ...
  • iView框架之vue-router 入门(一)

    千次阅读 2018-04-14 15:49:46
    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现...

空空如也

空空如也

1 2 3 4 5
收藏数 100
精华内容 40
关键字:

iview入门