一、export、export default、module.exports的区别
1、export和export default属于es6规范：
在同一个文件里面可以有多个export， 一个文件里面只能有1个export default
//a.js
export const test = 'aaa';
export const a = function(){};
//b.js
const test = 'aaa';
export default test;使用import 引入的方式也有点区别：
使用export时，用import引入相应的模块名字一定要和定义的名字一样，而使用export default时，用import引入模块名字可以不一样。
import {test, a} from 'a';
import aa from 'b';另外如果使用webpack 的require引入 export default返回的模块时，需要额外写default
var test = require('b').default; 2、module.exports是cmd规范
（1）CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
module.exports = {
x: 1,
y: 2
};
// 或者
module.exports.x = 1;
module.exports.y = 2;
// 或者
exports.x = 1;
exports.y = 2;使用require来加载模块
let user = require('./user.js');
console.log( `username: ${user.x}`); // 使用模板语言，注意：这里的不是分号（2）common.js定义模块
定义：
define('common'. function () {
return {
initCart: function () {
console.log('common init cart');
}
}
})使用：common是请求的返回值
require(['./common.js'], function (common) {
common.initCart();
})二、搭建基于express的开发环境
1、全局安装express生成器
cnpm i -g express-generator2、查看版本
express --version
4.16.0
3、生成express项目
express express // express+项目名4、安装依赖
E:\workspace\xampp\htdocs\demo\snowshop>cd express
E:\workspace\xampp\htdocs\demo\snowshop\express>cnpm install
5、运行
E:\workspace\xampp\htdocs\demo\snowshop\express>node ./bin/www或者：
E:\workspace\xampp\htdocs\demo\snowshop\express>npm run start打开：http://localhost:3000/
经历的步骤：因为路由是/所以
（1）在app.js中有：定义的是一级路由
var indexRouter = require('./routes/index');app.use('/', indexRouter);（2）会进入routes文件夹中的index.js，会执行以下：定义的是二级路由
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
（3）render会到views文件夹中，找到index.jade打开，显示在页面上
三、跨域
当后端提供接口的时候，使用axios来请求
axios不支持跨域，所以在config/index.js中配置：当请求goods的时候，代理到。。：3000的域名上
proxyTable: {
'/goods': {
target: 'http://localhost:3000'
}四、vue插件的开发
1、初始化文件
lenovo@DESKTOP-NL309GS MINGW64 /e/workspace/xampp/htdocs/demo/vue-toast
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (vue-toast)
version: (1.0.0)
description: this is a toast for mobile phone
entry point: (index.js)
test command:
git repository:
keywords:
author: xueer
license: (ISC)
About to write to E:\workspace\xampp\htdocs\demo\vue-toast\package.json:
{
"name": "vue-toast",
"version": "1.0.0",
"description": "this is a toast for mobile phone",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "xueer",
"license": "ISC"
}
Is this ok? (yes)
2、静态部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>Document</title>
<style type="text/css">
.container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
}
.toast {
width: 180px;
height: 60px;
line-height: 60px;
background: rgba(0, 0, 0, .61);
color: white;
text-align: center;
border-radius: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<section class="container">
<div class="toast">hello, toast</div>
</section>
</body>
</html>3、既然是vue插件，当然要用vue写了，所以将静态文件拆到vue文件中，./lib/toast.vue
<template>
<section class="container">
<div class="toast" :class="[visible?'fade-in':'fade-out']">{{ message}}</div>
</section>
</template>
<script>
export default {
data () {
return {
message: 'hello, toast',
visible: false
}
}
}
</script>
<style>
.container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
}
.toast {
width: 180px;
height: 60px;
line-height: 60px;
background: rgba(0, 0, 0, .61);
color: white;
text-align: center;
border-radius: 10px;
font-size: 18px;
}
.fade-in {
animation: fade-in 0.3s;
}
.fade-out {
animation: fade-out 0.3s;
}
@keyframes fade-in {
0% { opacity: 0; transform: scale(0.7); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes fade-out {
0% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.7); }
}
</style>4、建一个入口文件./lib/index.js
import ToastComponet from './toast.vue'
let Toast = {}
Toast.install = function () {} // 一定要有install函数，
export default Toast;5、编写index.js
import ToastComponent from './toast.vue'
let Toast = {}
// 一定要有install函数，传入vue参数和options
Toast.install = function (Vue, options) {
// 给原型加$toast方法
Vue.prototype.$toast = function (message, option) {
// 1、相当于继承组件，得到export中的
const ToastController = Vue.extend(ToastComponent);
// 2、创建一个实例，挂载到...，$mount就相当于new Vue({ el: '..' })中的el挂载
var instance = new ToastController().$mount(document.createElement("div"));
instance.message = message; // 赋值
install.visible = true; // 可见
// 多长时间消失
setInterval( () => {
instance.visible = false;
document.body.removeChild(instance.$el); // $el就是上面挂载的元素，移除掉
}, 3000);
}
// 扩展show方法，以show方法调用，也可以扩展其他方法
Vue.prototype.$toast['show'] = function (message, option) {
Vue.prototype.$toast(message, option);
}
}
export default Toast;6、对于参数的处理（完整版）
import ToastComponent from './toast.vue'
let Toast = {}
// 一定要有install函数，传入vue参数和options
Toast.install = function (Vue, options) {
// 默认的参数
var opt = {
duration:3000
};
// 将传入的options覆盖或填充默认的opt，全局的
for (var key in options) {
opt[key] = options[key];
}
// 给原型加$toast方法
Vue.prototype.$toast = function (message, option) {
// 局部的覆盖全局的
if (typeof option === 'object') {
for (var key in option) {
opt[key] = option[key];
}
}
// 1、相当于继承组件，得到export中的
const ToastController = Vue.extend(ToastComponent);
// 2、创建一个实例，挂载到。。teElement("div"));$mount就相当于new Vue({ el: '..' })中的el挂载
var instance = new ToastController().$mount(document.createElement('div'));
instance.message = message; // 赋值
instance.visible = true; // 可见
// 3、将挂载的元素添加进去
document.body.appendChild(instance.$el);
// 多长时间消失
setTimeout( () => {
instance.visible = false;
document.body.removeChild(instance.$el); // $el就是挂载的元素，移除掉
}, opt.duration);
}
// 扩展show方法，以show方法调用，也可以扩展其他方法
Vue.prototype.$toast['show'] = function (message, option) {
Vue.prototype.$toast(message, option);
}
Vue.prototype.$toast['info'] = function (message, option) {
Vue.prototype.$toast(message, option);
}
}
// 相当于注册vue插件，使用use之后，便执行了install
if (window.Vue) {
Vue.use(Toast);
}
export default Toast;7、webpack打包
（1）安装依赖
$ cnpm install vue vue-loader webpack webpack-cli css-loader vue-template-compiler vue-style-loader babel-loader babel-core babel-preset-env --save-dev
（2）新建webpack.config.js，并配置
const path = require('path');
const {VueLoaderPlugin} = require('vue-loader');
module.exports = {
entry: './src/lib/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'vue-toast.js'，
libraryTarget: 'umd', // 以什么格式打包，UMD可以打包成cmd、AMD格式
library: 'VueToast' // 打包之后的扩展名
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
exclude: path.resolve(__dirname, 'node_modules'),
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: path.resolve(__dirname, 'node_modules'),
query: {
presets: ['env']
}
},
{
test: /\.css$/,
loader: 'vue-style-loader!css-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
}8、测试，在外面的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>Document</title>
<script type="text/javascript" src='../node_modules/vue/dist/vue.js'></script>
<script type="text/javascript" src="../dist/vue-toast.js"></script>
</head>
<body>
<div id="app">
<a href="javascriipt:void(0);" @click="toast">点击淡出Toast</a>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
toast () {
this.$toast.show('您好，toast');
}
}
});
</script>
</body>
</html>9、通过npm发布插件
（1）首先去npm官网注册账号：https://www.npmjs.com
（2）在搜索框中搜索你要发布的名称，是package.json中的name，如果没有，可以发布，否则改名
（3）进入项目根目录，登录npm
lenovo@DESKTOP-NL309GS MINGW64 /e/workspace/xampp/htdocs/demo/vue-toast
$ npm adduser填写刚刚注册的用户名、密码、和邮箱
可通过下面来查看当前用户
lenovo@DESKTOP-NL309GS MINGW64 /e/workspace/xampp/htdocs/demo/vue-toast
$ npm whoami
（4）发布
lenovo@DESKTOP-NL309GS MINGW64 /e/workspace/xampp/htdocs/demo/vue-toast
$ npm publish（5）添加README.md文件，让别人知道怎么用
# vue-toast-snow
a mobile toast plugin for vue
## Usage
import VueToast from 'toast'
Vue.use(VueToast)
this.$toast.show("Hello Toast")lenovo@DESKTOP-NL309GS MINGW64 /e/workspace/xampp/htdocs/demo/vue-toast
$ npm publish
582
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
