vue的安装及element组件的安装方法

一、新建vue项目

1、首先需要下载nodejs，安装后打开命令窗口可以使用npm包管理工具

npm集成在node中的，所以直接输入npm-v查看npm的版本信息

2、npm有些资源被屏蔽或者是国外资源的原因，经常会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像---cnpm。

3、在命令行中输入 npm install -g cnpm--registry=http://registry.npm.taobao.org然后等待安装完成，就可以使用cnpm安装依赖包了，这里说一下最好用npm安装，cnpm有时依赖下载不全，如果npm下载缓慢可以尝试cnpm安装依赖包。

4、安装vue-cli脚手架构建工具。在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。

5、用vue-cli构建项目。选定目录，存放新建的项目

6、在桌面目录下，在命令行中运行命令 vue init webpack firstVue 。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称。

7、运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。

8、打开firstVue文件夹，项目文件如下所示。

9、安装依赖包（记住一定要在新建的项目文件夹目录下），通过npm install命令

10、安装好依赖后，运行项目，通过npm run dev实现，一般默认是8080端口，打开浏览器输入localhost:8080

11、8080端口如果被占用了，需要修改一下配置文件config/index.js

更改端口后显示这样：

二、下面引入Element

1、在当前目录下，运行:npm i element-ui -S

2、在src/main.js中添加代码（红色的）

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'	//手动变红
import '../node_modules/element-ui/lib/theme-chalk/index.css'	//手动变红
//具体路径有的不同，vue运行报错请看第五点
Vue.config.productionTip = false
/* eslint-disable no-new */
Vue.use(ElementUI)	//手动变红
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

3、然后在.vue文件里就直接可以用了，如：在src/components/Hello.vue做一下修改

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <h2>Essential Links</h2>
 <el-button>默认按钮</el-button>
 <el-button type="primary">主要按钮</el-button>
 <el-button type="text">文字按钮</el-button>
 </div>
</template> 

<script>
export default {
 name: 'hello',
 data () {
 return {
 msg: 'Welcome to Your Vue.js App'
 }
 }
}
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
} 

ul {
 list-style-type: none;
 padding: 0;
} 

li {
 display: inline-block;
 margin: 0 10px;
} 

a {
 color: #42b983;
}
</style>

4、再次运行

5、上述（3）有时会报错，一是查看element-ui的index.css路径是否正确，第二因为报错会显示找不到文件，需要在build/webpack.base.conf.js文件中添加一段代码，如下。

6、现在运行起来了

以上这篇vue的安装及element组件的安装方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue使用Element组件时v-for循环里的表单项验证方法

    标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中遇到过此问题的同学,一看就明白我说的意思了. 首先Element组件有一套完善的表单验证方法,官方文档写的也很清楚:Element表单验证API,正常按照官方文档添加rules规则,需要验证的表单项设置prop,然后提交表单时通过form的validate方法验证表单项就可以了. 然鹅问题来了,如果表单项里有通过v-for动态生成的表单项,如何设置验证呢?这个官方文档并没有明确的说法

  • 详解从新建vue项目到引入组件Element的方法

    详解从新建vue项目到引入组件Element的方法

    本文介绍了从新建vue项目到引入组件Element以及Error when rendering component报错解决,分享给大家 一.新建项目 1.打开cmd,运行:vue init webpack Vue-Demo 2.运行:cd Vue-Demo进入这一级 3.运行:npm install 4.运行:npm run dev 如果浏览器打开之后,没有加载出页面,说明本地的8080 端口被占用,需要修改一下配置文件 config/index.js 解释:1.将 build 的路径前缀修改为

  • Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能

    2017年底了,总结了这一年多来的前端之路,Vue从入门到放弃,再二进宫,从 Vue1.0 持续跟踪到 Vue2.5.结合公司的一些实际项目,也封装了一些比较实用的组件. 由于现在公司管理平台主要运用Element UI,索性就结合组件Table 和 Pagination 封装了一个支持页面切换的Table组件,不啰嗦,直接上代码. 2.实现思路 2.1.Element UI 引入(整体引入) main.js // Element UI import Element from 'element-

  • vue 基于element-ui 分页组件封装的实例代码

    具体代码如下所示: <template> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, j

  • 详解如何在vue项目中引入elementUI组件

    详解如何在vue项目中引入elementUI组件

    前提:已经安装好Vue 初始化vue vue init webpack itemname 运行初始化demo 运行一下初始后的demo,如果没有问题则进行安装elementUI npm run dev 安装 elementUI npm i element-ui -S 引入elementUI 在main.js中引入elementUI import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vu

  • vue中element组件样式修改无效的解决方法

    如下所示: <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写style注意不加scoped,然后用一个组件最外层的class包裹住,就不会改到所有的组件的样式了. 以上这篇vue中element组件样式修改无效的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue 组件间的样式冲突污染 浅谈vue中改elementUI默认样式引发的st

  • vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能

    前端工作中,经常需要图片裁剪的场景,cropper.js是一款优秀的前端插件,api十分丰富. 本文是在vue-cli项目下封装图片裁剪插件,效果图如下: 话不多说,看步骤吧. 第一步:准备开发环境 cropper.js是基于jquery的,所以要先安装jquery 执行命令: npm  install --save-dev jquery cropper 为webpack配置添加jquery的映射 修改webpack.base.conf.js配置,添加标红的一行 第二步:新建图片裁剪组件 ind

  • 在vue项目中使用element-ui的Upload上传组件的示例

    本文介绍了vue项目中使用element-ui的Upload上传组件的示例,分享给大家,具体如下: <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadData" name="importfile" :onError="uploadError" :onSuccess="uploadSuccess&quo

  • VUE element-ui 写个复用Table组件的示例代码

    饿了么的table组件功能很强大,对于项目中的各种表格基本够用,但是--个人对于它以列为单位的操作不习惯 =.=所以改成了另一种方式(我不会告诉你其实本质没变). 项目中表格较多,所以复用性最重要 步骤一 先来个基本的表格展示 官例的tableData tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' }, { date: '2016-05-04', name: '王小虎', address:

  • vue的安装及element组件的安装方法

    一.新建vue项目 1.首先需要下载nodejs,安装后打开命令窗口可以使用npm包管理工具 npm集成在node中的,所以直接输入npm-v查看npm的版本信息 2.npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内镜像---cnpm. 3.在命令行中输入 npm install -g cnpm--registry=http://registry.npm.taobao.org然后等待安装完成,就可以使用cnpm安装依赖包了,这里说一下最好

  • Vue引入并使用Element组件库的两种方式小结

    目录 前言 Element-ui(饿了么ui) 安装element-ui 引入element-ui 完整引入element-u 按需引入element-ui 总结 前言 在开发的时候,虽然我们可以自己写css或者js甚至一些动画特效,但是也有很多开源的组件库帮我们写好了.我们只需要下载并引入即可. vue和element-ui在开发中是比较般配的,也是我们开发中用的很多的,下面就介绍下如何在eue项目中引入element-ui组件库 Element-ui(饿了么ui) element-ui(饿了

  • vue.js管理后台table组件封装的方法

    目录 问题分析 为什么封装 封装的内容都有哪些 封装table组件 确认数据格式 封装组件 封装全局组件 table组件封装 分页组件封装 数据定义 封装 总结 最近开了新的项目,简单说了自己的table封装. 问题分析 为什么封装 首先为什么封装,是因为追求技术吗,不,是因为懒,不想一直的去粘贴复制代码,所以就想把table封装下,可以在创建新的table的时候,只需要填充数据就行了. 封装的内容都有哪些 主要有两个,一个是table组件,一个是分页组件 搞清楚这个些,就可以开始封装组件了.

  • vue之ele多级联组件的使用方法详解

    vue之ele多级联组件的使用方法详解

    本文实例为大家分享了vue之ele多级联组件的使用具体代码,供大家参考,具体内容如下 多级联组件的使用 html <el-cascader         ref="cascader"         :options="options"         @focus="cascaderFocus"         @change="cascaderChange"         v-model="cascad

  • vue左右滑动选择日期组件封装的方法

    vue左右滑动选择日期组件封装的方法

    现在做的项目中遇到了左右滑动选择日期的一个功能,然后我封装了一下这个组件,现在分享给大家看一下: 效果图: 1.安装dayjs日期文件 npm install dayjs --save 2.封装的组件: <template>   <div class="m-calendar" ref="calendar">     <div class="m-toolbar">       <div class=&quo

  • Vue中的transition封装组件的实现方法

    vue版本信息:2.5.2 问题起源于使用Vue做网站时涉及到的一个小部件显示动画,阅读了Vue的文档后结合网上各位的经验,花了点时间研究了下. 最终的效果如上图所示,当鼠标移入灰色方块时弹出层会至上而下显示出来,类似于 拉链式窗帘(?). 实例 实现上图所示的效果代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta

  • vue多级多选菜单组件开发

    vue多级多选菜单组件开发

    本文实例为大家分享了vue多级多选菜单组件的制作方法,供大家参考,具体内容如下 要开发一个这样的多级多选菜单组件,功能是: 点击父标题栏可以打开与折叠子列表 点击父标题栏的勾选图标可以全选或取消子列表 点击子列表的勾选图标达到全选时,父标题栏的勾选图标自动勾选:反之,没达到全选时,父标题栏的勾选图标自动取消勾选 当所有父标题栏的勾选图标达到全选时,最底下那个全选框自动勾选:反之,没达到全选时,最底下那个全选框自动取消勾选 点击最底下那个全选框可以全选或取消全部的勾选图标 所以总结起来我们重点要利

  • vue更多筛选项小组件使用详解

    vue更多筛选项小组件使用详解

    本文实例为大家分享了vue更多筛选项小组件的实现方法,供大家参考,具体内容如下 效果: 就是一个简单的小效果,当有很多筛选条件时,默认只展示几项,不会觉得很冗余,有需要可以点击展开,进行更过的条件筛选.并且能够自动判断界面的尺寸,决定是否需要更多筛选项.直接把"查询.重置"内置到组件里面了,便于组件样式的实现,还可以进行插槽. 正常大屏 分辨率变小 可见出现了更多筛选的按钮,可以点击下拉 插槽 代码: <template> <div :class="['co

  • vue视频时间进度条组件使用方法详解

    vue视频时间进度条组件使用方法详解

    本文实例为大家分享了vue视频时间进度条组件的使用方法,供大家参考,具体内容如下 有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件 实现思路: 1.24h的时间刻度线总宽度为12960px2.点击24h线的某一点,获取这一点离左侧原点的距离(使用dom元素layerX和offsetLeft综合判断)3.计算点击时线段的占比比率4.每天的时间是86400000毫秒5.占比比率乘以86400000就是获取的你点击的时间 代码如下: <template>   <d

  • vue中ant-design-vue组件的安装与使用

    vue中ant-design-vue组件的安装与使用

    目录 1. 安装 2. 引入组件库 3. 使用 3.1 按钮样式 3.2 导航栏样式 3.3 表单样式 补充:ant-design-vue的兼容问题 总结 官方地址:Ant Design Vue 1. 安装 首先使用vue-cli创建项目,然后进入项目,使用npm安装ant-design-vue库: npm i --save ant-design-vue@next 然后在package.json文件中的dependencies中看见刚刚下载的库: 2. 引入组件库 然后在main.js中引入,注

随机推荐