vue项目搭建（技术专栏-vue项目搭建）

此样板为基于Vue2.0的移动web项目搭建方式1、Vue Vue-cli Vue-router Vuex axios 采用vue全家桶完成整个项目的（1.项目构建工具、2.路由、3.状态管理、4.http请求工具）核心构成*开发注意 1、keep-alive 使用 切换出去的组件保留在内存中，可以保留它的状态和内容避免重新渲染，缓存ajax请求2、路由懒加载 基于官网推荐的方式创建出来的路由结构当打包构建应用时，Javascript 包会变得非常大，影响页面加载路由懒加载则是把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效的渲染页面，提升首屏性能和用户体验，今天小编就来说说关于vue项目搭建?下面更多详细答案一起来看看吧!

vue项目搭建

此样板为基于Vue2.0的移动web项目搭建方式。1、Vue Vue-cli Vue-router Vuex axios 采用vue全家桶完成整个项目的（1.项目构建工具、2.路由、3.状态管理、4.http请求工具）核心构成。*开发注意 1、keep-alive 使用 切换出去的组件保留在内存中，可以保留它的状态和内容。避免重新渲染，缓存ajax请求。2、路由懒加载 基于官网推荐的方式创建出来的路由结构当打包构建应用时，Javascript 包会变得非常大，影响页面加载。路由懒加载则是把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效的渲染页面，提升首屏性能和用户体验。

前言

此样板为基于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/

image.png

,