mvvm框架--san.js 学习笔记（一）

最新推荐文章于 2024-01-06 16:16:11 发布

weixin_34007020

最新推荐文章于 2024-01-06 16:16:11 发布

阅读量795

点赞数

文章标签： javascript json ViewUI

原文链接：https://segmentfault.com/a/1190000016792400

版权

最近，由于公司项目需要，使用百度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: ture,
        middleware: [middleware],
        startPath: '/index.html'
    })
    browserSync.watch('**').on('change', browserSync.reload); // 添加监听，项目文件改动保存，浏览器自动刷新
}
Server();

get start

$ cd start

$ npm i

$ node app.js

本例：源码

感兴趣的继续关注，有时间再写。

weixin_34007020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
mvvm框架--san.js 学习笔记（一）

最近，由于公司项目需要，使用百度mvvm框架san开发了一个兼容ie6的小项目。san是mvvm框架，和vue有一些类似。和vue相比，优势是能兼容ie6，但没有vue那么简单易用，学习san最好有一些mvvm框架的基础。当然最让人头疼的是社区，现在随便一搜，少有关于san的文章（除了官方文档），这对初学者来说是很难的。当初我自己好奇，尝...
复制链接

扫一扫

mvvm框架--san.js 学习笔记（一）

Quik start 项目结构

get start

“相关推荐”对你有帮助么？