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 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
javascript中的作用域和上下文使用简要概述
Dec 05 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
详解axios在vue中的简单配置与使用
May 10 Javascript
React组件生命周期详解
Jul 03 Javascript
Angular2监听页面大小变化的解决方法
Oct 09 Javascript
JS中判断字符串存在和非空的方法
Sep 12 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 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
解析数组非数字键名引号的必要性
2013/08/09 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
jQuery $.each的用法说明
2010/03/22 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
jQuery点击头像上传并预览图片
2017/02/23 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
jquery单击文字或图片内容放大并居中显示
2017/06/23 jQuery
基于Vue过渡状态实例讲解
2017/09/14 Javascript
vue用addRoutes实现动态路由的示例
2017/09/15 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python操作excel文件并输出txt文件的实例
2018/07/10 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
Python OpenCV读取中文路径图像的方法
2020/07/02 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
环境科学专业个人求职的自我评价
2013/11/28 职场文书
区域销售经理岗位职责
2013/12/10 职场文书
绿色出行口号
2014/06/18 职场文书
本科应届生自荐信
2014/06/29 职场文书
2015年社区矫正工作总结
2015/04/21 职场文书
运动会主持词大全
2015/07/02 职场文书
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL