installation
npm install vue-cli -g (global)
or
yarn global add vue-cli
When we install scaffolding good vue in the above manner, we can use a command on the command line: vue (of the order is not -cli)
vue of use
vue init<template-name style="margin: 0px; padding: 0px;"><project-name style="margin: 0px; padding: 0px;"></project-name></template-name>
init: initialize (create) based vue project
<template-name style = "margin : 0px; padding: 0px;">: build template name: commonly used is webpack, others can refer to: https://github.com / vuejs-Templates </ Template-name>
<Project-name style = "margin: 0px; padding: 0px;">: to construct the name of the item </ project-name>
vue init webpack hello: Based webpack hello to build a name for the vue project (the project must build networking networking networking!!!)
vue-cli is an interactive command line, the project will need to fill out some information about our projects constructed by vue command:
Project the Name: Project name (This command will produce a package.json file to be created, the file name option is this ProjectName, the default directory name of the current project is created, it can also develop their own (but need to meet package.json in name naming rules, do not appear in capital letters, spaces, underscores, you can use -)
Project Description: Project, will also appear in package.json file, optional
Author: author, optional
Next to directly enter
Install vue-router: Routing component is installed vue, to do the project, then you must install
Use ESLint to lint your code: the need to use the code detection module ESLint
Setup unit tests with Karma + Mocha ?: test is installed (Unit Test)
Setup e2e tests with Nightwatch ?: whether the installation end to end test
Completion of the above steps, over!
After the completion of configuration by vue-cli, the next step required to install dependencies vue, projects need to install dependencies are described in documents package.json vue-cli tool automatically generated:
dependencies: actually need to project dependencies
devDependencies: project development process requires the use of tools package, not part of the actual program code line
run
The required dependencies installed after the installation is complete, you can start the project, run
yarn run dev / npm run dev: open a test development environment
yarn run build: build the project, the project package, we can put the files uploaded to the server package project
The first time you run, you will see a welcome page, here we can project development
Project structure
build directory: command to build the project needed to use a number of scripts and configuration files
config directory: vue-cli will automatically install a small heat build express overloaded web server, config which is about the configuration of the server
dist directory: Compile the project to build the store on-line catalog
node_modules directory: project dependencies storage directory
src directory: store the project's source directory
static directory: static resource storage directory
In the project development process, most of our tasks is to complete this in the src directory
- main.js: vue scaffolding for the project entry file we generated automatically set in the entry document, do some initialization work projects
- The introduction of Vue
- The introduction of the necessary components
- Creating Vue examples
routing
When our application is complicated after the page has also become involved in more complex logic also become, that we are to organize and maintain our multi-page website by the way, but this is not a good user experience ( or jump because it will refresh the page), the user experience in order to solve the problem, the best way data (page vary), but do not need to jump, refresh.
- No refresh to get data asynchronously through ajax
- After acquiring the data processing and management as well as rendering pages through vue
Get data to render the page under what circumstances? The traditional approach: url request by sending back data and get a new page for page data to decide what url, use a single-page development model, then, you can not use the page jump, but you can use the hash value of the url changes get to decide what content rendering any page.
So a hash corresponds to a url of view, then we need to set the relationship between the hash and views, we can make a hash and view correspondence relationship (mapping)
- Set the hash-view map (map) relationship
- Listening hash changes
- When the hash value change, according to find the corresponding map view component to render
vue a third party provides a framework for us to achieve the above functions: vue-router
We mentioned above address - View map: Routing
vue-router
installation
npm install shock-router / yarn add shock-router
Reproduced in: https: //www.jianshu.com/p/3961344f0aa1