Webpack Build simple VUE Project Chapter 5 - Introducing vUE

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.js`Modify 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!

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Webpack Build simple VUE Project Chapter 5 – Introducing vUE

preface

The preparatory work

Install dependencies

webpack.config.js

package.json

Modified index. HTML

Modify webPack configuration items

`webpack.config.js`Modify the

Configure index.html

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

The introduction of vue

First, install vUE

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

The introduction of CSS

The introduction of the App. Vue

Install dependencies

main.js

App.vue

Webpack Build simple VUE Project Chapter 5 – Introducing vUE

preface

The preparatory work

Install dependencies

webpack.config.js

package.json

Modified index. HTML

Modify webPack configuration items

webpack.config.jsModify the

Configure index.html

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

The introduction of vue

First, install vUE

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

The introduction of CSS

The introduction of the App. Vue

Install dependencies

main.js

App.vue

Related Posts

Ramble: Java and Python are both hot right now, what should I choose? Java and Python compare advantages and disadvantages.

CSS solves the problem that using fixed positioning causes the lower element to move up to the fixed positioning element

Vue routing lazy load vs. block load

`webpack.config.js`Modify the