Small knowledge, big challenge! This paper is participating in theEssentials for programmers”Creative activities.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

With that said, this chapter moves on to the introduction of VUE

The preparatory work

Now that we’ve got the deconstruction of the big theme, it’s time to introduce Vue, and here we go again

Install dependencies

NPM I vue-loader (install this component) NPM I vue-style NPM I resolve-url-loader NPM I clean-webpack-pluginUsing this plug-in cleans up the old code left over from the past in dist each time you pack
npm i mini-css-extract-plugin
npm i file-loader
Copy the code

webpack.config.js

// With this plug-in, HTML files are automatically created and updated
const HtmlWebpackPlugin = require('html-webpack-plugin')
Using this plug-in cleans up the old code left over from the past in dist each time you pack
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// With this plug-in, the vue file is parsed
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path')

const createLoader = (name, options) = > {
  return {
    loader: `${name}-loader`.options: options
  }
}
// Style references
const cssLoader = (type) = > {
  const options = {
    sourceMap: false
  }
  return [
    createLoader('vue-style', options),
    {
      loader: MiniCssExtractPlugin.loader,
      options: { hmr: true }
    },
    createLoader('css', options)
  ].concat(type === 'css' ? [] : [].concat(type === 'sass' ? [{ loader: 'resolve-url-loader' }] : [])
    .concat([createLoader(type)]))
}
module.exports = {
  /* Webpack entry start */
  entry: "./index.js"./* webpack output */
  output: {
    // Output the file name
    filename: "./test.js",},module: {
    rules: [{test: /.vue$/,
        loader: 'vue-loader'.options: {
          transformAssetUrls: {
            video: ['src'.'poster'].source: 'src'.img: 'src'.image: 'xlink:href'.embed: 'src'}}}, {test: /\.(js|ts)$/,
        use: {
          loader: "babel-loader".options: {
            presets: ["@babel/preset-env"],},},}, {test: /\.css$/,
        use: cssLoader('css')}, {test: /.less$/,
        use: cssLoader('less')}, {test: /\.sc|ass$/,
        use: cssLoader('sass')}],},/* Configure webpack-dev-serve */
  devServer: {
    contentBase: './dist'
  },
  /* Plug-in configuration */
  plugins: [
    /* HTML generating plug-in */
    /* Templet is the file path */
    /* if the templet is configured in the wrong way */
    new HtmlWebpackPlugin({
      template: './index.html'.filename: 'index.html'.inject: true
    }),
    new CleanWebpackPlugin(),
    new VueLoaderPlugin()
  ],
  mode: "development".// How to configure modules to be parsed, i.e., set parsing rules for corresponding modules
  resolve: {
    // Autocomplete extension
    extensions: ['.js'.'.vue'.'.json'].// Default path proxy
    // For example, import Vue from 'Vue' will be automatically found in 'vue/dist/vue.com.js'
    // This eliminates the need to focus on different levels of concern when referring to files later in the development project
    alias: {
      The '@': path.join(__dirname, '/'.'src'),
      '@api': path.join(__dirname, '/'.'src/api'),
      '@styles': path.join(__dirname, '/'.'src/styles'),
      '@config': path.join(__dirname, '/'.'config'),
      'vue$': 'vue/dist/vue.common.js'.'@components': path.join(__dirname, '/'.'src/components')}}};Copy the code

package.json

Modified index. HTML

<! doctypehtml>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="Width =device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title></title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Copy the code

Modify webPack configuration items

Now that we are using Vue, we need to modify the contents of the webpack.config.js entry and output

First we need to create a new SRC folder (personal name so you don’t have to be like me, but it’s better to be formal)

And move our index.js to main.js

webpack.config.jsModify the

Webpack. Config. Js/* Webpack entry start */
  entry: {
    app: "./src/main.js"
  },
  /* webpack output webpack can be done without */
  output: {
    path: path.resolve(__dirname, './dist'), // The package file path of the project
    publicPath: '/dist/'.// Access path through devServer
    filename: 'build.js' // The packaged file name
  },
  devServer: {
    historyApiFallback: true.overlay: true
   }
Copy the code

Configure index.html

<! DOCTYPEhtml>
  <html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
  </head>
  <body>
    <script src="/dist/build.js"></script>
  </body>
</html>
Copy the code

And then I’m going to start it up and make sure it works

Package. json add (don’t add if you have it)

"scripts": {
    // webpack-dev-server automatically starts a static resource Web server -- the hot parameter indicates that hot updates are enabled
    "dev": "webpack-dev-server --open --hot"."build": "webpack --progress --hide-modules"
  },
Copy the code

The introduction of vue

First, install vUE

npm i vue --save
Copy the code

Modify main.js and index, HTML, and webpack.config.js files

  • main.js
import Vue from 'vue';

var app = new Vue({
  el: '#app'.data: {
    message: 'Hello Vue! '}});Copy the code
  • index.html
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</title> </head> <body> <div id="app"> {{message}} </div> <script src="/dist/build.js"></script> </body> </html>Copy the code
  • webpack.config.js
resolve: {
    // Add it here
    alias: {
      'vue$': 'vue/dist/vue.esm.js'}}Copy the code

Ps: package.json; dev; open; otherwise {{mesgage}} will appear instead of Hello World

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"."dev": "webpack --mode development"."open": "webpack-dev-server --hot --open"."build": "webpack --mode production"
  },
Copy the code

The introduction of CSS

Create a style folder under SRC, create common.scss, write a style, and then import common.js in main.js

body {
  background: red;
  min-width: 1200px;
}

Copy the code

mian.js

import '@styles/common.scss';
Copy the code

webpack.config.js

plugins: [
    new MiniCssExtractPlugin(),
  ],
Copy the code

The introduction of the App. Vue

Install dependencies

npm install vue-template-compiler --save-dev
Copy the code

main.js

import Vue from 'vue';
import App from './App.vue';

import '@styles/common.scss';

new Vue({
  el: '#app'.template: '<App/>'.components: { App }
})


Copy the code

App.vue

<template>
  <div id="app">
    <h1>{{ msg }}</h1>
    <input type="text" v-model="msg" @input="change">
  </div>
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js'}},methods: {
    change(){
      console.log(this.msg)
    }
  }
}
</script>

<style lang="scss">
#app {

  h1 {
    color: green; }}</style>
Copy the code

This is the end of it!

It’s time to introduce routing and vuex!