vueDemo 简单vue-cli使用

关于vuecli项目的构建详情可查看我的另一篇文章：构建vue项目 has no title attribute.

项目结构

转载于:https://segmentfault.com/a/1190000007880723
.
|-- 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. index.html作为程序的入口，一般里面只放置一个id=app的div，在实现中，填充div内容
2. main.js 程序入口文件，加载各种公共组件，其中绑定了<div 'id=app`></div>所以就实现了上面所说的忘div中填充代码。
3. src：放置我们项目的主要代码，主要为各组件代码,在我们创建一个vuecli项目时里面都会有我们默认的hello.vue组件

src
|  |--component
|------|hello.vue

4. router
   即使我们没有需要用到vue-router插件的地方，router这个文件夹也是必须的。
   在创建完cli项目后，可以看到router>index.js文件中有如下内容，path:'/'可以看出，导入的这个组件将会是我们运行项目时首先向我们展示的界面。
   当如path:'/main'时，我们可以理解问windows下的资源管理器，我们通过路由的这一方式，进入到了下一个页面。

//主要配置我们的路由
router
|  |--index.js
  routes: [
    {
      path: '/',
      name: 'hello',
      component: hello
    }
]

5. App.vue 页面的入口文件，一般无需做太大修改