Build VUE-CLI and Webstorm settings based on Webpack

N1. Check if the local computer has node and NPM installed

The premise of installing VUE-CLI is that NPM is already installed

Whether to install the NPM Check command

Npm-v

If a version number appears, it means that NPM is already installed

View Node version number

Node-v

If this is not the case, please go to the official website to download stable version, you can also point to the right of the shuttle to download, the current vision of the node version is 8.9.3 walk you--node download

Note : You can download the 8.9.3 version directly on the official website to overwrite your local version, the following error may appear when running npm-v after installation.

Workaround:

Remove the npm file under the "C:\Users\ your user name \appdata\roaming\npm\node_modules" file under the directory !!

Installing Webpack

First check to see if the Webpack has been installed globally

Webpack-v

If the version number appears, the Webpack has been successfully installed, and the current vision project is using the 3.10.0 version

Otherwise you need to install Webpack globally

NPM install-g Webpack

N2. Installing the VUE-CLI Scaffold tool

First check to see if the computer has a scaffold tool installed globally (note that this is a capital V)

Vue-v

A global installation is required if the version number does not appear vue-cli

NPM Install Vue-cli-g

Use VUE-V to detect whether a successful installation to the computer

N3. Initializing a project (here is a detailed setup process for the Vision project, which can be skipped)

Initializing a project with the Vue init command

Vue Init <template-name> <project-name>

<template-name>: Represents the template name, where VUE-CLI provides 5 types of templates

1.webpack: Comprehensive webpack+vue-loader templates, features including hot loading, detection and CSS extensions.

2.webpack-simple: Simple Webpack+vue-loader template, but does not contain other features.

3.browerify

4.browerify-simple (because we do not use browerify here will not write)

5.simple: The simplest single-page application template

Since our Vision project is based on Webpack, select the Webpack template as the development template

<project-name>: Project name. Note that the name is not capitalized, as for reasons not described here, you can see the sum of the great God of Ruan. Why file names use lowercase

After the template is introduced, it is possible to build a project based on the Vue-cli scaffold.

This is because brother Hope has already built the vision project at the far end , so our project already has the name, is vision! Isn't it big on?

So We'll just go directly to VUE init webpack !

Command:

Vue Init Webpack

Project name: title, direct carriage return.

Project Description: item description, default to a vue.js project

Author: author

Install Vue-router? do you want to install the Vue Routing Plug-in, here we use, select Y

Use ESLint to lint your code? whether to use ESLint to limit your code errors and styles. After discussion we decided not to use. There are two reasons:

1. not used before, check some information this restriction may even limit the use of single and double quotes.

2. fear of affecting efficiency.

Set Up unit tests: whether to install Unit Test Tool N

Setup e2e tests with Nighwatch? whether to install e2e for user behavior simulation test N

Next you can run the project using NPM run Dev !

N4. analyze vue-cli templates and modify parts (you can go directly to the next step)

Here is a very, very, extremely, special, powerful article, look carefully! vue-cli#2.0 Webpack Configuration Analysis

Build-code for compiling the task

Configuration file for Config–webpack

Basic information about the package.json– project

The default port number for running the project is 8080, but the port is easily occupied. In order to prevent unnecessary problems, I changed the port number here to 8777. Of course if you want to change your favorite port number, you can enter

Config/index/js find the port number, directly modified on the line!

N5. precautions

Our project from the remote Git clone to the local, is no node_modules, that is, the so-called dependency.

Under the Vision project under clone:

CD Vision

NPM Install

After the installation is complete, there will be a node_modules file in the file. Running NPM Run Dev will run the Vision project! If you are not running successfully, remember to call someone.

N6.axios

Vue officially recommends the use of Axios to send and request data, as the official does not continue to maintain vue-resource, and before our Package.json is not installed Axios

Command:

NPM Install Axios--save

Thinking:

1. Vue.use () can be used directly when installing other plugins, however Axios is not possible.

There are currently three ways to solve the problem:

The first: every. vue file introduces Axios, which is cumbersome, but useful.

The second kind: directly modifies the Axios prototype chain. The method is not yet tried. Modify it here after the attempt.

The third type: in combination with Vuex, which is to encapsulate an action block of code. As we are currently using Vuex, this method is also being considered.

N7 using Webstorm to run vision projects

1. Go to the official website to download webstorm. Activation code GO You

2.clone code, download dependency package execute npm run dev to try code can run successfully

3. Install the Vue plugin, search Vue in the Webstorm plugins, and install the plugin

4. Change Es5.1 to Es6,webstorm default support is the Es5.1 version, if not modified it will be

5. Install the Gerrit plug-in, the company uses Gerrit, this must be installed.

The installation method is the same as the third step.

6. After installation, open the project. git file: The git file is hidden and needs a way to show it.

First download the commit file, otherwise it will not be submitted to your code COMMIT-MSG

CD Vision

Ls-a

Open. Git

Open the inside of the hooks file, put the downloaded files in the OK! Specific reference to the Gerrit written by brother. Use process +pycharm configuration

7. Finally modify the upper-right corner of the

Note: Why do I have to change the name? Before Bogota changed the name, causing the click to start the project when launched three times. and occasionally refresh. The last discovery was caused by the absence of a modified name.

Here, the construction of the project, as well as your local code has been able to run properly, modified, submitted!

Build vue-cli and Webstorm settings based on Webpack