基于vue element-ui扩展组件库之（1）搭建框架

主要环境

• vue2.*
• element-ui 2.5.x
• webpack 3.x

初始化项目

• 安装vue-cli

npm install -g vue-cli
复制代码

如果执行npm命令提示operation not permitted ,则需要使用管理员权限运行vscode或cmd

• 使用vue-cli构建项目

vue init webpack vep-ui
复制代码

安装element-ui npm i element-ui --save

安装css-loader style-loader (安装style-loader的目的是为了在html中以style的方式嵌入css)

npm install css-loader --save-dev
npm install style-loader --save-dev
复制代码

less-loader 同样的，如果我们需要在js中，require，.less文件，那么我们需要增加包less-loader和less包

npm install less  --save-dev
npm install less-loader --save-dev
复制代码

在main.js中引入 element

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI );
复制代码

为了方便编程，引入工具库lodash

npm i --save lodash
复制代码

启动，在vscode终端执行命令：

npm run dev
复制代码

浏览器访问地址：http://localhost:8080

工程GitHub地址： vue-element-plus-ui

转载于:https://juejin.im/post/5c768894e51d451d47632c9e