babel转码

Babel是一个广泛使用的转码器,可以将ES6等代码转为ES5代码,从而在现有环境执行。
如以下代码:

    // 转码前
    input.map(item => item + 1);
     // 转码后
    input.map(function (item) {
     return item + 1;
});

转码步骤:
1. Babel提供babel-cli工具,用于命令行转码。
npm install babel-cli -g -D (g:全局,-D项目环境中)
2. Babel的配置文件是.babelrc,存放在项目的根目录下。
使用Babel的第一步,就是配置这个文件。基本格式如下

       {
         "presets": ["env"],
         "plugins": []
       }
   

presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装(一般安装env 按照语法自动转码)
3. 安装转码规则: npm install –save-dev babel-preset-env
4. 返回转码结果 : babel test.js
5. 转码结果到新的文件: babel test.js –out-file newtest.js
6. 转码整个目录到新的目录: babel src –out-dir lib
7. 转码并执行 babel-node test.js


vue中webpack-simple使用bootstrap

1. bootstrap依赖jquery 先加载jquery模块
2. 下载:npm install bootstrap
3. 加载css模块: npm install css-loader style-loader -D
4. 在配置文件(webpack.config.js)中的rules中添加

     { test: /\.css$/, loader: 'style-loader!css-loader' },
   

5. 安装加载器: npm install url-loader –save-dev
6. 在组件中使用bootstrap:

     import '../dist/bootstrap.css';
     import '../dist/bootstrap.js';
    

7. 在配置文件rules中添加

     {
        test: /.woff|.woff2|.svg|.eot|.ttf/,
        use: 'url-loader?prefix=font/&limit=10000'
      }
   

8. 开启服务测试: npm run dev


vue中webpack-simple中使用jquery的方法

1. vue inin webpack-simple 初始化脚手架
2. npm install 安装相关模块
3. npm install jquery –save-dev (–save-dev简写为-D)
使用方法一:
在首页使用标签直接导入jquery.js
使用方法二:
在组件(app.vue)中使用import $ from ‘jquery’;
使用方法三:
在webpack.config.js配置文件中
Module.export中顶层添加配置

    plugins: [  
    new webpack.ProvidePlugin({  
      $:"jquery",  
      jQuery:"jquery",  
      "windows.jQuery":"jquery"  
    })  
  ]


vue中的ajax请求

1. vue中使用ajax请求 使用插件axios.
2. 地址:https://github.com/mzabriskie/axios
3. 如果使用webpack打包 安装方式请使用 npm install axios –sava-dev
4. 在使用时需要将模块导入 import axios from ‘axios’
5. 参考文档发起ajax请求。获取数据注意this指向。

 getDataFromaxios(){
        var that = this;
        axios.get('../data.txt')
          .then(function (response) {
            console.log(response.data);
            that.info = response.data
          },
            function(err){
              console.log(err);
            }
          )
          .catch(function (error) {
            console.log(error);
          });
      }


ˆ Back To Top