# vue-demo

**Repository Path**: phper95/vue-demo

## Basic Information

- **Project Name**: vue-demo
- **Description**: vue入门到精通
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-07-17
- **Last Updated**: 2021-06-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-demo

#### 介绍
vue入门到精通

#### 软件架构
软件架构说明


#### 安装教程
```shell script

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
```sh
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

```js
{
  "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](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5.  码云官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)