vue入门第2天

今天主要是3个知识点

一、CSS作用域写法

1、正常的CSS
    <style scope></style>
    <div class="mint-cell-title”></div>
    scope:在当前的作用域有效
2、SCSS
    <style lang=“scss”   module></style>
    <template>
    <div :class="$style.personWrap”></div>
    </template>
    module:在当前的作用域有效
3、安装sass和CSS加载器（不要直接npm install sass）
    cnpm install sass-loader node-sass -D
    cnpm install css-loader style-loader  -D



二、安装px2rem:
1、在utils当中配置
    const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
    remUnit: 37.5,
    dpr:1
    }
    }

    function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]

三、如何配置node 代理
1、在config.js文件里面的dev下面填写prosyTable
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/‘,
proxyTable: {
'/api': {
target: 'http://localhost:3000/',
changeOrigin: true,  
// pathRewrite: {
// '^/api': ''
// }
}
},

2、在任意vue文件中发送axios请求：
axios.get('api')
.then(function(response) {
document.getElementById('people').innerHTML = response.data.map(function(person) {
return (
'<li class="row">' +
'<strong>' +  person.name + '</strong>' +
'</li><br/>'
);
}).join('');
})
.catch(function(err) {
document.getElementById('people').innerHTML = '<li class="text-danger">' + err.message + '</li>';
});

3、在server.js文件中写服务：
var people = [
{
"name": "Matt Zabriskie",
"github": "mzabriskie",
"twitter": "mzabriskie",
"avatar": "199035"
},
{
"name": "Ryan Florence",
"github": "rpflorence",
"twitter": "ryanflorence",
"avatar": "100200"
}
];
const http = require('http')
http.createServer(function(req,res){
res.write(JSON.stringify(people));
res.end();
}).listen(3000)