• 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.1

    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 的支持

  • 相关阅读:
    PS软件之,快速的修改图片你的尺寸
    想的太多,做的太少
    Java-Junit 的Hello world
    Java-hibernate的映射文件
    工作思路
    Spring入门Hello World
    PHP 进制问题
    Java-hibernate的Hello World
    PHP获得header头进行分析
    动软模板使用教程
  • 原文地址:https://www.cnblogs.com/zhaopengcheng/p/7875453.html
Copyright © 2020-2023  润新知