@vue project structure analysis

create by db on 2019-1-10 16:28:10

Recently revised in 2019-1-15 11:46:47

Hello friends, if you think this article is good, please give a thumbs up or a star, your thumbs up and star are my motivation! Making the address

Refer to many online materials, and combined with their own learning experience, write down this Vue learning notes, to record their own learning experience. Now share to you, for reference.

As a front end rookie, this is the fifth article I’ve shared with the Nuggets. If there is any deficiency, please give me more advice, thank you.

preface

In the last project Builder article, we downloaded and installed the Node environment and vuE-CLI, and we have successfully built a VUe-CLI project — see VUE White Lesson (1) — CLI Builder Project (vue2.x). So, let’s take a look at the vue-CLI project structure.

References:

• Vue – cli primer (2) – | think no – Reachel project structure
• Vue – Vue program created cli and comb configuration file | think no – AshleyLv
• Vue series WebPack and Eslint | charging practice

The body of the

Overview of Vue project structure

├ ─ ─ build -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the project build (webpack) related configuration files, configuration parameters, Generally not │ ├ ─ ─ build. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- webpack packaging configuration file │ ├ ─ ─ check - versions. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Check the NPM, nodejs version │ ├ ─ ─ dev - client. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to set up the environment │ ├ ─ ─ dev - server. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- to create express server, configure the middleware, start the server can be heat overload, Used for development projects │ ├ ─ ─ utils. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- configuration resource path, Configuration CSS loader │ ├ ─ ─ vue - loader. Conf., js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- configuration CSS loaders and other │ ├ ─ ─ webpack. Base. Conf. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- webpack basic configuration │ ├ ─ ─ webpack. Dev. Conf., js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- used to develop the webpack set │ ├ ─ ─ Webpack. Prod. Conf. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- for packaging webpack set ├ ─ ─ the config -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- configuration directory, Including port numbers. We can start with the default. │ ├ ─ ─ dev. Env. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the development environment variable │ ├ ─ ─ index. The js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- project configuration file │ ├ ─ ─ the prod. The env. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- production environment variable │ ├ ─ ─ test. The env. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- test environment variable ├ ─ ─ node_modules -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- NPM loading project depend on the module ├ ─ ─ the SRC -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- we want to develop directory, basically have to do things in this directory. │ ├ ─ ─ assets -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- a static file, put some pictures, such as logo │ ├ ─ ─ components -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - component directory, where component files, You don't have to. │ ├ ─ ─ main. Js -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the main js │ ├ ─ ─ App. Vue -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- project entry components, we can also directly to the component to write here, Instead of using the Components directory. │ ├ ─ ─ the router -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- routing ├ ─ ─ the static -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- static resource directory, such as images, fonts, etc. ├ ─ ─. Babelrc -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the Babel configuration file ├ ─ ─ the editorconfig -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the editor configuration ├ ─ ─ . Gitignore -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- configure git ignorable file ├ ─ ─ index. The HTML -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- page entry documents, You can add some meta information or statistical code or something. ├ ─ ─ package. Json -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the node configuration file, Records that some commands and relying on information and brief project description ├ ─ ─ the README. Md -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- the project documentation, markdown format. How do you want to write? If you don't know how to write, just refer to the project on Github where there are many starsCopy the code

In the webpack configuration file, main.js is set as the entry file, and our project will access index.html by default. In this file, the

and the app. vue component container perfectly overlap, that is, the component is mounted to the index page. Then we just need to build other components, and in the App component we can also import, register, apply other components, we can render other components in the App component by routing, so we just need to focus on the functionality of each component.

mounts the main component app. vue, and all other sub-components (hello.vue, etc.) fall under the main component app. vue.

Detailed explanation of main documents

SRC — [Project core file]

In vue-CLI projects, the SRC folder is a must because basically everything you do is in this directory.

Index.html – [home]

Index.html is just like any other HTML, but generally defines an empty root node under which instances defined in main.js are mounted, and the content is populated by vue components

      
<html>
  <head>
    <meta charset="utf-8">
    <title>vuedemo</title>
  </head>
  <body>
      <! -- Vue instances defined will be mounted under the #app node -->
    <div id="app"></div>
  </body>
</html>
Copy the code

App.vue — [Root component]

A VUE page usually consists of three parts: template, JS (Script), and style.

<! -- -- -- > templates
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
  </div>
</template>

<! -- script -->
<script>
export default {
  name: 'app'
}
</script>

<! - style -- -- >
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copy the code

“Template”

The template can contain only one parent, which means that the top div can have only one parent (for example, the #app div has no siblings).

is the child routing view, where the following routing pages are displayed

To use an analogy, a

is like a slot in which pages from a route are rendered

“Script”

Vue is usually written in ES6 and exported with Export Default. The following vUE can contain data, life cycle (Mounted), methods, etc. Please refer to the vue.js document for the syntax.

“Style”

Styles are wrapped in the style tag, which is global by default. To define scopes that only apply to this component, add scoped to the tag.

<style scoped></style>

To import external CSS files, install the CSS-loader dependency package for the project, open CMD, enter NPM install CSS-loader, and press Enter.

Once installed, you can import the required CSS files under the style tag, for example:

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

Copy the code

Main.js — [entry file]

Main.js introduces the vue framework, root components and routing Settings, and defines the vue instance. Components :{App} is the root component app.vue introduced

You can also introduce plug-ins later, but you have to install them first.

/* Introduce vue framework */
import Vue from 'vue'
/* Import the root component */
import App from './App'
/* Import route Settings */
import router from './router'

/* Close the prompt given in production mode */ 
Vue.config.productionTip = false

/* Define instance */ 
new Vue({
  el: '#app',
  router,
  template: '<App/>'.components: { App }
})
Copy the code

Router — [router configuration]

Vue-router is the official routing plug-in of vue.js. It is deeply integrated with vue.js and suitable for building single-page applications. The single-page application of VUE is based on routing and components, which are used to set access paths and map paths to components.

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

/* Introduce vue framework */
import Vue from 'vue'
/* Import route dependency */
import Router from 'vue-router'
/* Introduces a page component named Hello*/ 
import Hello from '@/components/Hello'

/* Use route dependency */ 
Vue.use(Router)

/* Define the route */ 
export default new Router({
  routes: [{path: '/'.name: 'Hello'.component: Hello
    }
  ]
})
Copy the code

The route with path ‘/’ is defined here, and the page corresponding to the route is the Hello component, so we render the Hello component when we visit http://localhost:8080/#/ at the browser URL

Similarly, we can set multiple routes,’/ index ‘,’/list’ and so on, importing the component first and then setting the route for it.

Other Configuration Files

This includes webpack configuration, project configuration, project dependencies, and so on.

Please refer to the following articles for details:

• Vue – Vue program created cli and comb configuration file | think no – AshleyLv

Vue template file

This is a Vue template file I made myself, which conforms to Eslint rules

<! -- -->
<template>
  <div/>
</template>

<script>
// Other files can be imported here (e.g. component, tool JS, third-party plug-in JS, JSON file, image file, etc.)
// For example: import component name from 'component path'

export default {
  // import imported components need to be injected into objects before they can be used
  components: {},
  data() {
    // Where to store data
    return{}},// The listener property is similar to the data concept
  computed: {},
  // Monitor changes in data
  watch: {},
  // Life cycle - creation complete (access to the current this instance)
  created() {

  },
  // Lifecycle - Mount complete (DOM element accessible)
  mounted() {

  },
  beforeCreate() {}, // Life cycle - before creation
  beforeMount() {}, // Lifecycle - before mount
  beforeUpdate() {}, // Lifecycle - before update
  updated() {}, // Life cycle - after update
  beforeDestroy() {}, // Life cycle - before destruction
  destroyed() {}, // Lifecycle - Destruction is complete
  activated() {}, // This function is triggered if the page has keep-alive caching
  // Set of methods
  methods: {

  }
}

</script>
<style lang='less' scoped>//@import url(); Introduce common CSS classes</style>
Copy the code

conclusion

Vue-cli provides great convenience for creating VUE projects. However, at the same time, the use of a large number of third-party libraries will make packaged JS become very large, so we still need to be familiar with the configuration, familiar with the use of third-party plug-ins, can develop more efficient development of Web applications. Here vuE-CLI some relevant content to make a summary for yourself, easy to refer to later. Also hope to help other developers. Please correct any deficiencies.

The road ahead is long, and I see no end.

I wish you all a better 2019!

Postscript: Hello friends, if you think this article is good, remember to give a thumbs-up or star, your thumbs-up and star is my motivation to write more and richer articles!Making the address

dbThe document library 由 dbusingCreative Commons Attribution – Non-commercial Use – Same way Share 4.0 International LicenseGrant permission.

Based on thegithub.com/danygitgitOn the creation of works.

Use rights other than those authorized by this License agreement may be obtained fromCreativecommons.org/licenses/by…Obtained.