vue中使用自定义注解（@log为例）

• 目录

  一、代码资源

  二、开发步骤

  三、参考文章

  四、webpack相关文章

  ---

• 一、代码资源

下面实战内容，是通过3个基本文件的基础上操作的，请自行下载！！！

             ㊯ 百度网盘分享

• 二、开发步骤

1、jquery 安装

npm install jquery

2、es6 语法转换依赖安装

npm install babel-loader@7.1.5 babel-preset-es2015@7.0.0-bata.3 -S
或者：npm install -D babel-loader @babel/core @babel/preset-env webpack（使用上面报错的话）

3、本章节依赖安装

npm install --save-dev @babel/plugin-proposal-decorators -D
npm install --save-dev @babel/plugin-proposal-class-properties -D

4、webpack之loader添加（一般添加完依赖会自动添加plugins，请再检查一遍）

...
module: {
		rules: [{
			test: /\.js$/,
			use: {
				loader: 'babel-loader',
				options: {
					presets: [
						'@babel/preset-env'
					],
					plugins: [
						["@babel/plugin-proposal-decorators", {
							"legacy": true
						}],
						["@babel/plugin-proposal-class-properties", {
							"loose": true
						}]
					]
				}
			},
		}]
	},
...

5、class内容编写（main.js修改）

class A {
    a = 'a-属性';
}
let a = new A();

console.log(a.a)

<!--
    此时我们执行webpack，在main.js中是可以输出A的属性的，那么接下来我们新增标签修改成如下所示，
    新增@log标签
-->
        

@log
class A {
	a = 'a-属性';
}
let a = new A();

console.log(a.a)

6、查看A属性是否能打印

npx webpack（或者用webpack）

<!--
    此时预览index.html会发现报错：Uncaught ReferenceError: log is not defined
-->

自定义注解官网使用案例：

1、安装babeljs官网顺序粘贴

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }], //  "legacy": true标识宽松模式
    ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]
}

2、基础使用方法

https://babeljs.io/docs/en/babel-plugin-proposal-decorators#simple-class-decorator

@annotation
class MyClass { }

function annotation(target) {
   target.annotated = true;
}

7、新增log自定义函数

@log
class A {
	a = 'a-属性';
}
let a = new A();

console.log(a.a)

// 注意装饰器就是一个函数,如果写了@log,必须写function,不然会报"Uncaught ReferenceError: log is not defined"
function log(target) {
	console.log(target);
}

• 三、参考文章

1. npm 官网：https://www.npmjs.com/package/@babel/plugin-proposal-decorators

2. babeljs 官网：https://babeljs.io/docs/en/babel-plugin-proposal-decorators#simple-class-decorator

3. @readonly、@debounce(500)等：https://github.com/jayphelps/core-decorators

• 四、webpack相关文章

1. 初识 webpack（什么是webpack等）
2. 初识 webpack 配置篇（导入/导出、入口/输出、Loader、Plugins）
3. 初识 webpack bundle.js 四种命名方式（命名长度限制）
4. 初识 webpack 利用stylus将css分离（vue利用stylus分离实战）
5. 初识 webpack 浏览器识别 es6 语法和 css、js 样式分离总结（babel-loader、stylus）
6. 初识 webpack 装饰器@log配置
7. 初识 webpack 安装第三方库（jquery）
8. 初识 webpack 案例（跨域、devtool定位异常、clean、图标文件上传）
9. 初识 webpack 案例（document.write、引用第三方图标、使用template模板打包）
10. 初识 webpack 案例（开发环境中使用 vconsole 和 利用 jsUri 解析 url ）
11. 初识 webpack 案例 （vue执行多个并发请求）[转]
12. 初识 webpack 案例 （vue axios请求封装）