Use vue-cli to build a simple music website from scratch (1). Use vue-cli from scratch

Use vue-cli to build a simple music website from scratch (1). Use vue-cli from scratch

After learning about the vue framework and practicing some examples, I want to build a vue project. I learned that a vue-cli tool is provided officially to build the project scaffold. I tried it, write down the blog to record it.

I. tool environment

1. node. js 6.10.0. Currently, the latest version of node. js is 8.7.0. You can download and install the latest version from the official website. Link: http://nodejs.cn/download/

2. Editor, Hbuilder 8.8.4

3. windows 8.1

2. Create a project

1. Install node. js, which is installed in "C: \ Program Files \ nodejs" by default. js installation also includes the package management tool npm (about node. for more information about js and npm, you can search for information on the Internet.) open its own command line editor node. js command prompt (windows cmd can also be used), because npm's default global installation path is "C: \ Users \ dippe_000 \ AppData \ Roaming \ npm \ node_modules ", if you do not want to install the C drive, run the following command:

Npm config set cache "E: \ nodeJs \ cache"

Npm config set prefix "E: \ nodeJs"

2. Install vue-cli and webpack

Enter "npm install-g vue-cli" and "npm install-g webpack" in the E: the "vue-cli" and "webpack" folders under the \ nodeJs \ node_modules "directory indicate that the installation is successful,If an error is reported during installation, you can try the following two methods:

First, run the command line as an administrator.

Type 2: Enter the following command in the current directory:

　　　　Npm config set http-proxy null

Npm config set registry http://registry.cnpmjs.org/

3. Use vue-cli to build a project

Create a new working directory on the E drive as the project directory, for example, "E: \ workspaces \ Hbuilder", and enter"Cd E: \ workspaces \ Hbuilder"Enter the Directory and enter"Vue init webpack vuetest"Initialize a vue project. As follows:

All the above options mean:

Project name)

Project description)

Author (Author)

Below is an option (I select the first one)

Runtime + Compiler: recommended for most users (run and compile)

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

Install vue-router? (Y/n) (whether to install vue-router, I choose to install)

Use ESLint to lint your code? (Y/n) (whether to use ESLint to manage code, I choose not)

Setup unit tests with Karma + Mocha? (Y/n) (whether to install unit test, I choose to install)

Setup e2e tests with Nightwatch (Y/n )? (Whether to install e2e test. I chose to install it)

Here, the build is complete,For more information about how to build a project using vue-cli, see:Http://www.jianshu.com/p/2769efeaa10a, Author: Xuan mu

4. Install node_modules and run the project

Run the following commands:

Cd vuetest

Npm install

Npm run dev

The first line of the command is to enter the newly created vuetest directory. The second line of npm install will create a node_modules directory under the current directory and install all the dependency toolkit. Because there are many tool kits, it may take a long time. The third sentence is to run the project on the local server, which can be accessed through a browser. The default address is "http: // localhost: 8080"

If an error occurs in the last step, try the following methods:

First, port 8080 is occupied. Open the "config \ index. js" file of the project and change port: 8080 to another port.

2. If the default browser cannot be found on the computer, try to replace the default browser with another browser.

If it succeeds, the following results will be displayed in the browser:

 

Note: This article mainly records how to use vue-cli to generate a vue project. The following article will record how to use this scaffold to build a music website, because I do not have much experience, and all implementations are made step by step. I hope you will put forward your own opinions and exchange ideas.

Reference link:

Node. js download: http://nodejs.cn/download/

Use of vue-cli: http://www.jianshu.com/p/2769efeaa10a

Detailed description of vue-cli build project: http://blog.csdn.net/hongchh/article/details/55113751