清澈的风

vue2.0+webpack+elementUI搭建小贴士

elementUI是饿了么团队开发的配合Vue使用的UI
根据之前的webpack+vue生成基本项目目录后，使用

1
npm i element-ui -D

安装到开发环境的项目依赖(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来使用这个模块

1
Vue.use(ElementUI)

又引入了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实例的模板里就可以了

vuewebpackelementUI