Webpack builds the vue project by hand, and implements webpack to use less to write css

Packaging the project with [webpack]

1. After installing git and vue first, check whether the installation is successful. If there are three of them, the installation is successful and you can start
(if webpack is not installed, install webpack globally). If it is already installed , you can use it View version
npm install webpack webpack-cli –g
webpack -v

2. Before starting, you also need to introduce something, introduce vue/cli-init,
otherwise the following statements cannot be executed

npm install -g @vue/cli-init

3. Start packaging the project

vue init webpack yourprojectname

vue init webpack is a fixed format, yourprojectname represents your project name (must note that the project name cannot appear capital letters , you can use horizontal lines – etc., but must not have capital letters)

After input, the steps of carriage return are as shown in the figure

After the end, a project folder named yourprojectname will be created under your folder, and use vscode (no one will write the front end without vscode?? No, no, no) to open this folder

4. Introduce and use less

A very important point when using less is that less must use version 4.1 and below, otherwise an error will be reported
(1. Introduce the dependencies of less and less-loader, the current version introduced in September 2020 should be version 7.0 or above, the version is too high
(2. Introduce less-loader version 4.1.0 )

npm install less less-loader --save-dev
npm install less-loader@4.1.0 --save

Add this sentence under the module module in build/webpack.base.conf.js

{
        test: /\.less$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'less-loader',
          }
        ]
      }

Leave a Comment

Your email address will not be published. Required fields are marked *