11.10每日总结

完全引入
// 1.安装依赖-生产依赖
npm install element-ui -S
1
2
// main.js
import Vue from 'vue';
import ElementUI from 'element-ui'; // 2.1引入结构
import 'element-ui/lib/theme-chalk/index.css'; // 2.2引入样式
import App from './App.vue';

Vue.use(ElementUI); // 3.安装

new Vue({
el: '#app',
render: h => h(App)
});
1
2
3
4
5
6
7
8
9
10
11
12
按需引入(推荐)：自动（vue ui）方式
1.win + r 打开DOS窗口 键入 vue ui 回车打开图形化界面
1
2.vue项目管理器，打开（未打开过需要导入）项目
1
3.点击 插件 -> 添加插件，进入插件查询面板
1
4.键入：vue-cli-plugin-element 点击 -> 安装 vue-cli-plugin-element
1
5.How do you want to import Element 选择 import on demand（按需引入）
1
6.完成安装后，打开项目，src/plugins/element.js 文件展示了 Button 组件的按需引入，若需要其他组件，添加引入即可
1
按需引入生成代码
//main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './plugins/element.js'; // 引入js文件

Vue.config.productionTip = false;

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// element.js 定义引入那些文件
import Vue from 'vue';
import { Button } from 'element-ui';

Vue.use(Button);
1
2
3
4
5
// babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
// 解析
plugins: [
[
"component",
{
libraryName: "element-ui",
styleLibraryName: "theme-chalk"
}
]
]
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
按需引入：手动方式
1.安装 Element ui
npm install element-ui -S
1
2.安装依赖
npm install babel-plugin-component -D
1
3.创建 element.js
import Vue from "vue";
import { Button } from "element-ui";

Vue.use(Button);
1
2
3
4
4.main.js 引入
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import "./plugins/element.js";

Vue.config.productionTip = false;

new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");