Home >Web Front-end >JS Tutorial >How to build helloWorld using vue-cli in vue

How to build helloWorld using vue-cli in vue

亚连
亚连Original
2018-06-11 17:13:262022browse

This article mainly introduces the use of the template vue-cli officially provided by vue to build a helloWorld case. Friends who need it can refer to it

Installation environment

  • Install node.js and configure environment variables

  • Install Taobao image, npm install -g cnpm --registry=https://registry. npm.taobao.org

  • Install webpack, cnpm install webpack -g

  • Install scaffolding npm install vue-cli -g

Create project

Find a folder on the hard disk for the project, enter the directory in the terminal, cd directory path
Create a project based on the template, vue init webpack-simple project name , vue init webpack project name ,

Template Interpretation

  • ##cd into the created project directory

  • Install project dependencies, npm install, do not use cnpm install to install (it will cause many dependent libraries to be missing later)

  • Install vue routing module vue-router and network request module vue-resource, cnpm install vue-router vue-resource --save

  • Start the project npm run dev, start After completion, enter http://localhost:8080 in the browser, and you will see the initial interface

. The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the dynamic drop-down box during Baidu search in angularJs-$http

How to implement it in angularjs array Determine whether a certain element is contained

How to use the method of pushing a json object into an array in angular

How to increase the table in angularjs The method of tr

About explaining the use of take in redux-saga in detail

Using Elememt-UI to build the management backend in Vue (detailed tutorial )

What are the ways to use isPlainObject() in jQuery?

Detailed explanation of js function related content

Detailed explanation of JS strict mode knowledge points?

How to dynamically add and delete data in AngularJS?

How to dynamically add and delete div methods in angularJS

The above is the detailed content of How to build helloWorld using vue-cli in vue. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn