vue项目搭建

前言

此样板为基于Vue2.0的移动web项目搭建方式。

项目构成

Vue+Vue-cli+Vue-Router+Vuex+axios+flexible.js+mint-ui+stylus

1、Vue+Vue-cli+Vue-Router+Vuex+axios

采用vue全家桶完成整个项目的（1.项目构建工具、2.路由、3.状态管理、4.http请求工具）核心构成。

2、flexible.js

采用手淘的适配方案（flexible.js）做手机适配

3、mint-ui

采用mint-ui作为项目的ui风格库

4、stylus

采用stylus作为项目css预处理工具。

一、项目框架结构和文件目录结构

通过vue-cli创建好一个基于vue+webpack的项目。结构如下所示：

├── README.md // 项目说明文档
├── node_modules // 项目依赖包文件夹
├── build // 编译配置文件
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 项目基本设置文件夹
│ ├── dev.env.js // 开发配置文件（开发环境）
│ ├── index.js // 配置主文件
│ └── prod.env.js // 编译配置文件 （生产环境）
├── index.html // 项目入口文件
├── package-lock.json // npm5 新增文件，优化性能
├── package.json // 项目依赖包配置文件
├── src // 我们的项目的源码编写文件
│ ├── common // 项目公共资源及工具函数目录
│ │ └── fonts 字体图标文件
│ │ └── images 公共图片文件
│ │ └── js 公共js方法文件
│ │ └── stylus 公共css样式文件
│ ├── components // 组件目录
│ ├── filters //全局过滤器
│ ├── http //http请求配置文件
│ ├── pages //项目页面目录
│ ├── router //路由配置文件
│ ├── store //状态管理 vuex配置目录
│ ├── App.vue // APP入口文件
│ ├── main.js // 主配置文件
└── static // 静态资源放置目录 （第三发插件）

下面详细讲解下这个项目解构：

build/

    此目录包含开发服务器和生产webpack构建的实际配置。 通常不需要触摸这些文件

config/index.js

    这是显示构建设置的一些最常见配置选项的主配置文件。


static/

    此目录是不想使用Webpack进行处理的静态资源的一个逃生舱口。 它们将直接复制到生成webpack建立资产的同一个目录中。

index.html

     这是我们的单页应用程序的模板index.html。 在开发和构建期间，Webpack将生成资产，并将生成的资产的URL自动注入到此模板中以呈现最终的HTML。

package.json

    包含所有构建依赖项和构建命令的NPM软件包元文件。

src/

    这是应用程序代码所在的位置。

src 目录

├── src // 我们的项目的源码编写文件
│ ├── common // 项目公共资源及工具函数目录
│ │ └── fonts // 字体图标文件
│ │ └── images // 公共图片文件
│ │ └── js //公共js方法文件
│ │ └── stylus // 公共css样式文件
│ ├── components // 组件目录
│ │ └── footerBar //首页底导航
│ │ └── hotArticleList //法律头条列表
│ │ └── loginModel //登陆框组件
│ │ └── msg //聊天页组件
│ │ └── scroll //滑动组件
│ │ └── SocketNotify //webSocket 组件
│ │ └── star //评分组件
│ │ └── topBar //头导航及侧边栏 组件
│ │ └── upload //图片上传／拍照上传组件
│ │ └── Unionpay / /银联支付
│ │ └── Alipay //支付宝支付组件
│ ├── filters //全局过滤器
│ │ └── fontWrap //全局过滤器方法
│ │ └── index //过滤器导出文件
│ ├── http //http请求配置文件
│ │ └── api // 接口调用文件
│ │ └── http //axios 配置文件
│ ├── pages //项目页面目录
│ ├── router //路由配置
│ │ └── router //路由配置文件
│ ├── store //状态管理 vuex配置目录
│ │ └── action //actions异步修改状态
│ │ └── getter //getters计算过滤操作
│ │ └── mutation-types //mutations 类型
│ │ └── mutations //修改状态
│ │ └── index //我们组装模块并导出 store 的地方
│ │ └── state //数据源定义
│ ├── App.vue // APP入口文件
│ ├── main.js // 主配置文件

*开发注意

1、keep-alive 使用
切换出去的组件保留在内存中，可以保留它的状态和内容。避免重新渲染，缓存ajax请求。

开启 keep-alive 后 vue 的生命周期也发生了变化
生命周期执行顺序： created-mounted-activated-deactivated
 使用keep-alive-之后
页面第一次载入执行created钩子  调用  一次接口
 路由切换再次进入。只在activated钩子中执行方法 不执行 created 和mounted，详情查文档。

2、路由懒加载
基于官网推荐的方式创建出来的路由结构当打包构建应用时，Javascript 包会变得非常大，影响页面加载。
路由懒加载则是把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效的渲染页面，提升首屏性能和用户体验。

基本方式
 import index from '../pages/index/index.vue'

=>
路由懒加载
const index = resolve => void(require(['../pages/index/index.vue'], resolve));

3、路由跳转 页面滚动到顶部 【main.js】

router.beforeEach((to, from, next) => {
    //每次调用路由前执行
    window.scrollTo(0, 0);
        next();
});

4`利用watch 监听滚动事件 为导航变色。

image.png