Vue通用后台管理项目实战-2

程序猿000001号

已于 2024-03-12 15:26:09 修改

阅读量561

点赞数 22

分类专栏： Vue通用后台管理项目实战笔记文章标签： vue.js javascript ecmascript

于 2024-03-12 15:24:45 首次发布

本文链接：https://blog.csdn.net/m0_56896669/article/details/136653355

版权

Vue通用后台管理项目实战笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

书接上回，上次介绍了Vue通用后台管理项目实战的前期准备工作，包括创建项目技术展示，包管理工具介绍以及vue-cli脚手架初始化项目，今天将element-ui框架在网页中的使用，以及element-ui结合脚手架全部导入和按需导入

1、element-ui在网页中使用

element-ui是饿了么旗下推出的一个ui框架

官方网址：Element - The world's most popular Vue UI framework

ui框架主要是能够快速生成界面样式和布局

在element官网有一个hello world示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>

可以尝试运行这个element基本示例，将上述复制到index.html中

运行发现没有出现hello world并且报错了，通过报错可以知道是脚本中引入的资源有问题

下面介绍一个工具网站cdnjs，这个网站能够快速找到vue依赖的正确网址

官网地址：https://cdnjs.com/

https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.10/vue.min.js

替换后运行成功：

注意：也可以将在浏览器查找上述链接，然后将内容复制到本地创建的vue.js文件中

到这里element-ui的第一个实例就运行成功了

element-ui中提供的其他样式，都可以复制代码，快速实现：

2、element-ui结合脚手架全部引入

执行下面命令进行element-ui安装

npm i element-ui -S

安装后：

下面介绍如何在项目中引入element-ui

import Vue from 'vue';
// 关键是下面两行代码
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

// 全局注入 写了这个就可以在项目中写element中的标签
Vue.use(ElementUI);

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

在项目的main.js中进行import和use

在App.vue文件中可以随便从element官网中提供的组件代码进行复制：

效果：

3、element-ui结合脚手架按需引入

按需引入，需要借助插件 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后，将 .babelrc （在cli构建的项目中是babel.config.js）添加：

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

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

从上面可以看到实际上按需导入的方式相较于全局导入的方式更加，麻烦，那么我们为什么还要按需导入呢？

因为按需导入能够使得我们最后打包的项目体积更小

使用npm run build 命令能够对项目进行打包，执行命令之后，在我们的项目中会出现dist文件夹，最后部署在线上的项目实际上是我们打包之后的项目

今天的内容就到这里，明天将继续更新本次的Vue通用后台管理项目实战的笔记