Vue目录结构和主要文件说明

Vue目录结构

vue-cli项目结构

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- dev-client.js                // 热重载相关
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相关
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- store                        // vuex的状态管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|   |-- data                         // 群聊分析得到的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- README.md                        // 项目说明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息

简要说明

1.package.json
功能类似于java中maven项目中的pom.xml文件，用来管理vue项目中的依赖信息。
package.json文件中的属性

version: 版本信息
name: 包名不能有中文,不能有空格, 不能有大写字母,不能有特殊字符！
description： 描述信息
author: 作者
keywords: 关键词 方便在npm网站上进行搜索
license: 开源协议 自己指定 scripts:
放的就是一些shell命令，这些命令可以通过 npm run 命令别名进行执行

2.build文件夹
文件夹下有如下内容：

build.js ：生产环境构建代码
check-version.js： 检查node npm 版本
utils.js： 构建工具相关
vue-loader.conf.js ：webpack loader设置 webpack.base.conf.js ：webpack基础配置
webpack.dev.conf.js： webpack开发环境设置，构建本地服务器
webpack.pro.conf.js：webpack生产环境配置

主要内容是build.js，可以参考https://www.cnblogs.com/cangqinglang/p/8854217.html去学习
3.config文件夹

dev.env.js 开发环境变量
index.js 项目配置文件
prod.env.js 生产环境变量
test.env.js 测试环境变量

其余目录为项目开发所需的目录。

项目主要文件

1.main.js 入口文件：

new Vue ({
  el:'#app',        //挂载到<div id="app"></div>上
  router,           //2、用router简写router：router, 1、import router from './router' 先引入router变量，路由：网址URL不同，返回内容不同
  components:{App}, //简写{App:App}, import App from './App'    App.vue文件
  template:'<App/>' //
})

2.App.vue 单文件组件

<template>
  <div id="app">
    <strong><router-view/>        //展示当前路由当前内容</strong>
  </div>
</template>

3.router/index.js 配置

export default new Router({
  routes:[
    path:'/',               //当访问跟路径时，组件是HelloWorld
    name:'HelloWorld', 
    components:HelloWorld //import HelloWorld from '@/compontents/HelloWorld',没有{}
  ]
})