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 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
JS可以控制样式的名称写法一览
Jan 16 Javascript
JS二维数组的定义说明
Mar 03 Javascript
JS操作CSS随机改变网页背景实现思路
Mar 10 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
js实现日期显示的一些操作(实例讲解)
Jul 27 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
vue自定义指令用法经典实例小结
Mar 16 Javascript
JS实现放大镜效果
Sep 21 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实现简单洗牌算法
2013/06/18 PHP
php获取apk包信息的方法
2014/08/15 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
php解决安全问题的方法实例
2019/09/19 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
基于javascript实现彩票随机数生成(升级版)
2020/04/17 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
vue中eslintrc.js配置最详细介绍
2018/12/21 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
js实现简单音乐播放器
2020/06/30 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
python转换摩斯密码示例
2014/02/16 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Tensorflow 训练自己的数据集将数据直接导入到内存
2018/06/19 Python
python自动化unittest yaml使用过程解析
2020/02/03 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
我们是伦敦女孩:WalG
2018/01/08 全球购物
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
几个Shell Script面试题
2012/08/31 面试题
2014厂务公开实施方案
2014/02/17 职场文书
出纳试用期自我鉴定范文
2014/09/16 职场文书
兴趣班停课通知
2015/04/24 职场文书
餐厅营销的秘密:为什么老顾客会流水?
2019/08/08 职场文书
Django操作cookie的实现
2021/05/26 Python