vue2.0项目引入element-ui

在项目中,为了方便我们工作和开发效率,常常引入一些框架来帮助我们完成高效的工作,今天我们就用vue来搭建一下框架,并且引入element-ui这个框架。安装流程也是我从失败中摸索到的,希望能帮助大家。

1.我们先安装vue脚手架

  • cnpm install vue-cli -g  全局安装
  • 我使用的是cnpm;来进行安装的,大家可以去淘宝镜像下载安装cnpm
  • 安装完成之后使用: vue --help / --version/ -V 命令检测是否安装成功

2.使用vue-cli创建脚手架

  • vue init webpack mywebpack   
  • mywebpack   项目名称

3.进入 mywebpack这个目录 

  • 初始化 cnpm  install

4.安装 Element-ui框架

  1. 先安装 loader模块

    cnpm install style-loader -D     cnpm install css-loader -D     cnpm install file-loader -D

   2.安装Element-ui模块

    cnpm install element-ui --save

5.修改webpack.base.conf.js 添加一下代码:

我们在项目中找到build文件,文件有一个webpack.base.conf.js在这里面修改代码,

{
    test: /\\\\\\\\.css$/,
    loader: "style!css"
},
{
    test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
    loader: "file"
}
插入这些代码

6.引入Element,打开项目 找到src/main.js目录,添加一下代码

import Element from 'element-ui  import 'element-ui/lib/theme-chalk/index.css'如果引入这个方法报错,则引入下面方法 import '../node_modules/element-ui/lib/theme-default/index.css' Vue.use(Element)

7.运行项目 cnpm run dev

8.测试是否成功

<el-button type="primary">主要按钮</el-button> <el-button type="text">文字按钮</el-button>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券