vue-demo

介绍

vue入门到精通

软件架构

软件架构说明

安装教程

npm init
npm install webpack vue vue-loader css-loader style-loader url-loader vue-template-compiler stylus stylus-loader file-loader webpack-dev-server cross-env html-webpack-plugin

npm install postcss-loader autoprefixer babel-loader babel-core babel-preset-env babel-plugin-transform-vue-jsx babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx
npm install  mini-css-extract-plugin

配置VUE的jsx写法以及postcss

npm i post-css-loader autoprefixer babel-loader babel-loader 

有些依赖需要自己装

根目录下新建 .babelrc 和 postcss.config.js

关于 Babel Plugin 和 Babel Preset

Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。

这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6的箭头函数特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加载ES6全家桶。

但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有ES6的代码转成ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。

这个时候，可以采用Babel Preset。

可以简单的把Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6转换有关的插件。

可以同时使用多个Plugin和Preset，此时，它们的执行顺序非常重要。

先执行完所有Plugin，再执行Preset。

多个Plugin，按照声明次序顺序执行。

多个Preset，按照声明次序逆序执行。

比如.babelrc配置如下，那么执行的顺序为：

Plugin：transform-react-jsx、transform-async-to-generator

Preset：es2016、es2015

{
  "plugins": [ 
    "transform-react-jsx",
    "transform-async-to-generator"
  ],
  "presets": [ 
    "es2015",
    "es2016"    
  ]
}

footer 使用了jsx, jsx在JS中写HTML，可以进行任意js计算，更开放。 vue结构更清晰。

webpack配置css单独分离打包

项目打包之后一些css也在bundle.js中加载，这样会影响加载速度，我们将css单独分离打包.

extract-text-webpack-plugin 已经被弃用，我们用`mini-css-extract-plugin`。
```sh
npm install --save-dev mini-css-extract-plugin
```
`mini-css-extract-plugin` [链接](https://github.com/webpack-contrib/mini-css-extract-plugin)

从4.0版本开始CommonsChunkPlugin被移除且被optimization.splitChunks和optimization.runtimeChunk配置项代替.

参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request

码云特技

1. 使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md
2. 码云官方博客 blog.gitee.com
3. 你可以 https://gitee.com/explore 这个地址来了解码云上的优秀开源项目
4. GVP 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 https://gitee.com/help
6. 码云封面人物是一档用来展示码云会员风采的栏目 https://gitee.com/gitee-stars/