Vue basis

1. The role

Quickly create a project based on the WebPack template

2. Install

  1. Vue init webpack Vue -cli-test = new project name = new project name = new project name = new project name = new project name = new project name = new project name = new project name = new project name = new project name = new project name = new project name Use NPM to install webpack globally, open the command line, and enter NPM install webpack -g. After the installation is complete, you can view the current version. If the version number is displayed, the installation is successful.

  2. To install vue-cli globally, run NPM insatall –glibal vue-cli. After installing King City, run vue -v to view the current version.

3. Use vue-CLI to build the project

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

  1. Jump into the options to fill in and confirm 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

The user is then given a choice:

  • Runtime + Compiler: recommended for most users

  • Runtime-only: 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

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 is developed, use NPM Run Build to package the project. After the package is completed, the dist folder will be generated. If the file path has been changed, you can open it directly locally
  • When the project goes live, simply place the Dist folder on the server