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 相关文章推荐
js实现简单选项卡与自动切换效果的方法
Apr 10 Javascript
javascript清空table表格的方法
May 14 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
Javascript中数组去重与拍平的方法示例
Feb 03 Javascript
jQuery插件zTree实现删除树子节点的方法示例
Mar 08 Javascript
Angular 4.0学习教程之架构详解
Sep 12 Javascript
基于ionic实现下拉刷新功能
May 10 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
ES6中let、const的区别及变量的解构赋值操作方法实例分析
Oct 15 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
PHP实现网站访问量计数器
2017/10/27 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
redis+php实现微博(三)微博列表功能详解
2019/09/23 PHP
laravel 解决后端无法获取到前端Post过来的值问题
2019/10/22 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
2009/11/28 Javascript
JS往数组中添加项性能分析
2015/02/25 Javascript
前端把html表格生成为excel表格的实例
2017/09/19 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
python嵌套函数使用外部函数变量的方法(Python2和Python3)
2016/01/31 Python
机器学习python实战之决策树
2017/11/01 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
遗传算法python版
2018/03/19 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
24式加速你的Python(小结)
2019/06/13 Python
深入了解Python在HDA中的应用
2019/09/05 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
what is the difference between ext2 and ext3
2015/08/25 面试题
大学生就业推荐信范文
2013/11/29 职场文书
化工实习心得体会
2014/09/09 职场文书
2015年重阳节慰问信
2015/03/23 职场文书
企业百日安全活动总结
2015/05/07 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
python编写五子棋游戏
2021/05/25 Python
Nginx location 和 proxy_pass路径配置问题小结
2021/09/04 Servers
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers