element ui 基本使用（详细的代码）

最新推荐文章于 2024-09-22 16:58:37 发布

longlong6682

最新推荐文章于 2024-09-22 16:58:37 发布

阅读量1.7k

点赞数 3

文章标签： vue

本文链接：https://blog.csdn.net/longlong6682/article/details/104944203

版权

本文详细介绍了如何在Vue项目中集成Element UI，从初始化项目到安装UI库，再到配置Webpack，最后在App.vue中使用及创建自定义组件DatePicker和Upload。

摘要由CSDN通过智能技术生成

1、首先初始一个vue项目并安装element ui

　　　　　　vue init webpack-simple element-demo

　　　　　　cd element-demo

　　　　　　npm install

　　　　　　cnpm install element-ui -S

　　　　　　npm run dev

2、编辑main.js引入element ui (引入后就可以使用element中的样式了）

main.js：

import Vue from 'vue'
import ElementUI from 'element-ui';                      // 引入element-ui
import 'element-ui/lib/theme-chalk/index.css';           // element-ui的css样式要单独引入
import App from './App.vue'

Vue.use(ElementUI);   // 这种方式引入了ElementUI中所有的组件

new Vue({
   
  el: '#app',
  render: h => h(App)
})

3、在webpack.config.js中添加loader

webpack.config.js：

var path = require('path')
var webpack = require('webpack')

module.exports = {
   
  entry: './src/main.js',
  output: {
   
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
   
    rules: [
      {
   
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },      {
   
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
   
          loaders: {
   
          }
          // other vue-loader options go here
        }
      },
      {
   
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
   
        test: /\