elementUI
是饿了么团队开发的配合Vue使用的UI 根据之前的webpack+vue生成基本项目目录后,使用
安装到开发环境的项目依赖(devDependencies)里
i 是 install 的简写 -S 是 - -save 的简写 -D 是 - -save-dev 的简写
之后找到入口文件main.js
,引入我们所需要的模块
1
2
3
4
import Vue from 'vue'
+ import ElementUI from 'element-ui'
+ import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'
在引入外部模块后,一定要记得使用use
来使用这个模块
又引入了elementUI
的css文件之后,一定要去看看package.json
里有没有相关的loader依赖,这里需要的是css-loader
、style-loader
和file-loader
然后去webpack.config.js
里去配置相关的loader
,用于加载CSS文件和字体等文件
1
2
3
4
5
6
7
8
9
module : {
rules : [{
test : /\.css$/ ,
loader : 'style-loader!css-loader'
}, {
test : /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/ ,
loader : 'file-loader'
}]
}
之后把UI组件写在你的vue实例的模板里就可以了