使用vue-cli构建的项目，在开发时，想要访问后台接口获取数据，这时就会出现跨域问题。

在config/index.js中进行如下配置

【即在进行ajax请求时，地址中任何以/api开头的请求地址都被解析为目标地址，target就是你想要的后台接口地址】

1
2
3
4
5
6
7
8
9

  proxyTable: {
  '/api': {
    target: 'http://www.leheavengame.com', 
    changeOrigin: true,
    pathRewrite: {
    '^/api': ''
    }
  }
}

子组件调用父组件：

1）在父组件设置对应的属性和方法；
2）将父组件的属性，方法设置在子组件的标签属性上；
3）子组件中利用this.props来调用父组件的成员；

example：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//父组件：
var parent=React.cleateClass({
   getDefaultProps:function(){
      alert("父组件方法")
   },
   render:function(){
      return <children a="233" getDefaultProps={this.getDefaultProps}></children>
   }
})
//子组件：
var children=react.createClass({
   render:fucntion(){
     return <div>
        <p>从父组件取得的值：{this.props.a}</p>
        <button onClick={this.props.getDefaultProps}>子组件按钮</button>
     </div>
   }
})

关于webpack:

webpack大而全，和静态资源相关的所有它都能干涉，当然，还能启动server；webpack主要以loaders和plugins处理各种静态资源；

loaders：

在React里会用到JSX、ES6、js，我统一将文件后缀使用.js，便于babel的配置：

npm install –save babel-loader

1
2
3
4
5
6
7
8

{
   test: /\.js?$/,
   exclude: /node_modules/,
   loader: 'babel',
   query: {
      presets: ['es2015', 'react']
   }
}

CSS、scss、iconfront字体文件：

npm install –save style-loader css-loader sass-loader url-loader file-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
   test:/\.css$/,
   loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},{
   test: /\.scss$/,
   loader: ExtractTextPlugin.extract("style-loader", "css!sass")
},{
   test: /\.(woff|woff2)/,
   loader: "url?limit=10000&minetype=application/font-woff&name=./[name].[ext]"
 },{
   test: /\.(ttf|eot|svg)/,
   loader: "file?name=./[name].[ext]"
},{
   test: /\.otf/,
   loader: "file?name=./[name].[ext]&minetype=application/font-otf"
}

背景

说到构建工具，我往往会在前面加「自动化」三个字，因为构建工具就是用来让我们不再做机械重复的事情，解放我们的双手的。

什么是前端自动化？前端工程师需要维护的代码极为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率。

致使每一个团队都希望有一种工具，能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多，并且国内很多大型团队也都有自己成熟的自动化部署工具。

常用的构建工具 gulp，webpack，parcel，rollup，vite ，fis，grunt等

经过多年的发展，Webpack 已经成为构建工具中的首选，这是因为：

• 大多数团队在开发新项目时会采用紧跟时代的技术，这些技术几乎都会采用“模块化+新语言+新框架”，Webpack可以为这些新项目提供一站式的解决方案；
• Webpack有良好的生态和维护团队，能提供良好的开发体验并保证质量；
• Webpack 被全世界大量的Web开发者使用和验证，能找到各个层面所需要的教程和经验分享。

webpack优化之路

1.别名alia

1
2
3
4
5

'react': (0, join)(__dirname, './node_modules/react/dist/react.min.js'),

resolve: {
    alias: alias,
},

2.css-loader < 0.15.0

1

"css-loader": "^0.14.1",

3.移除css-loader的sourcemap

这一步暂时没多大效果，继续下面的步骤

4.外部引入模块

1
2
3
4
5
6
7
8
9
10
11

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'reactUpdate': 'ReactUpdate',
    'antd': 'antd',
    "jquery": "jQuery",
    'AMap': 'window.AMap',
    'moment': 'moment',
    'react-dnd': 'ReactDnD',
    'react-router': 'ReactRouter'
},

关于模块化，最直接的表现就是我们写的 require 和 import 关键字，如果查阅相关资料，就一定会遇到 CommonJS 、CMD AMD 这些名词，以及 RequireJS、SeaJS 等陌生框架。比如 SeaJS 的官网 这样描述自己: “简单友好的模块定义规范，Sea.js 遵循 CMD 规范。自然直观的代码组织方式，依赖的自动加载……” 　

什么是ES6？

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScript 2.0。

ECMAScript和JavaScript到底是什么关系？很多初学者会感到困惑，简单来说，ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。

1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。

ES6的目标，是使得JavaScript语言可以用来编写大型的复杂的应用程序，成为企业级开发语言。