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 Jquery 遍历Json的实现代码
Mar 31 Javascript
基于jquery的无刷新分页技术
Jun 11 Javascript
浅谈javascript中的作用域
Apr 07 Javascript
Node.js中对通用模块的封装方法
Jun 06 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
Jul 13 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
js中url对象化管理分析
Dec 29 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
微信小程序自定义联系人弹窗
May 26 Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 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中实现汉字转区位码应用源码实例解析
2010/06/14 PHP
php短域名转换为实际域名函数
2011/01/17 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
php取出数组单个值的方法
2018/03/12 PHP
js中判断对象是否为空的三种实现方法
2013/12/23 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
js脚本分页代码分享(7种样式)
2015/08/19 Javascript
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
js实现登录框鼠标拖拽效果
2017/03/09 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
vue使用代理解决请求跨域问题详解
2019/07/24 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
[01:08:48]LGD vs OG 2018国际邀请赛淘汰赛BO3 第三场 8.25
2018/08/29 DOTA
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python内置函数reversed()用法分析
2018/03/20 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
keras中的History对象用法
2020/06/19 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
25岁生日感言
2014/01/13 职场文书
开业庆典策划方案
2014/02/18 职场文书
政府门卫岗位职责
2014/04/29 职场文书
酒店管理毕业生自荐信
2014/05/25 职场文书
生物学专业求职信
2014/07/23 职场文书
2014教师年度思想工作总结
2014/11/10 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
小程序wx.getUserProfile接口的具体使用
2021/06/02 Javascript
virtualenv隔离Python环境的问题解析
2022/06/21 Python