廢話部分:
san 是百度做的一個(gè) MVVM 的組件框架灵巧，主要的特點(diǎn)就是兼容 IE 6捏题。還有一些其他的balabala脑题，詳見(jiàn)官網(wǎng)吧缝裤。https://baidu.github.io/san/ 可能水平問(wèn)題感覺(jué)官網(wǎng)說(shuō)的并不是特別清楚屏轰，想要了解的同學(xué)可以仔細(xì)看看官網(wǎng)的幾個(gè) demo 。另外需要注意的是 webpack4 憋飞，加入了快速設(shè)置的功能霎苗。在不同的 mode 下，默認(rèn)的配置詳見(jiàn)：https://webpack.js.org/concepts/mode/
最近在做百度前端學(xué)院的相關(guān)東西榛做，倉(cāng)庫(kù)地址：https://github.com/Howie126313/BaiduCourse
Get started：
新建一個(gè)文件夾同時(shí)執(zhí)行 ：（如果使用 npm 的話下面命令替換 npm 相關(guān)命令即可）
yarn init
或 npm init
然后安裝一些需要的依賴
yarn add san san-router webpack
yarn add babel-core babel-loader babel-preset-env css-loader file-loader san-loader style-loader html-loader html-webpack-plugin webpack-cli webpack-dev-server webpack-merge -D
新建一個(gè) config 文件夾唁盏，配置以下配置文件
webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'none',
entry: {
app: './src/main.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, '../dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.js$/,
use: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.san$/,
use: 'san-loader'
},
{
test: /\.svg|.jpg|.jpeg|.png$/,
use: 'file-loader'
}
]
},
plugins: [
new HtmlWebpackPlugin({
title: 'Production',
template: 'index.html',
filename: 'index.html'
})
]
}
webpack.dev.js
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'development',
devServer: {
contentBase: './dist'
}
})
webpack.prod.js
const merge = require('webpack-merge')
const common = require('./webpack.common.js')
module.exports = merge(common, {
mode: 'production'
})
在根目錄創(chuàng)建 .babelrc文件
{
"presets": [
"env"
]
}
然后在 package.json 中寫(xiě)入啟動(dòng)命令
{
"name": "demo",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "webpack --config config/webpack.prod.js",
"start": "webpack-dev-server --open --config config/webpack.dev.js"
},
"dependencies": {
"san": "^3.5.8",
"san-router": "^1.2.0",
"webpack": "^4.8.3"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-preset-env": "^1.7.0",
"css-loader": "^0.28.11",
"file-loader": "^1.1.11",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"san-loader": "^0.0.7",
"style-loader": "^0.21.0",
"webpack-cli": "^2.1.3",
"webpack-dev-server": "^3.1.4",
"webpack-merge": "^4.1.2"
}
}
根目錄下新建 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>Document</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
新建 src 文件夾，新建 main.js 文件
import san from 'san'
import {router} from 'san-router'
import Hello from './Hello.san'
router.add({rule: '/', Component: Hello, target: '#root'})
router.start()
然后新建一個(gè)組件 Hello.san
<template>
<div class="hello">
<div class="content">
<div class="title">
<div class="color">Hello {{msg}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
initData () {
return {
msg: 'San'
}
}
}
</script>
<style>
.color {
width: fit-content;
font-size: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: linear-gradient(to right, deeppink, dodgerblue);
-webkit-background-clip: text;
color: transparent;
}
</style>
ok,執(zhí)行
yarn start
就會(huì)看到下面的效果
