Vue基础技术|配置vue的jsx写法以及postcss

1. 安装依赖包

➜  vue-demo npm install [email protected] [email protected] [email protected] [email protected]
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> [email protected] postinstall /Users/a1/Documents/workspace/vue-demo/node_modules/core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

npm WARN [email protected] No repository field.

+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
added 37 packages from 162 contributors, removed 6 packages, updated 1 package, moved 1 package and audited 5913 packages in 5.757s
found 5 vulnerabilities (2 low, 1 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details
➜  vue-demo

2. 新建babel配置文件.babelrc，这里使用babel我们主要是用来使用vue的render方法以及vue也可以写jsx的代码，然后我们尝试一下如何去配置吧！

2.1 配置.babelrc文件

2.2 安装所需依赖包

➜  vue-demo npm install [email protected] [email protected]
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN [email protected] requires a peer of babel-helper-vue-jsx-merge-props@^2.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of babel-plugin-syntax-jsx@^6.8.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] No repository field.

+ [email protected]
+ [email protected]
added 46 packages from 5 contributors and audited 7682 packages in 6.709s
found 5 vulnerabilities (2 low, 1 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details
➜  vue-demo

2.3 安装依赖包所需依赖包

➜  vue-demo npm install babel-helper-vue-jsx-merge-props@^2.0.0 babel-plugin-syntax-jsx@^6.8.0
npm WARN [email protected] No repository field.

+ [email protected]
+ [email protected]
added 2 packages from 1 contributor and audited 7684 packages in 4.771s
found 5 vulnerabilities (2 low, 1 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details
➜  vue-demo

2.4 修改webpack.config.js配置，支持处理.jsx文件

3. 新建postcss配置文件postcss.config.js，postcss是帮助我们后处理我们的css的，就是我们的样式文件已经从stylus编译为了css文件之后，我们再通过postcss去优化我们的css代码，这个优化的过程就是通过一系列的组件去优化的，这里用到的就是autoprefixer，这个组件是帮助我们去处理那些需要添加浏览器前缀的css属性的，比如说-webkit-、-moz-等这种类型的，因为这些浏览器不是正式支持的，需要添加不同的浏览器前缀去支持的，那么我们在编写代码的时候并不希望一个个去声明，所以我们借助autoprefixer组件来帮助我们去自动处理这些css属性加前缀的处理。

调整webpack.config.js配置文件，支持postcss后处理，那么postcss-loader的配置参数sourceMap: true是用来干嘛的呢？因为我们使用stylus-loader它会自动给我们生成sourceMap，而postcss它自己也可以生成sourceMap，但是当前面的处理器帮助我们生成了sourceMap之后，postcss-loader其实是可以直接使用前面的loader生成好的sourceMap，而不需要再自己重新生成一份，这样有利于提高编译效率，使得编译速度更快，否则postcss也会给出相应的警告提醒，告诉我们应该这样来处理，这些都是官方提供的既定的用法，在官网上都会有说明，在这里就不赘述了。

4. 再次执行运行服务指令，没有报错提示信息，证明我们上面的的配置是ok的了！！！

➜  vue-demo npm run dev

> [email protected] dev /Users/a1/Documents/workspace/vue-demo
> cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js

Project is running at http://0.0.0.0:9999/
webpack output is served from /
No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
Hash: 30deb6aa472603302a0d
Version: webpack 3.10.0
Time: 2860ms
            Asset       Size  Chunks                    Chunk Names
beijing-image.jpg     902 kB          [emitted]  [big]
        bundle.js    1.62 MB       0  [emitted]  [big]  main
       index.html  182 bytes          [emitted]
   [1] (webpack)/hot/log.js 1.04 kB {0} [built]
   [7] (webpack)/hot/emitter.js 77 bytes {0} [built]
  [12] multi (webpack)-dev-server/client?http://0.0.0.0:9999 webpack/hot/dev-server ./src/index.js 52 bytes {0} [built]
  [13] (webpack)-dev-server/client?http://0.0.0.0:9999 7.95 kB {0} [built]
  [14] ./node_modules/url/url.js 23.3 kB {0} [built]
  [21] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [23] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
  [24] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
  [26] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [33] (webpack)/hot/dev-server.js 1.61 kB {0} [built]
  [35] ./src/index.js 280 bytes {0} [built]
  [39] ./src/app.vue 1.85 kB {0} [built]
  [45] ./src/assets/css/index.css 1.03 kB {0} [built]
  [48] ./src/assets/css/index.styl 1.35 kB {0} [built]
  [49] ./src/assets/images/beijing.jpg 63 bytes {0} [built]
    + 35 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs 538 bytes {0} [built]
       [1] ./node_modules/lodash/lodash.js 541 kB {0} [built]
       [2] (webpack)/buildin/global.js 509 bytes {0} [built]
       [3] (webpack)/buildin/module.js 517 bytes {0} [built]
webpack: Compiled successfully.