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基础第一章 JavaScript与用户端
Jul 22 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
js简单抽奖代码
Jan 16 Javascript
Javascript核心读书有感之语言核心
Feb 01 Javascript
常用jQuery代码分享
Jul 14 Javascript
javascript实现拖放效果
Dec 16 Javascript
ES6入门教程之Iterator与for...of循环详解
May 17 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 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面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
YII框架http缓存操作示例
2019/04/29 PHP
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
jQuery旋转插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
2013/01/16 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
Bootstrap源码解读导航(6)
2016/12/23 Javascript
nodejs基础知识
2017/02/03 NodeJs
AngularJS $http post 传递参数数据的方法
2018/10/09 Javascript
React 路由懒加载的几种实现方案
2018/10/23 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
微信小程序开发注意指南和优化实践(小结)
2019/06/21 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
详解Python的Flask框架中的signals信号机制
2016/06/13 Python
Python安装lz4-0.10.1遇到的坑
2018/05/20 Python
python opencv旋转图像(保持图像不被裁减)
2018/07/26 Python
python中多个装饰器的执行顺序详解
2018/10/08 Python
详解Python字符串切片
2019/05/20 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
python操作gitlab API过程解析
2019/12/27 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
电子商务专业学生的学习自我评价
2013/10/27 职场文书
应征英语教师求职信
2013/11/27 职场文书
成龙洗发水广告词
2014/03/14 职场文书
高中军训的心得体会
2014/09/01 职场文书
幼儿园辞职书
2015/02/26 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
立春观后感
2015/06/18 职场文书
Python带你从浅入深探究Tuple(基础篇)
2021/05/15 Python
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript