Vue project structure Introduction

Vue project structure Introduction

 

Vue project Once created, using the Web Storm open the project, the project directory as follows:

 

 

 

1. build folder used to store the project build script

2. Some basic configuration information stored in config items, the most commonly used is the port forwarding

3. node_modules This directory is all dependent projects, namely npm install command files downloaded

4. This project src directory to store source code that developers write code in here

5. static resources used to store static

6. index.html is the project home page, portal page, but also the entire project only HTML pages

7. package.json defines all dependent projects, dependent and dependent on the release include the development time

For developers, after 99.99% of the work is done in the src, src files in the directory are as follows:

 

 

 

1. assets directory used to store file assets

2. components directory used to store components (some of reusable, non-separate page), of course, developers can also create a complete page directly in the components of.

3. Recommended storage components in the assembly, in addition to a separate page to create a new folder, designed to put a full page.

4. router directory, stored routing js file

5. App.vue Vue is a component, the first component is a Vue project

6. main.js equivalent to the main method in Java, is the entrance of the project js

main.js reads as follows:

          

1. In main.js, the object is first introduced into Vue

2. Introducing App.vue, and was named App

3. Introducing router, note that, since the lower router routing directory The index.js default file name, can be omitted

4. After everything is imported successfully, create a Vue objects, set to be processed is the node Vue '#app', '# app' refers to a div defined in advance in the index.html file

5. Vue the router is set to the object, here is a simplified wording, the wording is complete router: router, if the key / value exactly, it can be abbreviated.

6. Declare a component App, App at the beginning of this component has been imported into the project, but the direct import of components can not directly use, it must be declared.

7. template defines a page template, the content of the upcoming App component to render '#app' in the div.

So, you can guess, the definition of the results page after a successful start of the project, seen in the App.vue

        

1. App.vue vue is a component, this component contains three parts: 1 page template (template); 2 page script (script); 3 page styles (style)...

2. Page template defines the HTML elements of the page, where the definition of the two, one is a picture, the other is a router-view

3. Page script is mainly used to implement the current page data initialization, event handling, etc. operations

4. Page Style is to beautify the operation for HTML elements of the page template

Additional explanation is needed, router-view, this refers to the location to show the route of the page, it can be understood as simply a placeholder, the placeholder to show the contents will be determined according to the current specific URL address. Display specific content, to refer to the routing table, i.e., router / index.js file as follows:

       

1. This document, first introduced Vue objects, Router HelloWorld objects and components,

2. Creating a Router objects, and define the routing table

3. Defined herein routing table, path is  / , as HelloWorld corresponding component, i.e., the address of the browser  / , the display assembly HelloWorld router-view position

 

 

 

Vue project Once created, using the Web Storm open the project, the project directory as follows:

 

 

 

1. build folder used to store the project build script

2. Some basic configuration information stored in config items, the most commonly used is the port forwarding

3. node_modules This directory is all dependent projects, namely npm install command files downloaded

4. This project src directory to store source code that developers write code in here

5. static resources used to store static

6. index.html is the project home page, portal page, but also the entire project only HTML pages

7. package.json defines all dependent projects, dependent and dependent on the release include the development time

对于开发者来说，以后 99.99% 的工作都是在 src 中完成的，src 中的文件目录如下：

 

 

 

1. assets 目录用来存放资产文件

2. components 目录用来存放组件（一些可复用，非独立的页面），当然开发者也可以在 components 中直接创建完整页面。

3. 推荐在 components 中存放组件，另外单独新建一个 page 文件夹，专门用来放完整页面。

4. router 目录中，存放了路由的js文件

5. App.vue 是一个Vue组件，也是项目的第一个Vue组件

6. main.js相当于Java中的main方法，是整个项目的入口js

main.js 内容如下：

          

1. 在main.js 中，首先导入 Vue 对象

2. 导入 App.vue ，并且命名为 App

3. 导入router，注意，由于router目录下路由默认文件名为 index.js ，因此可以省略

4. 所有东西都导入成功后，创建一个Vue对象，设置要被Vue处理的节点是 '#app'，'#app' 指提前在index.html 文件中定义的一个div

5. 将 router 设置到 vue 对象中，这里是一个简化的写法，完整的写法是 router:router，如果 key/value 一模一样，则可以简写。

6. 声明一个组件 App，App 这个组件在一开始已经导入到项目中了，但是直接导入的组件无法直接使用，必须要声明。

7. template 中定义了页面模板，即将 App 组件中的内容渲染到 '#app' 这个div 中。

因此，可以猜测，项目启动成功后，看到的页面效果定义在 App.vue 中

        

1. App.vue 是一个vue组件，这个组件中包含三部分内容：1.页面模板（template）；2.页面脚本（script）；3.页面样式（style）

2. 页面模板中，定义了页面的 HTML 元素，这里定义了两个，一个是一张图片，另一个则是一个 router-view

3. 页面脚本主要用来实现当前页面数据初始化、事件处理等等操作

4. 页面样式就是针对 template 中 HTML 元素的页面美化操作

需要额外解释的是，router-view，这个指展示路由页面的位置，可以简单理解为一个占位符，这个占位符展示的内容将根据当前具体的 URL 地址来定。具体展示的内容，要参考路由表，即 router/index.js 文件，该文件如下：

       

1. 这个文件中，首先导入了Vue对象、Router对象以及 HelloWorld 组件，

2. 创建一个Router对象，并定义路由表

3. 这里定义的路由表，path为 / ，对应的组件为 HelloWorld，即浏览器地址为 / 时，在router-view位置显示 HelloWorld 组件