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 判断元素上是否绑定了事件
Oct 28 Javascript
JS嵌套函数调用上下文的问题解决
Mar 26 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
JavaScript移除数组内重复元素的方法
Mar 18 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
Node.js+Express配置入门教程
May 19 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
讲解vue-router之什么是编程式路由
May 28 Javascript
Vue中div contenteditable 的光标定位方法
Aug 25 Javascript
Javascript实现秒表倒计时功能
Nov 17 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 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
mac下安装nginx和php
2013/11/04 PHP
php Session存储到Redis的方法
2013/11/04 PHP
ThinkPHP自动转义存储富文本编辑器内容导致读取出错的解决方法
2014/08/08 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php的扩展写法总结
2019/05/14 PHP
javascript this用法小结
2008/12/19 Javascript
jQuery Selector选择器小结
2010/05/06 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
简单谈谈Javascript函数中的arguments
2017/02/09 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
JS拖拽排序插件Sortable.js用法实例分析
2019/02/20 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
原生js无缝轮播插件使用详解
2020/03/09 Javascript
Python对列表排序的方法实例分析
2015/05/16 Python
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Python连接DB2数据库
2016/08/27 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
python下setuptools的安装详解及No module named setuptools的解决方法
2017/07/06 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
pycharm显示远程图片的实现
2019/11/04 Python
python关闭占用端口方式
2019/12/17 Python
Python学习之路之pycharm的第一个项目搭建过程
2020/06/18 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
副总经理工作职责
2013/11/28 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
中班开学寄语
2014/04/04 职场文书
初中班主任评语
2014/04/24 职场文书
公路绿化方案
2014/05/12 职场文书
2015小学教师德育工作总结
2015/05/12 职场文书
仙境之桥观后感
2015/06/16 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
如何撰写促销方案?
2019/07/05 职场文书
Pytest实现setup和teardown的详细使用详解
2021/04/17 Python