Giter VIP home page Giter VIP logo

iview-cli's Introduction

iView

A high quality UI Toolkit built on Vue.js.

iView NPM downloads NPM downloads JS gzip size CSS gzip size Join the chat at https://gitter.im/iview/iview Backers on Open Collective Sponers on Open Collective

Docs

3.x | 2.x | 1.x

Features

  • Dozens of useful and beautiful components.
  • Friendly API. It's made for people with any skill level.
  • Extensive documentation and demos.
  • It is quite beautiful.
  • Supports both Vue.js 2 and Vue.js 1.

Who's using iView

If your company or products use iView, welcome to click here to leave a message.

Install

We provide an iView plugin for Vue CLI 3, which you can use to quickly build an iView-based project.

We also provide a starter kit iview-project for you.

Install iView

Using npm:

npm install iview --save

Using a script tag for global use:

<script type="text/javascript" src="iview.min.js"></script>
<link rel="stylesheet" href="dist/styles/iview.css">

You can find more info on the website.

Usage

<template>
    <Slider v-model="value" range />
</template>
<script>
    export default {
        data () {
            return {
                value: [20, 50]
            }
        }
    }
</script>

Using css via import:

import 'iview/dist/styles/iview.css';

Compatibility

  • Supports Vue.js 2.x
  • Supports Vue.js 1.x - visit 1.0 docs
  • Supports SSR
  • Supports Nuxt.js
  • Supports TypeScript
  • Supports Electron
  • Most components and features support IE9 and above browsers, some components and features do not support IE

Community

If you want to contribute or have questions or bugs to report:

Questions: Find other users at the Gitter chat or post on StackOverflow using [iview-ui] tag
Bugs: File a issue here - please provide a example so we can help you better
Contribute: Contact us in Gitter chat, WeChat or via mail to [email protected]. PRs welcome!

Major Contributors

Name Avatar Name Avatar Name Avatar
Aresn jingsam rijn
lcx960324 GITleonine1989 huixisheng
Sergio Crisostomo lison16 Xotic750
huanghong1125 yangdan8

Ecosystem Links

License

MIT

Copyright (c) 2016-present, TalkingData

iview-cli's People

Contributors

fengluhome avatar icarusion avatar lison16 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

iview-cli's Issues

English version

Is it possible to switch to English (or other languages)? I can see different locales, but when I start iView (linux 64 version), it is in Chinese with no obvious option to switch to English.

使用SASS的时候, 应该匹配scss, 而非sass


如果使用sass旧语法(sass语法),文件后缀名应为.sass
如果使用sass新语法(scss语法),文件后缀名应为.scss语法。


参考

https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss

http://www.sasschina.com/guide/


sass: ExtractTextPlugin.extract({
    use: ['css-loader?minimize', 'autoprefixer-loader', 'sass-loader'],
    fallback: 'vue-style-loader'
}),
{
    test: /\.sass/,
    use: ExtractTextPlugin.extract({
        use: ['autoprefixer-loader', 'sass-loader'],
        fallback: 'style-loader'
    })
},

babel-loader should exclude node_modules on testing iview*.js

webpack.base.config.js中与iview*.js对应的babel-loader规则也许应该加上: exclude: /node_modules/

            {
                test: /iview\/.*?js$/,
                loader: 'babel-loader' 
                exclude: /node_modules/  <------少了这一行,this line should be added
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },

不加的话,执行webpack时,windows下没问题,在linux上会报[BABEL] Note: The code generator has deoptimised the styling of "..." as it exceeds the max of "500KB". 最终编译出来的静态文件会报错
具体请参见:

关于跨域配置

我在webpack.dev.config.js中配置了devServer的 proxy 但是,用 axiso时,无法实现跨域。请问 关于开发环境跨域的配置该在哪里配置?如何配置?

Windows中运行构建后的exe报错

通过npm run build:win64后运行生成的iView.exe

[Window Title]
Error

[Main Instruction]
A JavaScript error occured in the main process

[Content]
Uncaught Exception:
D:\Vue\iview-cli\iView-win32-x64\resources\app\main.js:1
(function (exports, require, module, __filename, __dirname) { const { app, BrowserWindow, Menu } = require('electron');
^
SyntaxError: Unexpected token {
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:411:25)
at Object.Module._extensions..js (module.js:446:10)
at Module.load (module.js:353:32)
at Function.Module._load (module.js:308:12)
at Object. (D:\Vue\iview-cli\iView-win32-x64\resources\atom.asar\browser\lib\init.js:106:10)
at Object. (D:\Vue\iview-cli\iView-win32-x64\resources\atom.asar\browser\lib\init.js:108:4)
at Module._compile (module.js:428:26)
at Object.Module._extensions..js (module.js:446:10)
at Module.load (module.js:353:32)

[确定]

HtmlWebpackPlugin 报错

使用 iview-cli 脚手架搭建项目后, 运行npm run build 报错;
image

搜索了很久。不知道什么问题,最后试着在
image

此处添加了ejs之后。可以编译了。但是编译的文件中
htmlWebpackPlugin.files
相关的代码无法别编译。全部已原样显示出来了。
请问怎么解决。新手请多指导一下。
(我现在暂时没用hash,虽然不影响对iview的学习和使用,但是我还是想请教大神帮我解答一下学习过程中的困惑)

util.js

怎么使用,在aixos时候地址部分怎么用,例如:
axios.get(请求地址).then(res=>{
console.log(res)
})

怎么用uril.js里 ajaxUrl 这个常量

Build errors and missing documentation

I've been trying to create a project using the cli tool in a Windows 10 environment and have been running into a range of issues. I'll list the ones I've noticed. Please tell me if I am doing something wrong.

  1. It is not documented anywhere that you should first run npm run init before running npm run dev
  2. After running npm install you get the error Module not found: Error: Can't resolve 'iview-loader' when trying to run npm run init so I'm guess theres missing packages in the package.json file.
  3. After installing the missing packages you get this error Module not found: Error: Can't resolve 'less-loader' it seems like the cli tool doesnt properly generate the webpack config files for sass.

请问怎么跑起该项目?

小白一枚,请问怎么运行?我用npm install 完成后 npm run init 报错 npm run dev 也报错, npm run build 也报错,
真不知道怎么跑起来。╋

使用iView.Spin.show();报错

部分源码:
function apiAxios(method, url, params, config) {
iView.Spin.show()
axios({
method: method,
url: url,
data: params,
withCredentials: false
}).then((res) => {
iView.Spin.hide()
}).catch((err) => {
iView.Spin.hide()
errorHandler(err, config.errorFn)
})
}

报错:
Uncaught TypeError: Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'

现在好像下载不下来cli脚手架?

是我自己这边的原因吗?

huanxiongxiaojiudeMacBook-Pro:doc owen-carter$ wget https://github.com/iview/iview-cli/releases/download/v1.0.0/iView-cli-mac.dmg
--2017-03-17 11:14:39-- https://github.com/iview/iview-cli/releases/download/v1.0.0/iView-cli-mac.dmg
Resolving github.com... 192.30.253.112, 192.30.253.113
Connecting to github.com|192.30.253.112|:443... connected.
HTTP request sent, awaiting response... 302 Found
Location: https://github-cloud.s3.amazonaws.com/releases/81436841/5514d4a8-f784-11e6-9911-c94fb2ef8b6d.dmg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAISTNZFOVBIJMK3TQ%2F20170317%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20170317T031441Z&X-Amz-Expires=300&X-Amz-Signature=97b874b71db847123f238da896752453f1007c3f4d2ef73ac4e53fc30058befe&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B%20filename%3DiView-cli-mac.dmg&response-content-type=application%2Foctet-stream [following]
--2017-03-17 11:14:40-- https://github-cloud.s3.amazonaws.com/releases/81436841/5514d4a8-f784-11e6-9911-c94fb2ef8b6d.dmg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAISTNZFOVBIJMK3TQ%2F20170317%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20170317T031441Z&X-Amz-Expires=300&X-Amz-Signature=97b874b71db847123f238da896752453f1007c3f4d2ef73ac4e53fc30058befe&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B%20filename%3DiView-cli-mac.dmg&response-content-type=application%2Foctet-stream
Resolving github-cloud.s3.amazonaws.com... 52.216.225.144
Connecting to github-cloud.s3.amazonaws.com|52.216.225.144|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 47574141 (45M) [application/octet-stream]
Saving to: 'iView-cli-mac.dmg'

iView-cli-mac.dmg 0%[ ] 8.00K 8.31KB/s iView-cli-mac.dmg 0%[ ] 42.36K 143 B/s in 5m 3s

2017-03-17 11:34:47 (143 B/s) - Read error at byte 43379/47574141 (Success). Retrying.

--2017-03-17 11:34:48-- (try: 2) https://github-cloud.s3.amazonaws.com/releases/81436841/5514d4a8-f784-11e6-9911-c94fb2ef8b6d.dmg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAISTNZFOVBIJMK3TQ%2F20170317%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20170317T031441Z&X-Amz-Expires=300&X-Amz-Signature=97b874b71db847123f238da896752453f1007c3f4d2ef73ac4e53fc30058befe&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B%20filename%3DiView-cli-mac.dmg&response-content-type=application%2Foctet-stream
Connecting to github-cloud.s3.amazonaws.com|52.216.225.144|:443... connected.
HTTP request sent, awaiting response... 403 Forbidden
2017-03-17 11:34:53 ERROR 403: Forbidden.

在vue-cli项目中引入iview,执行npm run build报错

最近需要把项目打包发布到线上,发现vue项目在IE下直接白屏报语法错误,怀疑和打包报错有关,
环境:
win7 64位
"babel-polyfill": "^6.23.0", "es6-promise": "^4.1.1", "iview": "^2.0.0-rc.19", "vue": "^2.3.3", "vue-router": "^2.3.1"
报错信息:
ERROR in static/js/vendor.ce19c0c58d805cdecfbe.js from UglifyJs Unexpected token name «i», expected punc «;» [./~/iview/src/utils/assist.js:5,0][ static/js/vendor.ce19c0c58d805cdecfbe.js:10340,13]

发布问题

请问我用npm run build打包以后生成了dist文件,我怎么发布啊,放到web服务器目录点击那个index_Prod.html无法运行,请问下怎么发布?

English?

As much as I would love to learn Chinese! I just think it will take longer than I need, is there an english CLI?

盡可能多地喜歡學中文!我只是認為需要更長的時間,是否有英文CLI?

要凉?

如题。
assetsPublicPath不知道在哪里配置。

iview-cli 在webpack.dev.config.js 里的devServer配置代理跨域不生效

devServer:{
        historyApiFallback: true,
        hot: true,
        inline: true,
        proxy:{
            '/api': {
                target: 'http://example.com:8080',
                secure: false,
                changeOrigin: true,
                pathRewrite:{
                    '^/api':'/api'
                }
            }
        }
    }

如此配置之后依然无法转发和跨域,参考了goole到的几篇文章,似乎都是这样配的。
参考地址1:https://segmentfault.com/q/1010000011222653
参考地址2:https://hk.saowen.com/a/1bfaaf0ee2020d8736982c9214aeffb83e1fac39b84eacac46388775de49cb38

iview-cli 创建的初始化项目,run build 页面无标签?

@jingsam @m430 @icarusion @SergioCrisostomo @rijn
使用iview-cli 2.0 创建的初始化模板项目,npm run build 之后 访问index_prod.html #发现页面无内容标签,请问需要如何处理?

<html lang="zh-CN"><head>
    <title>iView project</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <link rel="stylesheet" href="/dist/main.38c8f38168a718c10032.css">
</head>

<body>
    <div><!----></div>
    <script type="text/javascript" src="/dist/vendors.38c8f38168a718c10032.js"></script>
    <script type="text/javascript" src="/dist/main.38c8f38168a718c10032.js"></script><div class="ivu-loading-bar" style="height: 2px; display: none;"><div class="ivu-loading-bar-inner ivu-loading-bar-inner-color-primary" style="width: 0%; height: 2px;"></div></div>


</body></html>

iView使用table checkbox多选时, 给data设置 _disabled: true 无效

apprDatas:[ { "id": "dDb7668D--29Ff-d1aA-bA2BA4dE0dC2", "type": 1, "status":0, "doctorId": 1256, "nickName": "雷子", "hospitalName": "北京医院", "professtionTitle": "主任", "departmentName": "皮科", _disabled: true, _checked: true }, { "id": "BB3Fe9bC-68b3-397A-cfBDd82e1496", "type": 2, "status":2, "doctorId": 1256, "nickName": "雷子", "hospitalName": "北京病医院", "professtionTitle": "主师", "departmentName": "皮科", } ]

如上, 对应的checkbox仍然可以选择

v2.0 iview-cli 在windows 异常

下载zip包或者 使用 npm build:win64 生成的exe文件,双击可以打开但是内容区域却一片空白。

OS: Win10
a95a68e9-a88c-41eb-8039-2b7ef18c3101

echarts组件问题

Uncaught ReferenceError: DEV is not defined
at Function.RootClass.extend (clazz.js:66)
at Object.env (Component.js:23)
at webpack_require (bootstrap 3a59e3b4d5938b2661e1:693)
at fn (bootstrap 3a59e3b4d5938b2661e1:114)
at Object. (vendors.js:127656)
at webpack_require (bootstrap 3a59e3b4d5938b2661e1:693)
at fn (bootstrap 3a59e3b4d5938b2661e1:114)
at Object. (util.js:614)
at Object.defineProperty.value (echarts.js:2003)
at webpack_require (bootstrap 3a59e3b4d5938b2661e1:693)

请问下,iview-cli生成的项目,怎么配置BASE_API和NODE_ENV这些呢?

我们知道如果使用典型webpack生成项目,那么会有三个文件在config文件夹下:

.
├── dev.env.js
├── index.js
└── prod.env.js

我们可以在不同的环境去配置不同的文件:
dev.env.js:

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"http://localhost:8000/"'
})

prod.env.js:

'use strict'

const MODEL = require('../static/config.js')
const pro= {
  NODE_ENV: '"production"',
  BASE_API: 'http://103.200.32.76/'
}
module.exports =Object.assign({}, pro, MODEL)

但是如果iview-cli生成的文件是这样的:

.
├── config.js
└── env.js

env.js:

export default "development";

config.js

import Env from './env';

let config = {
  env: Env
};
export default config;

请问怎么配置呢?

npm run dev 报错,不太懂webpack,请大神帮忙解决。

npm run dev

@1.0.0 dev /Users/atom/Workspace/iview
webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js

fs.js:157
throw new ERR_INVALID_CALLBACK();
^

TypeError [ERR_INVALID_CALLBACK]: Callback must be a function
at maybeCallback (fs.js:157:9)
at Object.fs.write (fs.js:674:14)
at /Users/atom/Workspace/iview/webpack.dev.config.js:10:8
at FSReqWrap.oncomplete (fs.js:169:20)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @1.0.0 dev: webpack-dev-server --content-base ./ --open --inline --hot --compress --history-api-fallback --config webpack.dev.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/atom/.npm/_logs/2018-05-29T01_29_12_570Z-debug.log

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.