vue2.0项目引入element-ui

从新建vue项目到引入组件Element

一、新建项目

1.查看 node和npm是不是已经安装好命令：node -v  npm -v (没有安装的先安装环境);
2.npm install -g cnpm --registry=https://registry.npm.taobao.org  (安装国内的淘宝镜像文件，后面的安装npm可以全部改为cnpm)
3.安装 vue-cli   1、cnpm install -g vue2、cnpm install -g vue-cli
4. 安装 webpack   cnpm install -g webpack
5.cd  你的运行目录
6.新建vue项目      vue init webpack vuedemo
7.进入项目目录     cd vuedemo
8.安装依赖        cnpm install
9.运行项目        cnpm run dev
10.发布项目       cnpm run build
注：mac电脑需要在安装淘宝镜像前执行： sudo chown -R $USER /usr/local

二、使用element-ui前需安装修改的配置：

1. 安装 loader 模块：cnpm install style-loader -Dcnpm install css-loader -Dcnpm install file-loader -D
2. 安装 Element-UI 模块cnpm install element-ui --save 3. 修改 webpack.base.conf.js 的配置，位置：如下图：

下面是需添加的代码：

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

三、引入Element，前面已经全局安装了element-ui，只需要在Vue项目中引入即可

 1、打开项目：src/main.js,添加下面三条import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)

四、然后在.vue文件里就直接可以用了

例如：做一下修改,加入element-button按钮：
<template>
<div class="login"><form name = 'form' action=""><input id="username" type="text" placeholder="请输入手机号码或用户名" /><input id='pwd' type="password" placeholder="请输入密码" /><button onclick="login()">登录</button></form><div class="account"><p class="forget" style="float:right">忘记密码?</p><div class="register"><span>还没有账号?</span><a href="#">手机注册</a></div></div><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="text">文字按钮</el-button></div>
</template>

五、成功后的截图：

vue2.0项目引入element-ui相关推荐

vue设置html自动跳转路由器,vue2.0项目实现路由跳转的方法详解
一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入v ...
Vue2.0项目安装Mint-UI - cmd篇
Vue2.0项目如何安装引入Mint-UI? 这里讲一下如何通过cmd指令安装mint-ui到vue2.0项目. 步骤说明: 和以前一样,先cd到项目根目录然后cmd:npm i mint-ui - ...
vue2.0中引入wangEditor2 步骤与坑
安装:官方给出了如下安装方式点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版使用git下载: git clone htt ...
Vue2.0 的 Material Design UI 组件库 Muse-UI
Muse-UI 基于 Vue2.0 的 Material Design UI 组件库安装 npm install muse-ui --save 使用 import Vue from 'vue' im ...
创建VUE项目，vue-cli2.0版本和3.0版本的区别，将vue2.0项目升级为vue3.0项目
创建VUE项目,vue-cli2.0版本和3.0版本的区别,将vue2.0项目升级为vue3.0项目使用vue-cli2.0版本创建vue项目创建前的准备开始创建创建过程项目正常创建使用v ...
VUE2版本引入Element UI
一句话的事儿 1,在cmd中打开vue项目文件夹,输入命令: vue add element 2,加载后的选项如下: How do you want to import Element? Fully ...
vue2引入Element UI的详细步骤
目录一.Element UI介绍 Element UI的特点: vue3引入Element plus的文章: 二.操作步骤三.快速上手测试(可做可不做) 一.Element UI介绍 Elemen ...
Muse UI — 基于 Vue2.0 的 Material Design UI 库
Vue 2.0 发布以来,很多 vue 的开源项目都开始了升级计划,我也思考着 vue-carbon 的升级之路,9月开工,11月完工, Muse UI 闪亮登场. 先睹为快 Muse UI 主要用于 ...
webpack+Vue2.0项目基础工程文件配置
随着Vue的流行,很多公司开始技术栈指向Vue,开始的时候用gulp+vue1.0做项目,一直到现在,webpack趋势也上来了,而且vue官网也是用webpack跟Vue结合去讲解实例,接下来大概说 ...

vue2.0项目引入element-ui

从新建vue项目到引入组件Element

一、新建项目

二、使用element-ui前需安装修改的配置：

三、引入Element，前面已经全局安装了element-ui，只需要在Vue项目中引入即可

四、然后在.vue文件里就直接可以用了

五、成功后的截图：

vue2.0项目引入element-ui相关推荐

最新文章

热门文章