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的Date方法实现代码(prototype)
Nov 20 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
JavaScript 匿名函数和闭包介绍
Apr 13 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
浅析JS运动
Dec 28 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
Vue插件从封装到发布的完整步骤记录
Feb 28 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
JS+CSS实现动态时钟
Feb 19 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 fsockopen解决办法 php实现多线程
2014/01/20 PHP
php基于mcrypt的加密解密实例
2014/10/27 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
php基于闭包实现函数的自调用(递归)实例分析
2016/11/11 PHP
引用 js在IE与FF之间的区别详细解析
2013/11/20 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
12306验证码破解思路分享
2015/03/25 Javascript
Javascript函数式编程语言
2015/10/11 Javascript
js实现选中页面文字将其分享到新浪微博
2015/11/05 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
python实现的文件同步服务器实例
2015/06/02 Python
Python的pycurl包用法简介
2015/11/13 Python
Apache如何部署django项目
2017/05/21 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Pycharm如何运行.py文件的方法步骤
2020/03/03 Python
django queryset相加和筛选教程
2020/05/18 Python
Python并发请求下限制QPS(每秒查询率)的实现代码
2020/06/05 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
请说出你所知道的线程同步的方法
2013/04/19 面试题
Lucene推荐的分页方式是什么?
2015/12/07 面试题
中层竞聘演讲稿
2014/01/09 职场文书
2014年教师节寄语
2014/04/03 职场文书
物业总经理助理岗位职责
2014/06/29 职场文书
公司租房协议书
2014/10/14 职场文书
2014年派出所工作总结
2014/11/21 职场文书
酒桌上的开场白
2015/06/01 职场文书
2016暑期师德培训心得体会
2016/01/09 职场文书
2019假期福利管理制度!
2019/07/15 职场文书