# Vue-Study

**Repository Path**: planning/Vue-Study

## Basic Information

- **Project Name**: Vue-Study
- **Description**: Vue项目实践
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-03-05
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 项目技能点：
1. 采用 webpack 打包，核心配置文件：`webpack.config.js`。打包方法：在`webpack.config.js` 文件所在目录，使用 `webpack` 指令即可打包。  
![](http://ozg587txm.bkt.clouddn.com/18-6-14/39549805.jpg)

2. 引入 和 导出模块的方式：
* CommonJS
```javascript
// 引入模块
var calculate = require('./calculate.js');
// 导出模块
module.exports = calculate;
```

* ES6
```javascript
// 引入模块
import calculate from './calculate.js'; 
// 导出模块
export default calculate;
```
#### ES6中的模块
* 默认
    - 导入`import [,..xxx] [,..from] './xxx.ext'`
    - 导出 `export default obj;`
* 声明式
    - 1导出 `export var obj = xxx;`
    - 2导出 `export var obj2 = {};`
    - 3单独导出 ` export {stu};`
    - 导入 `import {obj,obj2,stu} from './xxx.js';  直接使用obj`
* 全体
* 默认导出和声明式导入在使用上的区别
    - 要注意，声明式导入的时候，必须{名称} 名称要一致（按需导入)
    - 默认导入，可以随意的使用变量名

```javascript
{
default:"我是默认导出的结果"    
        import xxx from './cal.js'会获取到整个对象的default属性
obj1:"我是声明式导出1"
obj2:"我是声明式导出2" 
obj3:"我是声明式导出3"     import {obj1,obj2}
obj4:"我是声明式导出4"
}
    import * as allObj from './cal.js';  获取的就是一整个对象
```
* import 和export一定写在顶级，不要包含在{}内