How to use vue-cli to create a project and package it with webpack

1. Prepare the environment (download nodejs and set environment variables)
2. Install vue-cli globally and provide vue command to create vue project

npm install -g @vue/cli

About old versions
The package name of Vue CLI was changed from vue-cli to @vue/cli. If you have installed an older version of vue-cli (1.x or 2.x) globally, you need to uninstall it first via npm uninstall vue-cli -g or yarn global remove vue-cli.

3. Create a new project based on the webpack template (first create a new project folder and open the command line at the location)

vue init webpack my-project

4. Perform default configuration

# Some configuration is required here, just press Enter by default This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project
# Start configuration? Project name my-project
? Project description A Vue.js project
? Author runoob <[email protected]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
# Configuration ends vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

5. Enter the project, install node_modules, and start the project

cd my-project
npm install
npm run dev

6. Package the project and configure nginx

#Package project npm run build

nginx configuration

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    include mime.types;
    default_type application/octet-stream;
    sendfile on;
    keepalive_timeout 65;

    server {
        listen 8081;
        server_name localhost;

		location / {
            root E:/vuework/my-project/dist;
			try_files $uri $uri/ /index.html;
            index index.html index.htm;
        }
    }
}

7. Repeated packaging, file not updated.
Reference the clean-webpack-plugin plug-in in the webpack package file in the build directory, and then use it in the plugin.

8. Deployment: configure nginx, package the project, and start nginx

npm run build
start nginx

This is the end of this article about using vue-cli to create a project and webpack packaging. For more related vue webpack packaging content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!