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可访问其它域名的cookie的方法
Sep 18 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
Oct 09 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
JavaScript常用脚本汇总(二)
Mar 04 Javascript
简介JavaScript中的push()方法的使用
Jun 09 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 Javascript
详解如何使用Node.js实现热重载页面
May 06 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 mysql 事务处理回滚操作(附实例)
2013/08/05 PHP
php日期操作技巧小结
2016/06/25 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
js中substring和substr的详细介绍与用法
2013/08/29 Javascript
javascript实现的DES加密示例
2013/10/30 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
JS使用onerror捕获异常示例
2016/08/03 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
angular4模块中给标签添加背景图的实现方法
2017/09/15 Javascript
python实现的简单猜数字游戏
2015/04/04 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
python根据url地址下载小文件的实例
2018/12/18 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
pandas使用之宽表变窄表的实现
2020/04/12 Python
Python celery原理及运行流程解析
2020/06/13 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
Python模块常用四种安装方式
2020/10/20 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
计算机求职信
2013/12/01 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
群众路线个人整改措施
2014/10/24 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
解决golang post文件时Content-Type出现的问题
2021/05/02 Golang
HTML中的表单元素介绍
2022/02/28 HTML / CSS
美国运营商 T-Mobile 以 117.83Mb/s 的速度排第一位
2022/04/21 数码科技
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS