需要安装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的更多相关文章

  1. 【强烈推荐,超详细,实操零失误】node.js安装 + npm安装教程 + Vue开发环境搭建

    node.js安装 + npm安装教程 + Vue开发环境搭建 [强烈推荐,超详细,实操零失误] 原博客园地址:https://www.cnblogs.com/goldlong/p/8027997.h ...

  2. vue开发环境搭建及热更新

    写这篇博客的目的是让广大的学者在初入Vue项目的时候少走些弯路,虽然现在有很多博客也有差不多的内容,但是博主在里面添加了一些学习时碰到的小问题.在阅读这篇博客之前,我先给大家推荐一篇文章<入门W ...

  3. express+mysql+vue开发环境搭建

    最近开始做一个实验室资产管理系统,后台使用node.js的Express框架,前端使用vue,数据库使用mysql.在这里开始简单记录一下开发过程和遇到的问题. 今天要说的是express+mysql ...

  4. vue开发环境搭建Mac版

    一.前言 要做一个移动端app,面对webapp最流行的三个技术React,angular,vue,三选一,如何选,可参考blog移动app技术选型,react,angular, vue, 下面是对  ...

  5. vue 开发系列(一) vue 开发环境搭建

    概要 目前前端开发技术越来越像后台开发了,有一站式的解决方案. 1.JS包的依赖管理像MAVEN. 2.JS代码编译打包. 3.组件式的开发. vue 是一个前端的一站式的前端解决方案,从项目的初始化 ...

  6. 最全Vue开发环境搭建

    前言 一直想去学Vue,不过一直找不到一个契机.然公司手机端用到了跨平台开发apicloud,里边涉及到Vue组件化开发,例如header和footer的封装,以及apicloud自定义的frame等 ...

  7. 一 vue开发环境搭建

    2016年,Vue同Angular.React形成三足鼎立的局面,让前端的开发者顾不暇接,今天我们就来了解一下Vue的环境搭建. 一.node.js安装: node.js:一种javascript的运 ...

  8. 【VUE】Mac下vue 开发环境搭建,以及目录结构

    1 安装Node.js 参看 node.js环境安装   http://www.cnblogs.com/richerdyoung/p/7265786.html 2 安装淘宝镜像 npm install ...

  9. vscode vue开发环境搭建

    以前仅了解过VUE但没有真正上手过,现在因为工作需要准备再近几个月里系统的学习一下这款超火的前端框架,希望大佬们指教. ---------------------------------------- ...

随机推荐

  1. Android Studio 3.0 下载 使用新功能介绍

    谷歌2017发布会更新了挺多内容的,而且也发布了AndroidStudio3.0预览版,一些功能先睹为快.(英语一般,有些翻译不太好) 下载地址 https://developer.android.g ...

  2. [Algorithm] Meeting hour optimization (Kanpsack problem) and Dynamic programming

    For example we have array of meeting objects: const data = [ { name: }, { name: }, { name: }, { name ...

  3. 内有干货!2个人3个月怎样从零完毕一款社区App《林卡》

    嘿,大家好.我是不灭的小灯灯,我赌5毛你没听说过我的名字... 好啦.这篇不是鸡汤,是经验吐槽.干货分享! 所以乱七八糟的就不多说了.直接切入正题. 先说下自己的情况背景,眼下尚未毕业.非计算机专业, ...

  4. jQuery CircleCounter的环形倒计时效果

    在线演示1 本地下载 使用jQuery插件CircleCounter生成的环形倒计时效果,这个插件使用HTML5画布生成动画效果,还不错,大家可以试试! 顺带手录制了个代码,大家不吝赐教:http:/ ...

  5. C语言及程序设计[套餐]课程主页

    课程链接:http://edu.csdn.net/combo/detail/30,提供全部的视频和课件下载. 三部分的课程主页.提供了为每一课时配套的自測.演示样例下载,以及程序阅读.程序填空.实践项 ...

  6. EM算法求高斯混合模型參数预计——Python实现

    EM算法一般表述:       当有部分数据缺失或者无法观察到时,EM算法提供了一个高效的迭代程序用来计算这些数据的最大似然预计.在每一步迭代分为两个步骤:期望(Expectation)步骤和最大化( ...

  7. 解决ArcEngine开发程序“假死”现象

    在GIS数据处理中,数据量大是一个非常伤脑筋的问题.最近,在写一个CAD注记转Shapefile文件时,又遇到这个问题. 曾经处理一次数据,达130万个点,即测试区域内的栅格转成点全部处理,程序是写好 ...

  8. 几种流行Webservice框架性能对比(转载)

    1摘要 开发webservice应用程序中离不开框架的支持,当open-open网站列举的就有很多种,这对于开发者如何选择带来一定的疑惑.性能Webservice的关键要素,不同的框架性能上存在较大差 ...

  9. FIS3 构建 工程化

    1.安装 npm install -g fis3 //插件 npm install -g fis3-hook-relative npm install -g fis3-preprocessor-aut ...

  10. 对opencv MeanShift 融合矩形框的改进

    OPENCV 中的代码改进.当然要依据自己的实际情况来,OPENCV 中行人检測有两种矩形框的融合算法.这里仅仅对meanshift 方法做改进 假设有更好的方法.希望能够跟我讲下. 对于去除重合部分 ...