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
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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
