Vue built from scratch using Webpack development environment

Others 2019-09-26 21:02:23 views: null

Create a project

Create an empty directory, open a command line in the directory, execute the npm initcommand to create a project (not execute npm command? Need to install the Node ), this process will be prompted to enter some content, free to enter on the line, it will automatically generate a package when finished. json file, which contains the content just entered

Create an index.html page, Vue development is due to the use of single-page application, it is usually a html file is enough, the content is also very simple, just a div # app

project

  project-name
+ |- index.html
  |- package.json

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>这是标题</title>
</head>
<body>
<div id="app"></div>
</body>
</html>

project

  project-name
  |- index.html
+ |- index.js
  |- package.json
+ |- webpack.config.js

Index.js as the main entrance to create a project, create a file as webpack.config.js Webpack configuration file, as follows

webpack.config.js

'use strict'

const path = require('path')

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  }
}

Perform npm install --save-dev webpack-cliinstallation Webpack

In package.json file corresponding to scriptsthe write command

package.json

  {
    "scripts": {
+     "build": "webpack"
    }
  }

Execution npm run buildto complete the package, the package file after the success in dist directory (which is defined by the configuration file from), currently packing out of only one file index.js

Start Local Service

Use webpack-dev-server to start local services, facilitate the development and local debugging

carried out npm install --save-dev webpack webpack-dev-server

In package.json file corresponding to scriptsthe write command

package.json

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

Execution npm run devto start local services, visit localhost: 8080 to 8080 is the default port number, modify the port configuration is as follows

webpack.config.js

module.exports = {
  // ...
  devServer: {
    compress: true,
    port: 8080
  }
}

Generates an HTML file

Use html-webpack-plugin to generate HTML files

carried out npm install --save-dev html-webpack-plugin

Add webpack.config.js profile

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html'
    })
  ]
}

Installation Vue

carried out npm install --save-dev vue-loader vue-template-compiler

carried out npm install --save vue vue-router

Webpack.config.js disposed in the vue-loader file type for introducing .vue

webpack.config.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'vue-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

App.vue file as a new routing component containers

project

  project-name
+ |- app.vue
  |- index.html
  |- index.js
  |- package.json
  |- webpack.config.js

app.vue

<template>
<router-view></router-view>
</template>

<script>
export default {}
</script>

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import appView from 'app.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('./index.vue').default
    }
  ]
})

new Vue({
  el: '#app',
  router,
  render(h) { return h(appView) }
})

Create a new file as index.vue Home

project

  project-name
  |- app.vue
  |- index.html
  |- index.js
  |- package.json
+ |- index.vue
  |- webpack.config.js

index.vue

<template>
<div>
  <h1>这是首页</h1>
</div>
</template>

<script>
export default {}
</script>

Add Page

Add about page file as a about.vue

project

  project-name
+ |- about.vue
  |- app.vue
  |- index.html
  |- index.js
  |- package.json
  |- index.vue
  |- webpack.config.js

about.vue

<template>
<div>
  <h1>这是关于页</h1>
</div>
</template>

<script>
export default {}
</script>

Configuring Routing on page

index.js

// ...

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('./index.vue').default
    },
    {
      path: '/about',
      component: require('./about.vue').default
    },
  ]
})

Visit http: // localhost: 8080 / # / about to show on the page

Document classification

With the increase of the page, vue file will be more and more in the project root directory is not science, to create a src directory to place the development of source files in the current directory

Create a directory in the src directory pages to place vue page file, app.vue, index.vue, about.vue files into pages directory, and modify corresponding reference path

project

  project-name
- |- about.vue
- |- app.vue
  |- index.html
  |- index.js
  |- package.json
- |- index.vue
  |- webpack.config.js
+ |- /src
+   |- /pages
+     |- about.vue
+     |- app.vue
+     |- index.vue

index.js

// ...

import appView from './src/pages/app.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('./src/pages/index.vue').default
    },
    {
      path: '/about',
      component: require('./src/pages/about.vue').default
    },
  ]
})

Like ./src/pages/index.vuethis long path started writing too much trouble, a alias configuration parameters in the webpack.config.js

webpack.config.js

module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  }
}

Page path above can be rewritten again

index.js

// ...

import appView from '@/pages/app.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: require('@/pages/index.vue').default
    },
    {
      path: '/about',
      component: require('@/pages/about.vue').default
    },
  ]
})

Meanwhile, the routing configuration separately extracted, a new file in routes.js src / js directory (js need for new directory)

project

  project-name
  |- index.html
  |- index.js
  |- package.json
  |- webpack.config.js
  |- /src
+   |- /js
+     |- routes.js
    |- /pages
      |- about.vue
      |- app.vue
      |- index.vue

routes.js

module.exports = [
  {
    path: '/',
    component: require('@/pages/index.vue').default
  },
  {
    path: '/about',
    component: require('@/pages/about.vue').default
  },
]

index.js

// ...

import routes from '@/js/routes'

const router = new VueRouter({
  routes
})

Configuring Babel

Since the previous code syntax ES2015, in order to make the project compatible with more browsers, you need to use Babel code conversion

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

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader'
          }
        ]
      }
    ]
  }
}

Create a .babelrc file (do not know how to create? Can be copied directly from the project)

project

  project-name
+ |- .babelrc
  |- index.html
  |- index.js
  |- package.json
  |- webpack.config.js
  ...

.babelrc

{
  "presets": ["@babel/preset-env"]
}

CSS

The project will certainly use CSS, first create a new file style.css style, the style of the project can be written in the inside

project

  project-name
  |- .babelrc
  |- index.html
  |- index.js
  |- package.json
+ |- style.css
  |- webpack.config.js
  ...

Then install Normalize.css for the various browsers render consistent results, this is just a style initialization scheme is optional, in addition you can choose Bootstrap or Bulma and other style library contains more styles as the basis for the development of

carried out npm install --save normalize.css

In a direct reference to index.js inside

index.js

import 'normalize.css'
import './style.css'
// ...

Because here quoted css files directly in the js file, so it is necessary css-loader to handle

carried out npm install --save-dev css-loader style-loader

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          }
        ]
      }
    ]
  }
}

Alternatively, you can write the CSS file inside vue

index.vue

<template>
<div>
  <h1>这是首页</h1>
</div>
</template>

<script>
export default {}
</script>

<style>
h1 {
  text-align: center;
}
</style>

Both types of write-style mode can choose to use the specific needs

Extracted style file

After the final package introduced above manner css CSS code in js inside, for the performance of the site will require a separate CSS extracted using mini-css-extract-plugin plug-in to extract the CSS

carried out npm install --save-dev mini-css-extract-plugin

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader // 代替 style-loader
          },
          {
            loader: 'css-loader'
          }
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: `[name].css`
    })
  ]
}

With pictures

If the project needs to be useful to a picture file-loader to handle

carried out npm install --save-dev file-loader

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader'
      }
    ]
  }
}

Prepare a picture logo.gif in src / images directory (images need to create a new directory, this picture is used to test)

project

  project-name
  |- .babelrc
  |- index.html
  |- index.js
  |- package.json
  |- style.css
  |- webpack.config.js
  |- /src
+   |- /images
+     |- logo.gif
    |- /js
      |- routes.js
    |- /pages
      |- about.vue
      |- app.vue
      |- index.vue

index.vue

<template>
<div>
  <h1>这是首页</h1>
  <img src="@/images/logo.gif">
</div>
</template>

<script>
export default {}
</script>

<style>
h1 {
  text-align: center;
}
</style>

The implementation of npm run buildthe package has been successfully found picture package came in, but the name of the picture has changed, if you do not want to change the name of the picture, you can configure parameters for file-loader

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: 'images/[name].[ext]'
        }
      }
    ]
  }
}

CSS compression

Use cssnano compress CSS, the plug-in part of PostCSS ecosystem, so it is necessary to install postcss-loader

carried out npm install --save-dev cssnano postcss-loader

Postcss.config.js create a file, which is PostCSS configuration files, configuration which are written in this

project

  project-name
  |- .babelrc
  |- index.html
  |- index.js
  |- package.json
+ |- postcss.config.js
  |- style.css
  |- webpack.config.js
  ...

postcss.config.js

module.exports = {
  plugins: {
    'cssnano': {
      safe: true
    }
  }
}

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader'
          }
        ]
      }
    ]
  }
}

CSS preprocessing

As used herein, postcss-preset-env pretreated CSS (Sass may alternatively be used or the like Less)

carried out npm install --save-dev postcss-preset-env

The plug-in also belongs PostCSS ecosystems can directly increase the allocation in the postcss.config.js

postcss.config.js

  module.exports = {
    plugins: {
+     'postcss-preset-env': {},
      'cssnano': {
+       autoprefixer: false, // 这里两个插件都包含了 autoprefixer，只执行其中一个就行
        safe: true
      }
    }
  }

HTTP request

Use Axios sends an HTTP request, based Axios Promise, so install ES6-Promise polyfill

carried out npm install --save axios es6-promise

index.js

+ import 'es6-promise/auto'
+ import axios from 'axios'

  // ...

Send a request to the project

index.js

  import 'es6-promise/auto'
  import axios from 'axios'

+ axios.post('/login')

  // ...

After running this request obviously will return a 404, then how does it return valid data, configuration webpack.config.js in devServerparameters

webpack.config.js

  module.exports = {
    // ...
    devServer: {
+     before(app, server) {
+       app.post('/login', (req, res) => {
+         res.json({success: true})
+       })
+     },
      compress: true,
      port: 8080
    }
  }

After restarting, you can see the request / login address to return the data {"success": true}, so that you can debug interface in the local

Of course, all interfaces are written too much trouble, you can use proxythe parameter interface proxy requests to other addresses go

webpack.config.js

  module.exports = {
    // ...
    devServer: {
      before(app, server) {
        app.post('/login', (req, res) => {
          res.json({success: true})
        })
      },
+     proxy: {
+       '/api': {
+         target: 'http://localhost:3000'
+       }
+     },
      compress: true,
      port: 8080
    }
  }

In this case, for example, request / api / posts will be delegated to the fact http://localhost:3000/api/posts

Bale

Configuration mode parameters

webpack.config.js

module.exports = {
  mode: 'production'
  // ...
}

productionAnd developmenttwo kinds of mode parameters is obvious, productionfor publishing, developmentfor the development, specifically what is the difference, look here Click here

Execution npm run buildcan be packaged, after packing the resulting file in the directory dist

More

Guess you like

Origin www.cnblogs.com/xyzhanjiang/p/11590778.html
Recommended
Ranking
Solve the problem that the Chinese display of the drawing using python matplotlib under the Linux system is displayed as a box
[Conference Call for Papers] The 5th International Conference on Civil Engineering, Environmental Resources and Energy Materials (CCESEM 2023)
4-yl Fast Fourier Transform
DataGirdView interlaced display color
[Docker implements test deployment CI/CD----Dingding alarm after the build is successful (7)]
[Asp.net core series] 6 the complete structure of a project in actual combat
The new version of OpenCenterV3 management background
Why can box plots detect outliers and what is the principle?
[Switch] jumbo frame Introduction
C++对象移动（3）——移动构造函数
Daily
More
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)

Code World

© 2018 codetd.com