Note: This method applies to vuE-CLI4.0 and below

1. The role

Quickly create a project based on the WebPack template

2. Install

  1. Install webpack: Use NPM global installationwebpack, open the command line tool, and enternpm install webpack -gAfter the installation is complete, enterwebpack -vYou can view the current installation version. If the version is displayed, the installation is successful
  2. ** Global installation vue- CLI: ** Enter on the command linenpm install --global vue-cliAfter the installation is complete, entervue -VView the current version

3. Use vue-CLI to build the project

  1. Create a folder Vue, go to the folder, enter Vue init webpack Vue -cli-test, where Vue -cli-test is the name of the new project file

  2. Jump into the options to fill in and confirm the project information

    • Project name (baoge) : —– project name, enter the default name in parentheses (Sorry, name can no longer contain capital letters), You can refer to it.

    • Project Description (A vue.js Project) : —- Project description, or directly click Enter, using the default name

    • Author () : —- Author, enter mapengfei and the user will then choose:

    • Runtime + Compiler: recommended for most users Runtime + Compiler: recommended for most users about 6KB lighter min+gzip, But templates (or any ue-specificHTML) are ONLY allowed in. Vue files-render functions are required elsewhere ONLY when running, I already have a recommendation and I’ll go with the first one

    • Install vue-router? (Y/n) Indicates whether to install vue-Router. This is the official route and is used in most cases. Enter Y and press Enter.

    • Use ESLint to lint your code? (Y/n) Whether to use ESLint to manage code. ESLint is a code style management tool that is used to unify code styles and is used in general projects. Pick an ESLint preset (Use arrow keys), the code style for writing Vue projects, and press Y to preset

    • Setup unit tests with Karma + Mocha? (Y/n) Whether to install unit tests, select install Y and press Enter

    • Setup e2e tests with Nightwatch(Y/n)? To determine whether to install the E2E test, select Y and press Enter

  1. After the configuration is complete, there is a folder named vue-cli-test under the Vue directory. Go to the folder and download the dependenciesnpm install

  1. Modify the configuration and start the project

    • Modify the index.js file in config

  • The port number is changed to prevent the port number from being occupied. The assetsPublicPath property is changed because when js and CSS files are imported from outside after being packaged, if the path starts with a ‘/’, the corresponding file cannot be found locally. Therefore, if you want to open the packaged file locally, you need to change the path to ‘/’.

  • Enter NPM run dev to start the project and enter the access address. The following interface is displayed

4. Project catalog introduction

You can see the configuration file entry for development and production environments in package.json

  • Can be seen in the dev Settings, build/webpack. Dev. Conf., js, the file is a development environment webpack configuration of the entrance.
  • In webpack.dev.conf.js comes webpack.base.conf.js, which is the common WebPack configuration for development and production environments, and even test environments. It is fair to say that this document is quite important.
  • And config/index, js, build/utils, js, build/build js, specific look at the introduction: segmentfault.com/a/119000000…

5. Package the deployment

  • All project files developed by yourself need to be placed in the SRC directory
  • After the project development is complete, usenpm run buildTo package the project, which is generated when the package is completedistFolder, if the file path has been changed, you can directly open in the local
  • When the project goes live, simply place the Dist folder on the server

6. Refer to the article

www.jianshu.com/p/32beaca25…