Manual construction of vuE2 project engineering environment [20211220] is the latest

At present, vUE project has entered the era of VUe3, why do we need to write about 2.0? Because at present, the company of the original technology stack still maintains the technology stack project of 2.x version, but after each version is upgraded, the corresponding information has not been updated, so that there are frequent errors in the configuration of the project environment. So leave the final version of v2.x tutorial here. For the need of small partners to use, but also suitable for novice practice.

It’s also easy to ask in an interview, do you build the environment or do the project team build it, and you just write the business components? Therefore, it is necessary to learn how to configure and successfully build the project environment.

The tutorial is split into two parts, the first using scaffolding and the second using manual configuration.

As of now (20211220), the latest stable version of VUE is 2.6.14

Vue-cli scaffolding installation

Official website installation tutorial address

Official website scaffolding document address

1. Install scaffolding

To install scaffolding, you can install the new package using any of the following commands:

$NPM install -g@vue /cli # or $YARN global add @vue/cliCopy the code

Once installed, you can access vue commands from the command line. You can verify that vue is installed successfully by simply running it and seeing if it displays a help list of all available commands.

You can also use this command to check if the version is correct:

$ vue --version
Copy the code

2. Upgrade scaffolding

To upgrade the global Vue CLI package, run:

$NPM update -g@vue /cli # or $YARN Global upgrade --latest @vue/cliCopy the code

3. Installation project

After the scaffold is installed, the project can be installed by executing the installation command

$vue create vue-cliCopy the code

4. Select configuration and install

You will be prompted to choose a preset. You can choose preset, which includes the basic Babel + ESLint setting, or choose “Manually selected Features” to recall the desired feature. Select the VUE option to install, as shown in the following figure

4.1 Selecting default Settings

Select the Default configuration Default ([Vue 2] Babel, esLint) and press Enter to start the installation process

4.2 Manual Configuration Options

On the manual selection configuration screen, press the ↑ down ↓ key to move the cursor up and down, and press the space bar to select or cancel a single option. The interface is shown as follows:

After selecting the vUE version, press Enter to continue selecting the vUE version as shown below:

By default, the vue2. X version is selected. Here, we can directly press Enter to install. You will be prompted to use history mode routing.

? Use history mode for router? (Requires proper server setup for in
dex fallback in production) (Y/n)
Copy the code

Here, we can select confirm, after confirming the subsequent configuration.

Select CSS preprocessor (Sass/SCSS) :

Select esLint configuration (ESLint + Standard Config) :

Select when to perform ESLint validation (Lint on Save) :

Select how to configure the selected functions (In dedicated Config files) :

Selecting Y will cause you to enter the name for direct use next time, otherwise start initializing the project directly.

Whether to save the previous Settings as a default template (Y) : Confirm to save the configuration.

5. Start the project

Go to the project directory and start $CD vue-cli $YARN serveCopy the code

6. Verification is successful

After starting the project, access it through http://localhost:8080/. If it is successful, the following picture will be displayed:

7. Directory description

├─ └─img │ ├─ SRC │ ├─assets │ ├─ exercises │ ├─ exercises │ ├─ exercises Public component │ ├─ Router // Route │ ├─ Store // State │ ├─views │ ├─ app.vue // Main component │ ├─main.js // Import file └─ registerServiceworker.js // ├─.browserslistrc // Browser support ├─.eslintrc.js // code Check Tool ├─.eslintignore // Configure code check ignore file ├─.gitignore // gitignore file Config ├─.babel.config.js // Toolchain syntax compile Backwards Compatible ├─package.json // Basic module information Project development required module version project name ├─ Package-lock. json // ├─vue.config.js // Save vue configuration file Can be used to set the proxy, packaging configuration, etc. (to create) ├ ─ tests / / unit test │ └ ─ unit │ └ ─ example. The spec. The js / / the default unit test example ├ ─ jest. Config. Js / / unit test configuration ├ ─ README, md Env // Loaded in all environments Env. Development // Development Environment Setup // ├─.env.test // Test environment Setup // Production Environment Setup //Copy the code

Manual Installation and configuration

vue2 + webpack4 + babel7

$NPM install vue --save YARN add vue $YARN add webpack webpack- CLI webpack-dev-server yarn add vue-loader --dev yarn add vue-routerCopy the code

1. Initialize the project

Initialize the project to generate a package.json configuration file

Yarn init -y # or NPM init -yCopy the code

After the command is executed, a package.json configuration file is generated in the project root directory

2. Install the VUE and create related components

$YARN add vue # or $NPM install vue --saveCopy the code

• Create index. HTML

Create an index.html document in the root directory with the following contents:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Vue 2.x</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>
Copy the code

• Create entry files main.js and vue components

Create a SRC directory under the root directory and create SRC /main.js and SRC/app. vue files respectively

src/main.js

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

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

src/App.vue

<template>
    <div>
        Hello World!
    </div>
</template>

<script>
export default ({
    name: 'App'
})
</script>

<style>

</style>
Copy the code

3. Install webPack4 and configure it

Because webPack4 and Webpack5 versions change greatly, so the installation should specify the version @4.46.0, webpack-dev-server to achieve the code hot update function

$yarn add [email protected] webpack-cli --dev # or $NPM install [email protected] webpack-cli --save-devCopy the code

• Install the hot update plug-in

$ yarn add webpack-dev-server --dev
# or
$ npm install webpack-dev-server --save-dev
Copy the code

• Install various loaders

Install CSS-related parsers

$ yarn add style-loader css-loader --dev
# or
$ npm install style-loader css-loader --save-dev
Copy the code

Install parsers associated with other files

$ yarn add url-loader file-loader --dev
# or
$ npm install url-loader file-loader --save-dev
Copy the code

Install parsers associated with vUE files

$ yarn add vue-loader vue-template-compiler --dev
# or
$ npm install vue-loader vue-template-compiler --save-dev
Copy the code

• Installing a plug-in

When installing html-webpack-plugin, specify version @4.5.2; otherwise, an error will be reported when installing the latest version, which is incompatible with WebPack4.

$Yarn add [email protected] - dev
# or
$NPM install [email protected] - save - dev
Copy the code

• Configuration webpack

Create the webpack configuration file webpack.config.js in the root directory

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

module.exports = {
    entry: path.resolve(__dirname, './src/main.js'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].js"
    },
    mode: 'development'.resolve: {
        extensions: ['.js'.'.vue'.'.json'].// import reference files omit the suffix
        alias: {
            'vue$': 'vue/dist/vue.esm.js'}},module: {
        rules: [{test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.js$/,
                use: ['babel-loader'].exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader'./ / note: style - loader, MiniCssExtractPlugin. Loader cannot be used at the same time
                    "css-loader"] {},test: /\.(gif|png|svg|jpe? g)(\? . *)? $/,
                loader: "url-loader".// It is recommended to use url-loader instead of file-loader to reduce the number of HTTP requests
                options: {
                    limit: 1024}}},plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './index.html'),
            inject: 'body'
        }),
        new VueLoaderPlugin() // To create a project manually, use the vue-loader plug-in in webpack]}Copy the code

4. Install and configure Babel7

$ yarn add @babel/core @babel/preset-env babel-loader --dev
# or
$ npm install @babel/core @babel/preset-env babel-loader --save-dev
Copy the code

Create. Babelrc in the root directory, initialize Babel configuration {“presets”: [“@babel/preset-env”]}

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

5. Configure the startup command

Configure the startup command “dev” in package.json: “webpack-dev-server –open –port 3000 –hot”

{
  "name": "vue2.x"."version": "1.0.0"."main": "index.js"."license": "MIT"."scripts": {
    "dev": "webpack-dev-server --open --port 3000 --hot"
  },
  "dependencies": {
    "vue": "^ 2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^ 7.16.5"."@babel/preset-env": "^ 7.16.5"."babel-loader": "^ 8.2.3"."css-loader": "^ 6.5.1." "."file-loader": "^ 6.2.0"."html-webpack-plugin": "4.5.2"."style-loader": "^ 3.3.1"."url-loader": "^ 4.4.1"."vue-loader": "^ 15.9.8"."vue-template-compiler": "^ 2.6.14"."webpack": "^ 4.46.0"."webpack-cli": "^ 4.9.1." "."webpack-dev-server": "^ 4.6.0"}}Copy the code

6. Start the project

Run the following command to start the project

yarn dev
# or
npm run dev
Copy the code

If the following information is displayed after the project is started, the installation is successful.

7. To summarize

During the installation process, pay attention to the webPack version and the corresponding plug-in. If you install the previous command directly without specifying the version, it is easy to error. We can also use Babel-Polyfill to provide an implementation of the new syntax for clients that do not support it