mvvm框架--san.js 學習筆記（一）

時間 2019-11-10

標籤 mvvm 框架 san.js san 學習筆記欄目 JavaScript 简体版

原文原文鏈接

最近，因爲公司項目須要，使用百度mvvm框架san開發了一個兼容ie6的小項目。san是mvvm框架，和vue有一些相似。和vue相比，優點是能兼容ie6，但沒有vue那麼簡單易用，學習san最好有一些mvvm框架的基礎。固然最讓人頭疼的是社區，如今隨便一搜，少有關於san的文章（除了官方文檔），這對初學者來講是很難的。當初我本身好奇，嘗試用san作了一個小型項目，這裏記錄一下。若是你也想嘗試一下，也許個人文章會對你有一些幫助。html

我將從零開始，用san作一個demo，作一個記錄。好，直接開始，作一個簡單的。

Quik start 項目結構

一、index.htmlvue

<!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>

二、 package.jsonnode

{
  "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"
  }
}

三、app.jsgit

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();