基于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

 

基于vue element-ui扩展组件库之(1)搭建框架_第1张图片

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

你可能感兴趣的:(vue)