vue开发环境搭建win10
需要安装nodejs, webpack@2.2.1, babel-cli, vue-cli
1 安装nodejs

现在版本默认会安装nodejs 和 npm包 和 配置环境
2 检查是否安装成功,在命令行中输入

显示成功则正确
3 安装webpack@2.2.1 为什么要限制版本,是因为自己在安装最新版本时(3.8.1)出现各种问题,一直安装不上。
npm install -g webpack@2.2.
4 安装babel-cli, 编译工具将ES6代码转换成ES5代码
npm install -g babel-cli
5 安装vue-cli
npm install -g vue-cli
6 安装预设babel-preset-es2015
npm install babel-preset-es2015 --save-dev
6.1 配置文件.babelrc
在项目的根目录创建一个文件名为 .babelrc 的配置文件,该文件用来设置转码规则和插件,基本格式如下:
{
"presets": ["es2015"],
"plugins": []
}
6.2 babel 基本用法
# 转码结果输出到标准输出
$ babel example.js # 转码结果写入一个文件 (--out-file 或 -o 参数指定输出文件)
$ babel example.js --out-file compiled.js
或者
$ babel example.js -o compiled.js # 整个目录转码 (--out-dir 或 -d 参数指定输出目录)
$ babel src --out-dir lib
或者
$ babel src -d lib
6.3 安装新增API 转换包, babel-polyfill
npm install babel-polyfill --save-dev
7 如果想使用 webstorm 开发ES6文件,可以进行如下设置

将Arguments 中 --presets env 改成 --presets es2015。这样就会自动将ES6 转换成ES5 文件了。
8 添加对 VUE 的支持
vue开发环境搭建win10的更多相关文章
- 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建
node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...
- vue开发环境搭建及热更新
写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...
- express+mysql+vue开发环境搭建
最近开始做一个实验室资产管理系统,后台使用node.js的Express框架,前端使用vue,数据库使用mysql.在这里开始简单记录一下开发过程和遇到的问题. 今天要说的是express+mysql ...
- vue开发环境搭建Mac版
一.前言 要做一个移动端app,面对webapp最流行的三个技术React,angular,vue,三选一,如何选,可参考blog移动app技术选型,react,angular, vue, 下面是对 ...
- vue 开发系列(一) vue 开发环境搭建
概要 目前前端开发技术越来越像后台开发了,有一站式的解决方案. 1.JS包的依赖管理像MAVEN. 2.JS代码编译打包. 3.组件式的开发. vue 是一个前端的一站式的前端解决方案,从项目的初始化 ...
- 最全Vue开发环境搭建
前言 一直想去学Vue,不过一直找不到一个契机.然公司手机端用到了跨平台开发apicloud,里边涉及到Vue组件化开发,例如header和footer的封装,以及apicloud自定义的frame等 ...
- 一 vue开发环境搭建
2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运 ...
- 【VUE】Mac下vue 开发环境搭建,以及目录结构
1 安装Node.js 参看 node.js环境安装 http://www.cnblogs.com/richerdyoung/p/7265786.html 2 安装淘宝镜像 npm install ...
- vscode vue开发环境搭建
以前仅了解过VUE但没有真正上手过,现在因为工作需要准备再近几个月里系统的学习一下这款超火的前端框架,希望大佬们指教. ---------------------------------------- ...
随机推荐
- libFM 简介
原文:https://eachcloudcn.blob.core.chinacloudapi.cn/clips/XOI1W.htm libFM全称为Factorization Machine Libr ...
- [Algorithm] Serialize and Deserialize Binary Tree
Given the root to a binary tree, implement serialize(root), which serializes the tree into a string, ...
- Discuz常见小问题-如何使用QQ登陆
在首页中找到超链接 往下翻找到QQ互联,注意如果是内网无法开通(需要网站上传之后)
- Office EXCEL VBA如何取得EXCEL中的行数和列数
VBA取得EXCEL表格中的行数和列数 请注意不要使用Columus等关键字作为变量,例如"Columus = ActiveSheet.UsedRange.Columns.Count&quo ...
- Oracle 与 SqlServer 的区别浅析总结
我主要用过的数据库为Oracle10g和SqlServer2008,通过实际运用和查阅资料整理如下: 主题 Oracle 10g SQLServer 2008 存储过程格式 Create Or Rep ...
- 从零开始学JavaScript四(数据类型)
一.分类 基本数据类型:undefined.null.string.Boolean.number 复杂数据类型:object object的属性以无序的名称和值对的形式 (name : value) ...
- DevExpress.XtraLayout.LayoutControl 动态添加控件
// Create an item within a specified group,// bound to a specified data field with the specified edi ...
- PmExceptionController
package main.java.com.zte.controller.system; import java.util.ArrayList; import java.util.List; impo ...
- Vijos1935不可思议的清晨题解
- 题目来源 https://vijos.org/p/1935 描写叙述 今天,是2015年2月14日,星期六,情人节. 这真是一个不可思议的日子.今天早上.我打开窗户,太阳居然从西側升了起来. 我与 ...
- WiFi共享精灵与路由器
路由器是大家都知晓的.WiFi共享精灵如今也是非常多人在用的. 那么非常多人就有疑问了,都有路由器了,还要WiFi共享精灵干嘛? 我们来比較一下两者的差别. 首先两个都是能够实现共享上网的. 就是两个 ...