叉烧店并不卖叉烧

使用Element-Ui

vuejs TTT 115℃ 0评论

参考

安装

使用npm安装

npm i element-ui -S // i代表install,-S代表--save
npm install --save-dev css-loader
npm install --save-dev file-loader 
npm install --save-dev style-loader 
npm install --save-dev babel-loader@7 babel-core babel-preset-env // 非必须,使用babel编译出来的js文件可以给IE运行

引入Element-Ui

在入口文件中引入一下内容

import Vue from 'vue';
import ElementUI from 'element-ui'; //element-ui必须
import 'element-ui/lib/theme-chalk/index.css'; //element-ui必须
import App from './App.vue';

Vue.use(ElementUI); //element-ui必须

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

webpack.config.js配置

const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
……
    module: {
        rules: [
            {   // 编译.vue组件文件
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader" // 注意style-loader必须放在css-loader的左边。webpack执行插件的顺序是从右到左
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            },
            {// 编译Element-Ui包含的文件
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {   // 非必须的插件,为了将编译出来的js文件给不支持ES2015语法的浏览器运行
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

项目

child-index.js

import Vue from "vue/dist/vue.js"
import ChildIndexApp from "./ChildIndexApp.vue"
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
 
new Vue({
    el: "#childIndex",
    template: "<ChildIndexApp/>",
    components: {ChildIndexApp}
})

ChildIndexApp.vue

<template>
  <div>
    <p>Hi, I am ChildIndexApp</p>
    <el-button @click="show = !show">Click Me</el-button>
    <div style="display: flex; margin-top: 20px; height: 100px;">
      <transition name="el-fade-in-linear">
        <div v-show="show" class="transition-box">.el-fade-in-linear</div>
      </transition>
      <transition name="el-fade-in">
        <div v-show="show" class="transition-box">.el-fade-in</div>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    show: true
  })
};
</script>

<style>
.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>z

package.json

{
  "name": "perlerbean",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "vue": "^2.5.17",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },
  "dependencies": {
    "element-ui": "^2.5.4"
  }
}

webpack.config.js

const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports = {
    entry: {
        childIndex: __dirname + "/app/child-index.js"
    },
    output: {
        path: __dirname + "/public",
        filename: "[name].js" // 将以原本的入口文件命名
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "env"
                        ]
                    }
                },
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin()
    ]
}

转载请注明:叉烧店 » 使用Element-Ui

喜欢 (0)
发表我的评论
取消评论

CAPTCHA Image
Reload Image
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址