element-ui(elementui树形控件)
使用Element-UI 之乱码问题
解决方法1(不考虑新版的element-ui,不需要部分新的组件)：
若使用的element-ui版本中未使用dart-sass,那本项目可使用node-sass(最好和element-ui使用版本一致)编译，并移除sass
解决方法2(若不考虑变换主题)：
本项目采用了 vue-element-admin 解决方案
解释：
解决方法3(目前采用方案)：
css-unicode-loader
对scss文件增加一层loader来将dart-scss编译成的css文件 (app.c5fc6c07.css) 里面的双字节字符再转回16进制码
Element ui的简单使用
Element ui官网
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
在 main.js 中配置
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com 。
vue中element-ui如何修改源码
由于项目需要，需要修改源码，但是，发现修改了以后不生效，发现其实项目中引用的并不是源码，而是打包好的 lib 文件。源码相当于只是提供你参考的，但是，整个项目的运行，靠的都是 lib 文件夹下的打包文件。
1.首先，从git上拉取element的源码
2.安装依赖 npm install
3.修改 packages 中的源码，然后进行打包 npm run dist
4.找到你的项目中的 node_modules 包下的 element-ui 文件夹下的 lib 包，用你修改好后打包生成的 lib 包进行替换即可生效
Element UI 基本使用
1：npm 安装
推荐使用 npm 的方式安装，它能更好地和? webpack ?打包工具配合使用。
npm i element-ui -S，
2：引入 Element
你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。
2.1完整引入
在 main.js 中写入以下内容：
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';//全局引入
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
//Vue.use(ElementUI)
Vue.use(Button)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Container)
new Vue({
? render: h = h(App),
}).$mount('#app')
2.2按需引入
借助? babel-plugin-component ，我们可以只引入需要的组件，以达到减小项目体积的目的。
首先，安装 babel-plugin-component：
在命令行输入
npm install babel-plugin-component -D
然后，将 .babelrc 修改为：//等同于 babel.config.js文件
module.exports = {
? presets: [
? ? '@vue/cli-plugin-babel/preset',
? ? ["@babel/preset-env", { "modules": false }]
? ],
? "plugins": [
? ? [
? ? ? "component",
? ? ? {
? ? ? ? "libraryName": "element-ui",
? ? ? ? "styleLibraryName": "theme-chalk"
? ? ? }
? ? ]
? ]
}
2.2.1在main.js配置
import Vue from 'vue'
import App from './App.vue'
?import {Button,Aside,Main,Container} from 'element-ui';//按需引入 注：Container首字母大写
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
//Vue.use(ElementUI)
Vue.use(Button)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Container)
new Vue({
? render: h = h(App),
}).$mount('#app')
小菜刚学会element_ui组件使用，如何全局引入库文件太大，开发时浪费资源，希望大神们多指教
element-ui适合移动端用么
minit－ui和element－ui，前者是移动端，后者是PC端，结合Vue功能不错，就是UI组件不是很强大，可以满足一般的需求。
所以element－ui不适合移动端。
element－ui的需求：丰富的feature：丰富的组件，自定义主题，国际化。文档 demo：提供友好的文档和 demo，维护成本小，支持多语言。安装 引入：支持 npm 方式和 cdn 方式，并支持按需引入。工程化：开发，测试，构建，部署，持续集成。
作为一个基础组件库，还有一个很重要的方面就是组件种类丰富。element－ui官方目前有55个组件，分成了6大类，分别是基础组件、表单类组件、数据类组件、提示类组件、导航类组件和其它类型组件。这些丰富的基础组件能很好地满足大部分PC端toB业务开发需求。
element－ui的组件源码在packages目录里维护，而并不在src目录中，这么做的目的猜测是为了让每个组件可以单独打包，支持按需引入。
但实际上想达到这个目的也并不一定需要这么去组织维护代码，更推荐把组件库中的组件代码放在src／components目录中维护，然后通过修改webpack配置脚本也可以做到每个组件单独打包以及支持按需引入，源码放在src目录总是更合理的。
扩展资料：
element－ui组件的样式、公共样式都在packages／theme－chalk文件中，并且它是可以独立发布的。element－ui组件样式中的颜色、字体、线条等等样式都是通过变量的方式引入的。
在packages／theme－chalk／src／common／var．scss中我们可以看到这些变量的定义，这样就给做多主题提供了方便，因为我只要修改这些变量，就可以实现组件的主题改变。
updateVarible是一个POST请求，他会把你修改的的主题配置提交到后端server，提交的数据你可以自己去查看它的RequestPayload，这个POST请求会返回一段CSS文本，然后会动态插入到head标签的底部，来覆盖默认样式。
可以通过审查元素看到head底部会动态插入一个id为chalk－style的标签。
参考资料：百度百科-UI设计