Giter VIP home page Giter VIP logo

madmin's People

Contributors

mwang0 avatar

Watchers

avatar avatar

madmin's Issues

手动搭建 vue 开发环境

手动搭建 vue 开发环境 - 基础

技术栈： webpack4、babel7、vue2

  • es6/7/8 转 es5
  • es6/7/8 api 转 es5
  • 处理 css
  • 处理 font
  • 处理 image
  • 处理 vue
  • 创建 html
  • 热更新

es6/7/8 转 es5

  • 依赖安装
npm install babel-loader @babel/core @babel/preset-env -D
  • 修改 webpack 配置
module: {
  // 其它选项...
  rules: [
    // 其它选项...
    {
      test: /\.js$/,
      include: /src/,
      use: {
        loader: 'babel-loader'
      }
    }
  ]
}
  • 修改 package.json 配置
"babel": {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            "browsers": [
              "> 1%",
              "last 2 versions"
            ]
          }
        }
      ]
    ]
  }

es6/7/8 api 转 es5

  • 依赖安装
npm install core-js@2 @babel/runtime-corejs2 -S
  • 修改 babel.config.js 配置, 按需引入 polyfill.
module.exports = function(api) {
  api.cache(true)
  return {
    presets: [
      [
        '@babel/preset-env',
        {
          useBuiltIns: 'usage',
          corejs: 2,
          targets: {
            browsers: ['> 1%', 'last 2 versions']
          }
        }
      ]
    ]
  }
}

处理 css

  • 依赖安装
npm install -D style-loader css-loader
  • 修改 webpack 配置
module: {
  rules: [
    // 其它选项...
    {
      test: /\.css$/,
      include: [/src/],
      use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
    }
  ]
}

处理 font

  • 依赖安装
npm install -D url-loader
  • 修改 webpack 配置
module: {
  rules: [
    // 其它选项...
    {
      test: /\.(eot|woff2?|ttf|svg)(\?.*)?$/,
      include: [/src/],
      use: 'url-loader'
    }
  ]
}

处理 image

  • 修改 webpack 配置
module: {
  rules: [
    // 其它选项...
    {
      test: /\.(jpe?g|png?|webp|gif)(\?.*)?$/,
      include: [/src/],
      use: 'url-loader',
      options: {
        limit: 8192 //小于8KB以base64嵌入
      }
    }
  ]
}

处理 vue

  • 依赖安装
npm install -D vue-loader vue-template-compiler
  • 修改 webpack 配置
const VueLoaderPlugin = require('vue-loader/lib/plugin.js')

module: {
  rules: [
    // 其它选项...
    {
      test: /\.vue$/,
      include: [/src/],
      use: 'vue-loader'
    }
  ]
}

plugins: [
  // 其它选项...
  new VueLoaderPlugin()
]

创建 html

  • 创建 html 模板文件，保存路径 src/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>m-admin</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
  • 依赖安装
  npm install -D html-webpack-plugin
  • 修改 webpack 配置
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
  // 其它选项...
  new HtmlWebpackPlugin({
    template: path.resolve(__dirname, '../src/index.html')
  })
]

热更新

  • 依赖安装
npm install -D webpack-dev-server
  • 修改 webpack 配置
const webpack = require('webpack')

plugins: [
  // 其它选项...
  new webpack.HotModuleReplacementPlugin()
]
  • 修改 package 配置
  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.config.js"
  }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.