Shulou(Shulou.com)06/01 Report--

This article mainly introduces "how to use vue-cli to create a project and webpack packaging" related knowledge, editor through the actual case to show you the operation process, the method of operation is simple and fast, practical, I hope that this "how to use vue-cli to create a project and webpack packaging" article can help you solve the problem.

1. Prepare the environment (nodejs download and set environment variables)

two。 Install vue-cli globally and provide vue commands to create vue projects

Npm install-g @ vue/cli

About the old version

The package name of Vue CLI has been changed from vue-cli to @ vue/cli. If you have installed the old version of vue-cli (1.x or 2.x) globally, you need to uninstall it through npm uninstall vue-cli-g or yarn global remove vue-cli first.

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

Vue init webpack my-project

4. Make the default configuration

# some configurations need to be made here. Enter by default can start the configuration of This will install Vue 2.x version of the template.For Vue 1.x use: vue init webpack#1.0 my-project#? Project name my-project? Project description A Vue.js project? Author runoob? 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-projectnpm installnpm run dev

6. Package the project and configure nginx

# packing Project npm run build

Nginx configuration

Worker_processes 1 try_files 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 eVueworkAccording to VueworkAccorde; try_files $uri $project / index.html Index index.html index.htm;}

7. Repeat packing, the file does not update the problem.

The webpack package file in the build directory references the clean-webpack-plugin plug-in, and then you can use it in plugin.

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

This is the end of npm run buildstart nginx's introduction to "how to create a project using vue-cli and package it with webpack". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.