学习笔记之前端组件学习

学习笔记

说明，记录在操作过程中遇到的问题

1.前提条件：已安装node和npm

2.安装组件

npm i material-components-web

3.初始化生成package.json文件

npm init

3.更新json文件

{
  "scripts": {
"start": "webpack-dev-server"
  }
}

4.安装依赖

• webpack: Bundles Sass and JavaScript
• webpack-dev-server: Development server
• sass-loader: Loads a Sass file and compiles it to CSS
• node-sass: Provides binding for Node.js to Sass, peer dependency to sass-loader
• css-loader: Resolves CSS @import and url() paths
• extract-loader: Extracts the CSS into a .css file
• file-loader: Serves the .css file as a public URL

官网提供安装方法，但是安装node-sass会报错，解决办法一个一个安装即可

npm install --save-dev webpack webpack-cli webpack-dev-server css-loader sass-loader node-sass extract-loader file-loader

node-sass问题解决办法如下

npm install -g mirror-config-china --registry=http://registry.npm.taobao.org

npm install node-sass

5.实例一

index.html

  

  
  Hello World

app.scss

body {
  color: blue;
}

webpack.config.js，配置后实现的效果是打包app.scss生成bundle.css

module.exports = [{
  entry: './app.scss',
  output: {
// This is necessary for webpack to compile
// But we never use style-bundle.js
filename: 'style-bundle.js',
  },
  module: {
rules: [
  {
test: /\.scss$/,
use: [
  {
loader: 'file-loader',
options: {
  name: 'bundle.css',
},
  },
  { loader: 'extract-loader' },
  { loader: 'css-loader' },
  { loader: 'sass-loader' },
]
  }
]
  },
}];

测试

npm start

6.实例二

app.scss

@import "@material/button/mdc-button";

.foo-button {
  @include mdc-button-ink-color(teal);
  @include mdc-states(teal);
}

webpack.config.js改变{ loader: ‘sass-loader’ }

{
  loader: 'sass-loader',
  options: {
sassOptions: {
  includePaths: ['./node_modules']
}
  }
}

安装依赖

npm install --save-dev autoprefixer postcss-loader

html中添加

  

Button
  

webpack.config.js顶部添加

const autoprefixer = require('autoprefixer');

webpack.config.js内容添加

{ loader: 'extract-loader' },
{ loader: 'css-loader' },
{
  loader: 'postcss-loader',
  options: {
 plugins: () => [autoprefixer()]
  }
},
{
  loader: 'sass-loader',
  options: {
sassOptions: {
  includePaths: ['./node_modules']
}
  }
},

测试

npm start

7.实例三

安装依赖

npm install --save-dev @babel/core babel-loader @babel/preset-env

html

app.js

console.log('hello world');

webpack.config.js

   const autoprefixer = require('autoprefixer');

module.exports = {
  entry: ['./app.scss', './app.js'],
  output: {
filename: 'bundle.js',
  },
  module: {
rules: [
  {
test: /\.scss$/,
use: [
  {
loader: 'file-loader',
options: {
  name: 'bundle.css',
},
  },
  {loader: 'extract-loader'},
  {loader: 'css-loader'},
  {
loader: 'postcss-loader',
options: {
  plugins: () => [autoprefixer()]
}
  },
  {
loader: 'sass-loader',
options: {
  sassOptions: {
includePaths: ['./node_modules'],
  }
},
  }
],
  },
  {
test: /\.js$/,
loader: 'babel-loader',
query: {
  presets: ['@babel/preset-env'],
},
  }
],
  },
};

测试

npm start

8.实例4

app.js

import {MDCRipple} from '@material/ripple/index';
const ripple = new MDCRipple(document.querySelector('.foo-button'));

测试

npm start

9.生成dist文件，包括css，js，html

package.json文件修改

  "scripts": {
"build": "webpack",
"start": "webpack-dev-server"
  }

执行打包

npm run build

dist文件就包括js，css，可放在各种框架中

参考网址

快速启动网址

https://github.com/material-components/material-components-web/blob/master/docs/getting-started.md

组件文档

https://material-components.github.io/material-components-web-catalog/#/

图标使用开发者文档

https://google.github.io/material-design-icons/

图标样式

https://material.io/resources/icons/?style=outline

快速查看效果

https://codepen.io/ningqing123/pen/MWwWvGW