doc/实训内容/实训-Vue.md

Vue2版

Vue2官网：https://v2.cn.vuejs.org/v2/guide/

1. 创建vue项目

全局安装

npm install -g @vue/cli

安装后查看是否安装成功

vue -V

创建Vue项目

vue create project-name

创建完成

2. 运行

cd project-name
npm run serve

3. element-ui

官网：https://element.eleme.cn/#/zh-CN/component/installation

安装

npm i element-ui -S

引入：全局引入

//main.js
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(ElementUI);

引入：按需引入方式1

//main.js
import "@/plugins/element";
//@/plugins/element.js
import Vue from "vue";
import { Button, Loading,MessageBox } from "element-ui";
Vue.use(Button);
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;

引入：按需引入方式2

//babel.config.js
module.exports = {
  presets: [
    "@vue/cli-plugin-babel/preset",
    ["@babel/preset-env", { modules: false }],
  ],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk",
      },
    ],
  ],
};

//./components/element/index.js
import { Button, Input, Radio, Table, Form } from "element-ui";
const coms = [Button, Input, Radio, Table, Form];
export default {
  install(Vue, options) {
    coms.map((c) => {
      Vue.component(c.name, c);
    });
  },
};

//main.js
import element from "./components/element";
Vue.use(element);

使用

//vue文件中
<template>
  <div id="app">
    <el-button>默认按钮</el-button>
    <el-button type="primary">主要按钮</el-button>
  </div>
</template>