VUE+Element环境搭建与安装的方法步骤


Posted in Javascript onJanuary 24, 2019

1,安装node,确保安装4.0版本以上,具体的安装可以百度。

2,在命令行创建文件夹

VUE+Element环境搭建与安装的方法步骤

3,安装Vue-cli

输入:cnpm install -g vue-cli , 回车, 等待安装。。。。

输入:vue ,查看vue相关信息

4,初始化项目

vue init webpack last_demo 然后等一下就会出现相关的信息,再自己去选择安装的一些设置

VUE+Element环境搭建与安装的方法步骤

安装完的时候,你的文件夹就变成了这样了:

VUE+Element环境搭建与安装的方法步骤

如果你的文件夹中没有node_modules的文件,那么你就要在命令行中打开你的项目并输入:

npm install

5,运行VUE环境,输入npm run dev ,然后使用浏览器打开:http://localhost:8080

一、搭建环境

由于新的node已经集成了npm,所以直接安装node,前往node官网下载最新版本的node,根据自己的操作系统选择相应的包,按照步骤一步步走就可以,这里不做过多介绍。

安装好后可以打开命令行用 npm-v node-v 查看是否安装成功以及版本号

如果以前已经安装过node 和 npm 最好升级到最新版本,命令行 npm install npm@x.xx.x

首先全局安装vue-cli,打开CMD命令行,npm install -g vue-cli

接下来新建项目,运行 vue init webpack demo 这里的demo是你项目的名字,接下来会有一些初始化的设置,其中vue-router是路由,反正我都会选择安装,其他的可以回车跳过或者选择no

VUE+Element环境搭建与安装的方法步骤

—按照提示,cd到新建的项目下,运行npm install

—运行npm run dev

到这里,不出意外的话可以在浏览器里面看到Vue的初始化模板了,如果没有可能是端口号被占用,这里就将配置文件config/index.js里面的端口号改掉就可以了

另外还要补充一下,最后的打包如果在本地起服务器运行打包后的文件是无法运行的,会报错404,所以这里将assetsPublicPath里面的 “/”改成”./”

VUE+Element环境搭建与安装的方法步骤

二、安装Element

到这里我们就可以愉快的玩耍Vue了,但是我们之前说的是 Vue + Element 所以接下来我们要继续安装ElementUI

cd到当前项目 运行 npm i element-ui -S

VUE+Element环境搭建与安装的方法步骤

到这里我们已经安装好了element,接下来就是在项目里面引用了,打开src目录下的main.js

VUE+Element环境搭建与安装的方法步骤

三、打包

在项目目录下运行 npm run build 运行完成之后会在项目里面增加一个dist的目录,直接把这个目录丢给服务器就好了,dist目录的名字可以自定义在配置文件里面

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery Easyui Tree的oncheck事件实现代码
May 28 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
基于JavaScript实现轮播图原理及示例
Apr 10 Javascript
vue.js实现条件渲染的实例代码
Jun 22 Javascript
基于 Vue 的树形选择组件的示例代码
Aug 18 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
JS简单获得节点元素的方法示例
Feb 10 Javascript
JS实现带阴历的日历功能详解
Jan 24 #Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 #Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变rgba的a值实现)
Jan 24 #Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 #Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 #Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
Jan 24 #Javascript
记一次vue去除#问题处理经过小结
Jan 24 #Javascript
You might like
PHP命令行脚本接收传入参数的三种方式
2014/08/20 PHP
php单文件版在线代码编辑器
2015/03/12 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
PHP Primary script unknown 解决方法总结
2019/08/22 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
Jquery中对数组的操作代码
2011/08/12 Javascript
鼠标移动到图片名上,显示图片的简单实例
2013/07/14 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
JavaScript实现模仿桌面窗口的方法
2015/07/18 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
jQuery使用$.ajax提交表单完整实例
2015/12/11 Javascript
浅析创建javascript对象的方法
2016/05/13 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
使用SVG基本操作API的实例讲解
2017/09/14 Javascript
Vue仿今日头条实例详解
2018/02/06 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
使用post方法实现json往返传输数据的方法
2019/03/30 Javascript
iview的table组件自带的过滤器实现
2019/07/12 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
vue中封装axios并实现api接口的统一管理
2020/12/25 Vue.js
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
100行Python代码实现自动抢火车票(附源码)
2018/01/11 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
关于numpy数组轴的使用详解
2019/12/05 Python
python TCP包注入方式
2020/05/05 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
python通用数据库操作工具 pydbclib的使用简介
2020/12/21 Python
商业房地产广告语
2014/03/13 职场文书
乡镇纠风工作实施方案
2014/03/22 职场文书
土木工程毕业答辩开场白
2015/05/29 职场文书
python如何读取.mtx文件
2021/04/22 Python
python实现股票历史数据可视化分析案例
2021/06/10 Python