最近，由于公司项目需要，使用百度mvvm框架san开发了一个兼容ie6的小项目。san是mvvm框架，和vue有一些类似。和vue相比，优势是能兼容ie6，但没有vue那么简单易用，学习san最好有一些mvvm框架的基础。当然最让人头疼的是社区，现在随便一搜，少有关于san的文章（除了官方文档），这对初学者来说是很难的。当初我自己好奇，尝试用san做了一个小型项目，这里记录一下。如果你也想尝试一下，也许我的文章会对你有一些帮助。
我将从零开始，用san做一个demo，做一个记录。好，直接开始，做一个简单的。
Quik start 项目结构
1、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>mySan</title>
</head>
<body>
<script src="https://unpkg.com/san@latest"></script>
<script>
const MyApp = san.defineComponent({
template: `
<div>
<p>hello, I am {{name}}!</p>
</div>
`
});
let app = new MyApp({
data: {
name: 'yongchaoo'
}
});
myApp.attach(document.body);
</script>
</body>
</html>2、 package.json
{
"name": "start",
"version": "1.0.0",
"description": "demo by yongchaoo",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.26.0",
"http-proxy-middleware": "^0.19.0"
}
}
3、app.js
var browserSync = require('browser-sync').create();
var proxy = require('http-proxy-middleware')
var devApi = "http://www.api.com/" // 后台api
var middleware = proxy('/api/**', { // **：匹配所有请求路径
target: devApi,
changeOrigin: true,
pathRewrite: {'^/api' : '/api'}}); //重写路由
function Server() {
var bs = browserSync.init({
port: 8001,
server: {
directory: true,
baseDir: ['./'],
},
open: true,
middleware: [middleware],
startPath: '/index.html'
})
browserSync.watch('**').on('change', browserSync.reload); // 添加监听，项目文件改动保存，浏览器自动刷新
}
Server();get start
$ cd start
$ npm i
$ node app.js
本例：源码
感兴趣的继续关注，有时间再写。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。