vue-cli initializes a method instance of a vue.js project

Parsing packaged .vue files

In order to enable us to better maintain components during project development, vue provides a single-file component system. vue puts each independent component in a. In the vue file, three basic custom tags are provided in this file:
1. template
2. script
3. style
to place different content blocks of components, but because of the browser This file type cannot be directly identified, so we need to compile and package it through webpack. The official provides a loader for processing .vue: vue-loader

ERROR in ./src/Hello.vue
Module build failed: Error: Cannot find module 'vue-template-compiler'

Vue is actually developed using a .vue single-component system, but it cannot adapt to actual complex needs. We still need to configure a lot Some things are integrated with .vue. This configuration is very cumbersome, so the official provides a tool to help us build some content that must be used in the development process of a project. This tool: vue-cli, through this tool we can It is very convenient to create a project based on vue. We also call this tool --- scaffolding

installation

npm install vue-cli -g (global)
or
yarn global add vue-cli

After we install the vue scaffolding through the above method, we can use a command in the command line: vue (this command does not have -cli)

Usage of vue

vue init

init: Initialize (create) a project based on vue

vue init webpack hello: Build a project named hello based on webpack vue project (project construction must be online! Network! Network!)

vue-cli is an interactive command line. Building the project through the vue command will require us to fill in some project information:
Project Name: The name of the project to be created (this command will produce a package.json file. The name option in the file is the ProjectName. The default is the name of the currently created project directory. You can also make it yourself (but it needs to comply with the name naming rules in package.json. Do not use capital letters, spaces, or underscores. You can use -)

Project Description: Project introduction, will also appear in the package.json file, optional

Author: author, optional

Press Enter directly in the next step

Install vue-router: Whether to install the vue routing component. If you are doing a project, you must install it.

Use ESLint to lint your code: Do you need to use ESLint? Module for code detection

Setup unit tests with Karma + Mocha?：Whether to install tests (unit tests)

Setup e2e tests with Nightwatch?：Whether to install end-to-end tests

Complete the above steps, over!

After completing the configuration through vue-cli, the next step is to install the dependency packages required by vue. The dependency packages that the project needs to install are described in the package.json file automatically generated by the vue-cli tool:

dependencies: dependency packages that actually need to be used in the project
devDependencies: some toolkits that need to be used during the project development process, which are not part of the actual online code of the project

Run

After the required installation dependency packages are installed, you can start the project and run

yarn run dev / npm run dev: open a test development environment
yarn run build: build the project and package the project , we can upload the packaged project files to the server

If it is the first run, you will see a welcome page, and then we can proceed with project development

Project structure

• build directory: Some script files and configuration files needed to build project commands

• config directory: A small file will be automatically installed in vue-cli The hot reload web server built by express, the config contains the relevant configuration of this server

• dist directory: the storage directory after the project is compiled and built online

• node_modules directory: project dependency package storage directory

• src directory: project source code storage directory

• static directory: static resource storage Directory

During the project development process, most of our tasks are completed in the src directory

• main.js: vue scaffolding is the entry file set in the project that we automatically generate. In this entry file, some project initialization work is done

• Introduce Vue

• Introduce necessary components

• Create Vue instance

Routing

When our application becomes complex, the number of pages involved will also increase, and the logic will also become complex. It turns out that we organize and maintain our website through multiple pages. , but this kind of user experience is not very good (because the page will be refreshed or jumped). In order to solve the user experience problem, the best way is to use data (the page will change), but there is no need to jump or refresh.

• Get data asynchronously through ajax without refresh

• After obtaining the data, it is processed and managed through vue and the page is rendered

Under what circumstances do you get the data to render the page? Traditional processing method: resend the request through the URL to obtain new data and pages. What page data to obtain is determined by the URL. If you use the single-page development mode, you can no longer use page jumps, but you can use the hash value in the URL. changes to determine what content to obtain and what page to render.

So the hash of a url corresponds to a view, then we need to set the relationship between hash and view. We can make a corresponding relationship (mapping) between hash and view.
- Set the map of hash-view ( Mapping) relationship
- Monitor hash changes
- When the hash value changes, find the corresponding component according to the map to render the view

vue provides us with a third-party framework to implement the above Function: vue-router

The address-view mapping we mentioned above: routing

Related recommendations:

vue-cli is simple to develop multi-page applications Example

vue-cli writing vue plug-in instance

How to use routing in vue-cli

The above is the detailed content of vue-cli initializes a method instance of a vue.js project. For more information, please follow other related articles on the PHP Chinese website!