Vue-cli entry-level project structure analysis, vue-cli entry-level project

Vue-cli entry-level project structure analysis, vue-cli entry-level project

Preface

In the previous project setup article, we have downloaded and installed the node environment and vue-cli, and successfully built a vue-cli project. Next, let's sort out the structure of the vue-cli project.

Overall framework

The project structure of a vue-cli is as follows, where the src folder needs to be mastered, so this article also focuses on the files. For other related files, just take a look.

File structure subdivision

1. build -- [webpack configuration]

Build files are mainly webpack configuration, the main Startup File is the dev-server.js, when we enter npm run dev first start is the dev-server.js, it will check node and npm version, load the configuration file, start the service.

2. config -- [vue project configuration]

The config file is mainly related to project configurations. We usually configure listening ports, packaging output paths, and naming when ports conflict.

3. node_modules -- [dependency package]

Node_modules contains the project dependency package, which includes many basic dependencies. You can also install other Dependencies as needed. The installation method is to open cmd, enter the project directory, enter npm install [dependency package name], and press Enter.

In either case, we will install the dependency ourselves:

(1) The dependency package is missing during project running. For example, the css-loader used by the project to load external css, and the route jump to vue-loader (Installation Method example: npm install css-loader)

(2) install plug-ins, such as vux (WEUI-based mobile Component Library) and vue-swiper (carousel plug-in)

Note: Sometimes the specified dependency version is installed, you need to add the version number after the dependency package name, such as installing vue-loader of version 11.1.4, enter npm install vue-loader@11.1.4

4. src -- [core project file]

The core file of the project has been briefly described. Next, we will focus on main. js, App. vue, and index. js of the router.

4.1 index.html -- [homepage]

Index.html is the same as other html, but generally only defines an empty root node. The instance defined in main. js will be mounted under the root node, and the content will be filled by the vue component.

Index.html

4.2 App. vue -- [root component]

A vue page consists of three parts: template, js, and style)

App. vue

[Template]

The template can only contain one parent node, that is, only one div at the top layer can be contained (for example, the parent node is # app div, and there is no sibling node)

<Router-view> </router-view> is a vro view, where all the subsequent routing pages are displayed.

In a metaphor, <router-view> is similar to a slot. When you jump to a route, the pages under the route are inserted in the slot for rendering and display.

[Script]

Vue is generally written in es6 and exported using export default. The following can contain data, life cycle (mounted, etc.), and method (methods). For the specific syntax, see vue. js documentation. I will also explain it through examples later.

[Style]

Styles are wrapped by the style label <style> </style>. By default, the global effect is affected. To define the scope to work only under this component, you must add scoped to the label, <style scoped> </style>

To introduce an external css file, first install the css-loader dependency package for the project, open cmd, enter the project directory, enter npm install css-loader, and press Enter. After the installation is complete, you can import the required css files under the style tab, for example:

<style>  import './assets/css/public.css'</style>

In this way, we can encapsulate the style under the style, write it to the css folder, and then introduce it to the page for use. The entire vue page also looks more concise.

4.3 main. js -- [entry file]

Main. js mainly introduces the vue framework, root components and route settings, and defines the vue instance

Components: {App} is the introduced root component App. vue

You can also introduce plug-ins later. Of course, you must first install the plug-ins.

Main. js

4.4 router -- [route configuration]

In the router folder, there is an index. js, which is the route configuration file.

Index. js under the router

Here we define a route with the path '/'. The corresponding page of this route is the Hello component. So when we access http: // localhost in the browser url: 8080 // The Hello component rendered at a time

Similarly, we can set multiple routes, such as '/Index' and'/list'. Of course, we must first introduce this component and then set a route for this component.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.