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>

posted @ 2018-04-11 17:10  小周sri的码农  阅读(5512)  评论(3编辑  收藏  举报