preface

An introductory course for junior engineers

Mobile single-page Demo

The body of the

The first step

Find a disk that you think is appropriate. So mkdir test, CD test, NPM init -y.

The second step

Install dependencies

Webpack series dependencies

webpack webpack-cli

Babel series dependencies

@babel/core @babel/preset-env

Mobile compatibility scheme

amfe-flexible autoprefixer

axios

axios

webpack loader

babel-loader css-loader file-loader postcss-loader pm2rem-loader style-loader

Vue 3.0 SFC rewrites the compilation method for.vue files, using parseComponent and other methods, must use the loader with the -v16 suffix, it took a long time to find the loader

vue-loader-v16 vue-template-complier

webpack plugin

html-webpack-plugin webpack-dev-server

Vue & Vuex

vue@next

vuex@next

Install the dependency packages using YARN add or NPM I

The third step

  • inCurrent root directorycreateindex.htmlInitializes the HTML code
<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>h5 static</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
Copy the code
  • create.babelrcTo initialize the Babel configuration
{
  "presets": ["@babel/preset-env"]}Copy the code
  • createpostcss.config.jsExample Initialize the postCSS configuration
module.exports = {
  plugins: [require('autoprefixer')]},Copy the code
  • create.gitignore
node_modules
.vscode
.idea
Copy the code
  • createscriptsDirectory to write the YARN lock script
if (!/yarn\.js$/.test(process.env.npm_execpath || ' ')) {
  console.warn(
    '\u001b[33mThis repository requires Yarn 1.x for scripts to work properly.\u001b[39m\n'
  )
  process.exit(1)}Copy the code

Configure the script in the package.json configuration

{
  "name": "h5-static"."version": "1.0.0"."description": ""."main": "index.js"."scripts": {
    "start": "webpack-dev-server"."build": "webpack --mode=production"."preinstall": "node ./scripts/checkYarn.js"
  },
  "author": "upeartaker"."license": "ISC"."dependencies": {
    "@babel/core": "^ 7.11.6"."@babel/preset-env": "^ 7.11.5"."@vue/compiler-sfc": "^ 3.0.0"."amfe-flexible": "^ 2.2.1." "."autoprefixer": "8.0.0"."axios": "^ 0.20.0"."babel-loader": "^ 8.1.0"."css-loader": "^ 4.3.0"."file-loader": "^ 6.1.0"."html-webpack-plugin": "^ 4.5.0." "."postcss-loader": "^ 4.0.2." "."px2rem-loader": "^ 0.1.9"."style-loader": "^ 1.2.1." "."vue": "^ 3.0.0"."vue-loader": "^ 15.9.3"."vue-loader-v16": 5.4 "" ^ 16.0.0 - beta.."vue-template-compiler": "^ 2.6.12." "."vuex": 4 "" ^ 4.0.0 - beta.."webpack": "^ 4.44.2"."webpack-cli": "^" 3.3.12."webpack-dev-server": "^ 3.11.0"
  },
  "browserslist": [
    "defaults"."not ie < 11"."last 2 versions"."1%" >."iOS 7"."last 3 iOS versions"]}Copy the code

Preinstall is the YARN lock script

  • Create a SRC directory. Create services, Pages, Components, and Store directories in SRC to store Ajax, view, component, and global state management.

  • Create the webpack.config.js file and write the WebPack configuration

const path = require('path')
const VueLoaderPlugin = require('vue-loader-v16/dist/plugin.js').default
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',},resolve: {
    extensions: ['.js'],},module: {
    rules: [{test: /\.js$/,
        use: ['babel-loader'].exclude: /node_modules/}, {test: /\.css$/,
        use: [
          'style-loader'.'css-loader',
          {
            loader: 'px2rem-loader'.options: {
              remUnit: 37.5,}}, {loader: 'postcss-loader'.options: {
              sourceMap: true.postcssOptions: {
                path: 'postcss.config.js',},},},],}, {test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader'],}, {test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['file-loader'],}, {test: /\.vue$/,
        loader : 'vue-loader-v16'}],},optimization: {
    minimize: true,},plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      inject: 'body',}).new VueLoaderPlugin()
  ],
}

Copy the code

The fourth step

Write a Demo to test whether the project can be used.

  • Enter thesrcIn the directory, create amain.jsFile, write the following code,
import 'amfe-flexible'
import './index.css'
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.mount('#app')
Copy the code
  • createApp.vueFile, write some code
<template> <Fragment> {{message}} <button @click="handleClick"> </button> </Fragment> </template> <script> import { Fragment, ref } from 'vue' export default { name: 'root', components: [Fragment], setup() { const message = ref('hello') const handleClick = () => { message.value = 'hit' } return { message, handleClick, } }, } </script>Copy the code

Step 5

Run the yarn start script

conclusion

  • Webpack configurations are easy to learn, declarative interface specifications that allow developers to focus only on function points. There is no difficulty in webpack configuration of this project. Students who have done VUE-CLI2.0 project can directly skip it.

  • When building a project by yourself, it is recommended that you first sort out the project structure, list the function points that need to be expanded, and improve the project in a node-upward manner. From an engineering perspective, this project can only belong to Leaf level.