[Vue] Detailed explanation of the directory structure of Vue-cli (scaffolding) (reproduced)

1. The figure briefly explains what each directory is for:

　　Overall framework: The project structure of a vue-cli is as follows, in which the src folder needs to be mastered, so this article also focuses on the files in it. As for other related files, just have a look.

Fourth, the file structure subdivision

　　1, build - [webpack configuration]

　　The build file is mainly the configuration of webpack. The main startup file is dev-server.js. When we enter npm run dev, the first thing to start is dev-server.js. It will check the node and npm versions, load the configuration file, and start the service.

　　2, config - [vue project configuration]

　　The config file is mainly related to the configuration of the project. What we commonly use is to configure the listening port when the port conflicts, package the output path and naming, etc.

 

　　3, node_modules - [dependency package]

　　Inside node_modules is the project dependency package, which includes many basic dependencies, and 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 two cases we will install the dependencies ourselves:

　　(1) The project operation lacks the dependency package: for example, the css-loader used by the project to load external css, the route jump vue-loader, etc. (example of installation method: npm install css-loader)

　　(2) Install plug-ins: such as vux (WEUI-based mobile component library), vue-swiper (carousel plug-in)

　　Note: Sometimes the specified dependency version is installed, and the version number information needs to be added after the name of the dependency package. For example, to install vue-loader of version 11.1.4, enter npm install [email protected]

　　4, src - [project core file]

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

 5. Detailed explanation of scaffolding code

 　　Let's take a look at the main files in the created project directory:

　　1. index.html——[homepage]

　　There is nothing to say about this, it is a simple html page, where id='app' is related to setting the vue scope later.

　　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 vue components

　　2. File: Hello.vue

　　Note: In the *.vue file, write html code in the template tag, and the direct child of the template can only have one tag. The style is written in the style tag, and the js code is written in the script.

3. File: App.vue - [root component]

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/> //这里是用来展示路由页面内容的，如果想用跳转就用<router-link to='xxx'></router-link>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<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>

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

　　【template】

　　The template can only contain one parent node, which means that the top-level div can only have one (for example, the div whose parent node is #app has no sibling nodes)

　　<router-view></router-view> is the sub-router view, and the following route pages are displayed here. To use an analogy, <router-view> is similar to a slot. When jumping to a route, the page under the route will be inserted into this slot and rendered and displayed.

　　【script】

　　Vue is usually written in es6 and exported with export default. It can contain data data, life cycle (mounted, etc.), methods (methods), etc. For the specific syntax, please refer to the vue.js document, and I will use examples to illustrate it later. .

　　【style】

　　The style is wrapped by the style tag <style></style>, which affects the global by default. If you want to define the scope to only work under this component, you need to add scoped to the tag, <style scoped></style>

　　To import external css files, 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 tag, for example:

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

　　In this way, we can encapsulate the styles under the style, write them into the css folder, and then introduce them into the page for use, and the entire vue page looks more concise.

　　4. File: main.js——[entry file]

　　This js file is the main entry for the main page configuration. Mainly using the modular introduction template of ES6

　　main.js mainly introduces the vue framework, root components and routing settings, and defines the vue instance. The components:{App} in the following code is the introduced root component App.vue

　　You can also introduce plug-ins later, of course, you have to install plug-ins first.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' // 引入vue文件
import App from './App'// 引入同目录下的App.vue模块
import router from './router'// 引入vue的路由

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',//定义作用范围就是index.html里的id为app的范围内
  router,//引入路由
  components: { App },//注册引入的组件App.vue
  template: '<App/>'//给Vue实例初始一个App组件作为template 相当于默认组件
})

　　5. router——[routing configuration]

　　Under the router folder, there is an index.js, which is the routing configuration file

import Vue from 'vue'  //引用vue文件
import Router from 'vue-router'  //引用vue路由模块，并赋值给变量Router
import HelloWorld from '@/components/HelloWorld'  //英文HelloWorld.vue模版，并赋值给变量HelloWorld,这里是“@”相当于“../”

Vue.use(Router)  //使用路由

export default new Router({
  routes: [  //进行路由配置，规定“/”引入到HelloWorld组件
    {
      path: '/',
      name: 'HelloWorld',  //这个name暂时不知道用啥用，根据官方文档说的是方便排错的
      component: HelloWorld  //注册HelloWorld组件
    }
  ]
})

The route with the path '/' is defined here, and the page corresponding to this route is the HelloWorld component, so when we access http://localhost:8080/#/ in the browser url, the Hello component is rendered

　　Similarly, we can set up multiple routes, such as '/index', '/list', etc. Of course, we must first import the component, and then set the route for the component.

　　Note: If you need to add components, define the xx.vue file under the components file and write the code; if you need to configure the routing, you need to configure the routing "path" in index.js; you also need to click the jump to use < router-link></router-link> tag.

Thanks to the original author for the detailed explanation, this article is reproduced from: Vue scaffolding (vue-cli) construction and directory structure detailed explanation -cli scaffolding build tool, open the command line tool and enter: npm install vue-cli -g, after the installation is complete, enter vue -V ( https://www.cnblogs.com/goloving/p/8693189.html