必经之路·基于vue的项目搭建

• 前言
• 项目构建说明
  • 包管理器的选择及配置相关文件
  • 预处理器
  • 框架UI
  • eslint规范代码
  • 移动端适配问题
  • 减少打包体积
  • 网络请求
  • 静态图片采用svg
• 状态管理模式
• 托管项目中全局数据
• 数据与组件分离
• 项目运行指令
• 项目仓库代码

前言

日常的开发中，我们大部分时间可能迭代需求或是修改bug，很难接触到从0搭建项目，但是无法避免的临时搭建。搭建、配置并且扩展性强的项目，其实很重要，会在以后开发、迭代、扩展场景上会很能体现出好处。下面来总结下，临时搭建项目应该注意的事项。

项目基于vue搭建

项目构建说明

包管理器的选择及配置相关文件

• 本项目采用yarn包管理器代替npm，为什么使用yarn和下载。
• 项目使用 vue-cli 的3.8.4版本创建，项目构建初始化安装vuex，vue-router，node-sass，scss，babel，eslint模块。后续业务新增需求，可自定义安装相关依赖模块。
• 最新脚手架创建项目采用了零配置理念，故新增配置文件( vue.config.js，.env.test，.env.production，.env.development),一般常用三种环境，若多个环境可自定义。

预处理器

根据个人喜好，使用预处理器。常用预处理器三种，sass、less、stylus。

个人偏向使用sass，初始化安装sass会自动安装sass-loader 和 node-sass。或已初始化，手动使用命令安装 yarn add sass-loader node-sass -D。就可以使用sass的 使用变量 、优美的嵌套规则和 混合器等等。具体可参考 官方文档了解。

框架UI

根据项目场景，自定义UI框架。个人喜好，移动端使用有赞的vant，PC端使用饿了么的element框架。

本实例使用有赞的移动端框架vant，安装vant、babel-plugin-import模块，babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式，以减少代码体积和冗余模块。

1.安装运行命令 yarn add vant和 yarn add babel-plugin-impor -D。
2.在babel.config.js中，配置按需引入代码

eslint规范代码

初始化安装项目后，会生成一个 .eslintrc.js文件，若个人喜好代码风格，可在该文件内的rules属性配置。

• 更多个性化代码喜好，可参考代码
• 若英文不太好的童鞋，可参考这位老兄博客

注意： 鉴于多人开发，可能某一模块风格各异，可新增.eslintignore.js，忽略语法检查文件，以免多人项目习惯不同导致不同的基本代码规范不同。

移动端适配问题

1. 采用阿里的 lib-flexible 移动端解决方案，来设置rem基准值
2. postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem

需在vue.config.js内postcss内，配置相关参数，详见代码

减少打包体积

1. 在index.html配置各模式兼容问题，及vue.config.js打包生产环境使用兼容cdn，详见代码
2. 使用 compression-webpack-plugin 模块，解决打包体积过大等问题

需安装 compression-webpack-plugin 模块

网络请求

1. 采用axios 模块，来进行发起服务器端请求
2. 网络请求封装，约定基础请求与业务线接口分开，详见代码

需安装 axios 模块

静态图片采用svg

1. svg为矢量图，缩放不失真
2. 减少静态资源体积
3. 具体配置，参考项目代码

需安装 svg-sprite-loader 模块，详情 可参考这位老兄

状态管理模式

状态管理也或叫是数据共享池或叫仓库。事实证明，项目中越来越常用数据管理。你可能利用公交车bus事件（on,emit), 或是props传值，也或是H5的storage存储等等，当然可以达到组件间的传值，但很会杂乱的值的变化，无法有效的跟踪，而vuex很好的做到这点。 vue的传值方式，可预览我写的 花里胡哨的vue传值

故搭建新项目，都会使用vuex来管理数据，只是使用程度、模式不一致而已，vuex文档。

托管项目中全局数据

将 token（用户凭证）、device（设备环境）地理位置、城市等等，全局使用的、且独立的数据存放于仓库，便于取，有记录的存，有条理性记录公共的数据变化。这种方式也就是store(仓库)托管全局、共享的数据.

vuex项目结构，详见仓库代码

数据与组件分离

与上述方法相同，使用vuex，数据托管于store（仓库）。与此区分的是，将数据model脱离组件书写，数据操作统一vuex来管理，而组件侧重点页面、样式、交互逻辑编写。具体点就是，接口数据及交互数据统一管理存放于store中，通过action来异步更新数据。store的模块结构显得由外的重要的。

vuex项目结构，详见仓库代码

项目运行指令

• 安装依赖

yarn 或 yarn install

• 运行项目

yarn run serve

• 打包测试

yarn run build:test

• 打包正式

yarn run build

• 运行测试单元

yarn run test

• 格式化代码（规范代码）

yarn run lint

项目仓库代码

• 全局共享数据托管，仓库代码
• 数据（model层）与组件书写脱离，仓库代码

生活寄语

春雨如酒

爱代码，爱生活