vue项目目录简介是看图雀社区文章，简单总结复制的。 vue项目应用入口，导入Vue类、App组件、router路由，加

简介：五个主要模块

是看图雀社区文章，简单总结复制的。

1、src/main.js

vue项目应用入口，导入Vue类、App组件、router路由，加el（dom元素element），将这些参数传给Vue类，生成一个Vue实力。

import Vue from 'vue';
import App from './App';
import router from './router';


Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
}

2、index.html

根据入口文件 src/main.js 里面声明的 el 属性（#app），找到 index.html 中 id 为app 的 DOM 节点
把编译好的视图模板代码挂载到这个 DOM 节点下面
将项目涉及的 JavaScript 和 CSS 代码以 script 和 link 的方式插入到 index.html 中
开启开发服务器，打开浏览器，进而浏览器将 index.html 渲染，我们就可以看到写好的 Vue 页面效果。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>vue-online-shop</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

3、src/App.vue 三部分组成，html-template、js-script、css-style

提示:

上面所讲的是比较小的组件的写法，当组件中涉及的代码较多时，我们需要把 script 和 style 抽成独立的 .js 和 .css 文件。就像下面这样：
<!-- ./src/App.vue -->
<template>
  <div id="app">
    <img src="./assets/hello.png">
  </div>
</template>
<script src="./app.js"></script>
<style src="./app.css"></style>

4、src/router/index.js Vue为我们提供的路由文件

提示
这里我们可以看到导入 HelloWorld 组件时，我们在路径最前面加上了 "@"，那是因为我们在 webpack 配置中将会 "@" 映射成 resolve('src')，也就是我们项目目录下 src 文件夹的路径，最后我们的 '@/components/HelloWorld' 的实际上的效果相当于取到了项目目录 src 文件夹里面的 components/HelloWorld 组件

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/views/HelloWorld'; // 同步加载组件

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/home.vue'), // 异步加载组件
    },
    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld,
    },
  ],
 });

import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
Vue.use(Router);
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
    },
  ],
});

5、src/components/HelloWorld.vue 三部分组成，html-template、js-script、css-style

总结：
•Vue 通过组件来组织项目，单个组件就是我们传统的 Web "三剑客"：HTML、JavaScript、CSS。
•Vue 通过路由来定义多个页面，并且进行页面之间的跳转。
•一个页面是一个组件，一个组件可以由很多组件组成，通过这种组合式的思想，我们可以编写任意复杂的项目