张艳涛 写于2021-1-19

HOW:如何引入elementui?

  1. 在项目根目录package.json引入,在重新执行npm install
  "dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"element-ui": "^2.12.0"
},

在引入工程  完整引入 https://element.eleme.cn/#/zh-CN/component/quickstart

在 main.js 中写入以下内容:

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'; Vue.use(ElementUI); new Vue({
el: '#app',
render: h => h(App)
});

经历工程的实际配置

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/zh-CN' // lang i18n Vue.use(ElementUI, { locale })

WHY: package.json用途

简单来说,每个项目的根目录下,一般都会有一个package.json文件,只要你的项目中用到了 npm,这个文件可以手动创建,也可以通过下面的方式(命令行交互问答)生成:npm init

那么 package.json 里面有什么呢?

一般记录了项目的配置信息,包括名称、版本、许可证等元数据,

也会记录所需的各种模块,包括 执行依赖,和开发依赖,

以及scripts字段(点我了解 scripts 字段

  使用 npm install 命令就可以根据这个配置文件,自动下载所需的模块,默认是dependencies 和 devDependencies 中的模块都会下载。

npm----package.json
阮一峰----package.json

前端构建第1篇之---引入elementUI的更多相关文章

  1. 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui

    接上篇 接上篇<高性能流媒体服务器EasyDSS前端重构(二) webpack + vue + AdminLTE 多页面提取共用文件, 优化编译时间> 本文围绕着实现EasyDSS高性能流 ...

  2. gulp前端自动化构建工具入门篇

    现在我们通过这3个问题来学习一下: 1.什么是gulp? 2.为什么要用gulp? 3.怎么用?   什么是gulp 答:是一个前端自动化的构建工具,直白点说,如果没有这个工具,我们利用人工依旧可以做 ...

  3. 前端构建和模块化工具-coolie

    [前言] 假设你之前用过前端模块化工具:seajs.requirejs. 用过前端构建工具grunt.gulp, 而且感到了一些不方便和痛苦,那么你能够试试coolie [coolie] 本文不是一篇 ...

  4. webpack前端构建工具学习总结(二)之loader的使用

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...

  5. webpack前端构建angular1.0!!!

    webpack前端构建angular1.0 Webpack最近很热,用webapcak构建react,vue,angular2.0的文章很多,但是webpack构建angualr1.0的文章找来找去也 ...

  6. 【技术博客】基于vue的前端快速开发(工具篇)

    一.Vue教程 vue.js是一套构建用户界面的渐进式框架.vue采用自底向上增量开发的设计.vue的核心库只关心视图层,非常容易学习,非常容易与其它库和已有项目整合.vue完全有能力驱动采用单文件组 ...

  7. 前端构建大法 Gulp 系列 (二):为什么选择gulp

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  8. 前端构建大法 Gulp 系列 (一):为什么需要前端构建

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

  9. 前端构建工具之gulp(一)「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

随机推荐

  1. 既然有 HTTP 请求,为什么还要用 RPC 调用?

    首先,实名赞扬题主的问题.这个问题非常好. 其次,实名反对各个上来就讲RPC好而HTTP不好的答案.因为,题主的观点非常对. HTTP协议,以其中的Restful规范为代表,其优势很大.它可读性好,且 ...

  2. 合宙Luat | Cat.1 Socket数据收不到?学会两招不掉线

    1 服务器收不到Socket数据的原因 Socket是大家使用Cat.1模块常用的功能之一,但Cat.1模块不是直接跟服务器连接,而是通过NAT(即网络地址转换)与服务器连接. 一个会话建立后会在NA ...

  3. UNREFERENCED_PARAMETER的用处

    UNREFERENCED_PARAMETER的用处 作用:告诉编译器,已经使用了该变量,不必检测警告! 在VC编译器下,如果您用最高级别进行编译,编译器就会很苛刻地指出您的非常细小的警告.当你生命了一 ...

  4. DOS命令行(8)——netsh-网络配置命令行工具

    netsh 介绍与语法 netsh(Network Shell) 是一个windows系统本身提供的功能强大的网络配置命令行工具,可用来显示与修改当前正在运行的计算机的网络配置(如:IP地址.网关.D ...

  5. 『动善时』JMeter基础 — 50、使用JMeter测试WebSocket接口

    目录 1.什么是WebSocket接口 2.为什么需要WebSocket 3.测试WebService接口前的准备 4.WebSocket Sampler组件界面详解 5.使用JMeter测试WebS ...

  6. ceph-csi源码分析(5)-rbd driver-nodeserver分析(上)

    更多 ceph-csi 其他源码分析,请查看下面这篇博文:kubernetes ceph-csi分析目录导航 ceph-csi源码分析(5)-rbd driver-nodeserver分析(上) 当c ...

  7. Unity 按空格一直触发Button点击事件的问题

    #解决 这是由于Button中Navigation(导航)功能导致的. 将导航设置为None即可. 真是气死我了,我说为什么点击完按钮界面,按空格就一直触发界面,难搞

  8. 32、sed命令详解

    32.1.sed介绍: 1.sed(sed软件常称做)是流编辑器,是操作.过滤.和转换文本内容的工具: 2.sed的模式空间和保持空间介绍: (1)模式空间:sed处理文本内容行的一个临时缓冲区,模式 ...

  9. 12.10、elk实用案例

    1.架构图: 服务器名称 ip地址 controller-node1(主) 172.16.1.90 slave-node1(从) 172.16.1.91 2.安装filebeat: filebeat不 ...

  10. c++11 线程间同步---利用std::condition_variable实现

    1.前言 很多时候,我们在写程序的时候,多多少少会遇到下面种需求 一个产品的大致部分流程,由工厂生产,然后放入仓库,最后由销售员提单卖出去这样. 在实际中,仓库的容量的有限的,也就是说,工厂不能一直生 ...