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 相关文章推荐
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
Bootstrap进度条组件知识详解
May 01 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
layui问题之模拟select点击事件的实例讲解
Aug 15 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
jQuery模拟html下拉多选框的原生实现方法示例
May 30 jQuery
小程序如何在不同设备上自适应生成海报的实现方法
Aug 20 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
微信小程序自定义导航栏(模板化)
Nov 15 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
用Socket发送电子邮件
2006/10/09 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
php获取数据库中数据的实现方法
2017/06/01 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
学习YUI.Ext 第二天
2007/03/10 Javascript
关于B/S判断浏览器断开的问题讨论
2008/10/29 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
node.js 用socket实现聊天的示例代码
2017/10/17 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
Java 生成随机字符的示例代码
2021/01/13 Javascript
Python字符和字符值(ASCII或Unicode码值)转换方法
2015/05/21 Python
Python基于pygame实现的弹力球效果(附源码)
2015/11/11 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
python Django的web开发实例(入门)
2019/07/31 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
意大利中国电子产品购物网站:Geekmall.com
2019/09/30 全球购物
介绍一下Java的安全机制
2012/06/28 面试题
如果一个类实现了多个接口但是这些接口有相同的方法名将会怎样
2013/06/16 面试题
2013届毕业生求职信范文
2013/11/20 职场文书
行政部岗位职责范本
2014/03/13 职场文书
实习指导老师评语
2014/04/26 职场文书
2014审计局领导班子民主生活会对照检查材料思想汇报
2014/09/20 职场文书
管理失职检讨书范文
2015/05/05 职场文书
电话营销开场白
2015/05/29 职场文书
go结构体嵌套的切片数组操作
2021/04/28 Golang
基于Python绘制子图及子图刻度的变换等的问题
2021/05/23 Python