Git Product home page Git Product logo

vue-cli-plugin-element's Introduction

vue-cli-plugin-element

Element plugin for @vue/cli 3.0.

Install

First you need to install @vue/cli globally (follow the instructions here).

Then create a project and add the Element plugin:

vue create my-app
cd my-app
vue add element

You'll be asked some questions regarding how Element is configured in your project. After that, you're good to go.

Use with vue-cli UI

Skip this part if you've done everything in the Install section.

If you prefer managing your project in vue-cli UI (by running vue ui), here's how you can add Element plugin: go to the Plugins menu, click the upper right + Add plugin button, find vue-cli-plugin-element and install it.

image

Also there're some configurations for you.

image

vue-cli-plugin-element's People

Contributors

leopoldthecoder 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

vue-cli-plugin-element's Issues

Plugin works for 'serve' but now for production 'build'

Hi,

I'm using this plugin for production-ready Vue application. I'm attempting to deploy the app through a simple docker container. For some reason, the element-ui components are not loading properly anymore. For the normal, 'serve' script, it works as intended.

Screenshots below show whats messed up, it should look as follows:

Schermafbeelding 2019-11-30 om 12 43 49

But the page is displayed like this:

Schermafbeelding 2019-11-30 om 12 44 05

Any ideas on what causes this?

为什么对表格进行筛选的时候会重新渲染td的内容

使用el-table的时候,我自己写了一个渲染函数来显示表格内的内容,目的是为了显示一些图片或者富文本:
<template slot-scope="cd">
<div v-html="render(cd.row, col.index)" style="display:inline"></div>
</template>
但问题出来了,在对列进行筛选操作的时候,每次展开和关闭筛选选择框,都要调用 render函数,为什么要这样做,这样既没有任何作用,而且还十分低效,有没有什么办法能避免,我看有个filtered-value的列属性好像可以用,但是没看明白是怎么用的

node-sass HTTP error 404 Not Found @ vue add element

Install error of vue add element

vue create
vue add element

This is result.

  Installing additional dependencies...

> [email protected] install C:\Users\ryosen\Downloads\testuserdart\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-93_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-93_binding.node":

HTTP error 404 Not Found

In the node-sass releases page, win32-x64-93 is not found.
https://github.com/sass/node-sass/releases/#:~:text=2.76%20MB-,win32%2Dx64%2D83_binding.pdb,-24%20MB

my environment

vue-cli version @vue/cli 4.5.15
project vue-2
node-version v16.13.1
OS win10

How to change colors?

Hi there
I just used the plugin follow the instructions and everything goes right (Good Job fellows).
But when I try to change colors, I edit the "var.scs" located in:
"C:\myproject\node_modules\element-ui\packages\theme-chalk\src\common\var.scs"

And nothing happen : (
I try to restart server, and delete cache but no get change in colors.

Please, could you help me? Any Idea? What I am doing wrong?

Thanks a lot in advance

vue add element conflits with vue cli

I generated a new project using vue cli and import Element-UI using "vue add element", and error occurred as below:

Running completion hooks...error:
Unexpected use of file extension "js" for "./plugins/element.js" (import/extensions) at src\main.ts:5:8:

At the same time, all my router settings failed to be used and App.vue will always be reached no matter what url is input.

按需引入样式无效是为什么啊?

引入的相关代码:
import './plugins/element.js' import { Message,Loading } from 'element-ui' Vue.use(Message) Vue.use(Loading) Vue.prototype.$loading = Loading.service; Vue.prototype.$message = Message;

但是样式没有用!不知道为什么呜呜呜 ┭┮﹏┭┮

[Vue cli3 Import on demand ]After I updated my dependencies, element throw error and project display in blank

Hi,

I did a dependencies update yesterday.
I run npm run dev after update finished, the project throw an error:**
element.js?7378:75 Uncaught ReferenceError: _Loading is not defined at eval (element.js?7378:75) at Object../src/plugins/element.js (app.js:16918) at __webpack_require__ (app.js:724) at fn (app.js:101) at eval (main.js?56d7:10) at Object../src/main.js (app.js:16846) at __webpack_require__ (app.js:724) at fn (app.js:101) at Object.0 (app.js:19667) at __webpack_require__ (app.js:724)

Old version in package.json are:
"element-ui": "^2.4.5",
"vue": "^2.5.17",
"@vue/cli-service": "^3.0.5",
"babel-plugin-component": "^1.1.1",

The new version are:
"element-ui": "^2.7.2",
"vue": "^2.6.10",
"@vue/cli-service": "^3.5.3",
"babel-plugin-component": "^1.1.1",

My element configuration is:

  1. Import on demand
  2. Custom themes

I found if I remove the code "Vue.use(Loading.directive)" in /plugins/element.js, project can work.
But the console always show error:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve directive: loading

Would you please kindly help with it, thanks!

vue add element

./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
Module not found: Error: Can't resolve './components/HelloWorld.vue' in 'D:\vues\myjz1\src'

<el-form-item/>里面添加输入文本框<el-input/>后,不会渲染组件了

`


      <el-form-item label="详情">
          <!-- <el-input type="textarea" v-model="form.info"></el-input> -->
      </el-form-item>

      <el-form-item >
          <el-button type="primary" @click="onSubmit">立即投稿</el-button>
      </el-form-item>
  </el-form>`

这是注释过的,可以正常显示
捕获

`


      <el-form-item label="详情">
          <el-input type="textarea" v-model="form.info"></el-input>
      </el-form-item>

      <el-form-item >
          <el-button type="primary" @click="onSubmit">立即投稿</el-button>
      </el-form-item>
  </el-form>`

这是没注释的,直接没页面了

捕获2

关于 router-view 的bug

element-ui 安装后,router-view 标签所占据的组件内部标签无法渲染成普通标签。
比如 解析后还是

新建的项目,安装了babel-plugin-transform-vue-jsx之后,报错

安装了babel-plugin-transform-vue-jsx并且按照文档在vue-cli3脚手架新建的项目的babel.config.js中修改成如下配置:

module.exports = {
  presets: [
    '@vue/app',
    'env'
  ],
  plugins: ["transform-vue-jsx"]
}

然后再用vue add element 安装 elementUIbabel.config.js被改成了这样:

module.exports = {
  "presets": [
    "@vue/app",
    "env"
  ],
  "plugins": [
    "transform-vue-jsx",
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}


最后,起服务`npm run serve`, 点击查看
![image](https://user-images.githubusercontent.com/23474513/50156800-a851cc00-030a-11e9-9634-e42ed962aaa7.png)

dart-sass

国内环境安装 node-sass 容易失败, 可以切换成 dart-sass 么

create project error

TypeError: Cannot read property 'indexOf' of undefined
at progress.wrap (/usr/local/lib/node_modules/@vue/cli/node_modules/@vue/cli-ui/apollo-server/connectors/projects.js:292:35)

vue create myapp got error

internal/modules/cjs/loader.js:583
throw err;
^

Error: Cannot find module '/root/gitee/myapp/node_modules/yorkie/bin/install.js'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:279:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:752:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] install: node bin/install.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install 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! /root/.npm/_logs/2018-09-30T02_46_04_333Z-debug.log
ERROR command failed: npm install --loglevel error --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist

node version: v10.11.0
npm version: 6.4.1

first <npm install -g @vue/cli>
then <vue create myapp>
and error I got up there

"export 'default' (imported as 'Vue') was not found in 'vue'

yarn run v1.21.1
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin

WARNING Compiled with 1 warnings 9:54:36 PM

warning in ./src/plugins/element.js

"export 'default' (imported as 'Vue') was not found in 'vue'

_vue2.default is undefined

I created a new vue3 CLI project

vue create new-project
vue add vuex
vue add router
vue add element

I select to import a different locale.

When I open the index page, I get this '_vue2.default is undefined' error. It seems to be inside Element, which uses a _interopRequireDefault function to discriminate between transpiled and native modules. However, the Vue 3 export apparently does not export a default (anymore).

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.