The preparatory work

1. Download and install Node.js

Download: nodejs.org/en/download… , select your own version to download.

There is no need to specify how to install Node.js, but NPM (package management tool) is installed by default.

2. Enable CMD

Press Windows+R, enter CMD in the Run program window, and press Enter to open the system command prompt.

3. Install CNPM

NPM is a package management tool provided by Node.js. Because the NPM installation plug-in is downloaded from a foreign server, it is greatly affected by the network and may be abnormal. We can use Taobao NPM image CNPM to replace the default NPM.

Method 1: Use NPM to install CNPM

npm install -g cnpm
Copy the code

Note: This may cause the NPM and CNPM versions to be different.

Method 2: Use the alias command to set an alias

alias cnpm="npm"
Copy the code

Run the CNPM -v command to view the CNPM version to check whether the CNPM is correctly installed. If the installation is not complete, check whether the path variable is correctly configured.

4. Install vuE-CLI

Use the CNPM global installation vue-cli, enter the command in CMD (note: “-g” means global installation).

cnpm install -g vue-cli
Copy the code

The formal work

1. Create project MyDemo

vue init webpack mydemo
Copy the code

Mydemo is the name of the project, which is arbitrary (no uppercase letters). After you enter a command, the system enters the installation phase, and you need to enter some information.

Information details

Project name (vuetest)

Project name, you can specify it yourself, or you can enter the default name in parentheses.

Project description (A Vue.js project)

Project description, or simply click Enter, using the default name.

Author

Author, can specify, or directly enter.

The user is then given a choice

Runtime + Compiler: recommended for most users

Run add compile, now that it’s recommended, choose it

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files – render functions are required elsewhere

At runtime only, there is already a recommendation so choose the first one

Install vue-router? (Y/n)

Whether to install vue-Router, which is the official route 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 without affecting the overall operation.

Setup unit tests with Karma + Mocha? (Y/n)

Whether to install unit tests.

Setup e2e tests with Nightwatch(Y/n)?

Whether to install the E2E test.

When you open the project with an editor, the directory structure looks something like this.

catalogue

bulid

Inside are some action files that are actually executed when using NPM run *.

Webpack.base.config. js, webpack.dev.config.js, webpack.prod.config.js three webpack configuration files,

These are the basic WebPack configuration, development environment configuration, and production environment configuration. In fact, the contents of these files, some simple configuration, including entry files, plug-ins, loaders, hot updates, etc., have been configured. What we need to do is to add loader according to our own project, for example, the generation environment needs to add UglifyJsPlugin plug-in, which can be configured by ourselves, or some plug-ins need to be added or deleted. In fact, it is related to business, and others can be left unmoved.

config

Configuration file: the configuration information required to execute the file.

The most important is the index.js file to configure the proxy server, this place is closely related to us, and the background is to set an address here. Open index.js, find the property “proxyTable”, and add the corresponding background address to it, for example:

src

The resource files, all the components and images used are located under this folder. Take a quick look at what’s in this folder.

assets

Resources folder, for images and things like that,

components

Components folder, where all components are written,

router

Routing folders, which determine the rules for page jumps,

App.vue

Application components, all the components you write, are running on top of this component.

main.js

Webpack entry file

The static folder

For example, if you want to reference a Loader that can process files with SWF suffix configured in Webpack, you can also directly reference SWF files in this folder

package.json

This file has two parts that are useful: scripts sets the command, for example dev is set for debugging and we type NPM run dev; For example, if build is set, enter NPM run build for packaging. The other part is to see the dependencies we need in dependencies and devDependencies, which correspond to global and local dependencies, respectively

2. Install dependencies under MyDemo

Switch to the project directory

cd mydemo
Copy the code

Install the module

cnpm install
Copy the code

It is installed according to the package.json configuration table, and after installation, there will be a new folder named node_modules under mydemo, which corresponds to the configuration information in package.json.

3. Run MyDemo

Type the command

npm run dev
Copy the code

Enter the address http://localhost:8080 in your browser and you’re done! A Vue project has been initialized!