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


Posted in Javascript onMarch 09, 2018

一、新建vue项目

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

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

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

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

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构建项目。选定目录,存放新建的项目

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

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

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

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

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

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

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

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

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

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

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

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

更改端口后显示这样:

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

二、下面引入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、再次运行

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

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

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

6、现在运行起来了

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

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

Javascript 相关文章推荐
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
May 11 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
微信小程序(三):网络请求
Jan 13 Javascript
js获取浏览器和屏幕的各种宽度高度
Feb 22 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
Bootstrap fileinput文件上传预览插件使用详解
May 16 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
JS组件库AlloyTouch实现图片轮播过程解析
May 29 Javascript
11行JS代码制作二维码生成功能
Mar 09 #Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 #Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 #Javascript
vue注册组件的几种方式总结
Mar 08 #Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 #Javascript
layui之select的option叠加问题的解决方法
Mar 08 #Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 #Javascript
You might like
Apache设置虚拟WEB
2006/10/09 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
Zend Framework分页类用法详解
2016/03/22 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
jQuery 学习 几种常用方法
2009/06/11 Javascript
整理8个很棒的 jQuery 倒计时插件和教程
2011/12/12 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
详解微信小程序的 request 封装示例
2018/08/21 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
基于Pandas读取csv文件Error的总结
2018/06/15 Python
python设置值及NaN值处理方法
2018/07/03 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
建筑工程技术应届生求职信
2013/11/17 职场文书
法制教育演讲稿
2014/09/10 职场文书
教师国庆节演讲稿范文2014
2014/09/21 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
受资助学生感谢信
2015/01/21 职场文书
现役军人家属慰问信
2015/03/24 职场文书
长江七号观后感
2015/06/11 职场文书
格林童话读书笔记
2015/06/30 职场文书
2016党校培训心得体会
2016/01/07 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server