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 相关文章推荐
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
Jun 14 Javascript
jquery 选择器部分整理
Oct 28 Javascript
主页面中的两个iframe实现鼠标拖动改变其大小
Apr 16 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
vue2.0结合Element-ui实战案例
Mar 06 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
如何在Node和浏览器控制台中打印彩色文字
Jan 09 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
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函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
CI框架出现mysql数据库连接资源无法释放的解决方法
2016/05/17 PHP
php实现每日签到功能
2018/11/29 PHP
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
JavaScript中获取鼠标位置相关属性总结
2014/10/11 Javascript
javascript解析json实例详解
2014/11/05 Javascript
Javascript数组操作函数总结
2015/02/05 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
2015/06/10 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
jQuery模仿阿里云购买服务器选择购买时间长度的代码
2016/04/29 Javascript
解决同一页面中两个iframe互相调用jquery,js函数的方法
2016/12/12 Javascript
作为老司机使用 React 总结的 11 个经验教训
2017/04/08 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
全面了解python字符串和字典
2016/07/07 Python
Python sep参数使用方法详解
2020/02/12 Python
Python telnet登陆功能实现代码
2020/04/16 Python
详解tensorflow之过拟合问题实战
2020/11/01 Python
大学生求职中的自我评价
2013/10/01 职场文书
小学教师师德反思
2014/02/03 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
公司聘任书模板
2014/03/29 职场文书
大学毕业寄语大全
2014/04/10 职场文书
公路绿化方案
2014/05/12 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
戒赌保证书
2015/05/11 职场文书
基石观后感
2015/06/12 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android