前端构建第1篇之---引入elementUI

张艳涛 写于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