vue项目实践1——构建项目

前言

本文是一篇实践文，详细记录移动端vue项目构建全过程，其中包括webpack、vue-router、axios、eslint、scss等的相关配置。
github地址：https://github.com/sunhuili/v...

构建过程

vue-cli起项目

• 1、下载安装node、git-bash、cnpm。

这里用的node是8.9.3版本，之前8.1的版本会有点问题，建议升级到最新可用版本。cnpm跟npm功能一样，npm装不了的包，可以用cnpm。

• 2、全局安装vue-cli npm install vue-cli -g
• 3、使用vue-cli快速搭建vue项目 vue init webpack xxx (xxx为项目名)
• 4、如下图会有一些选项
  a>名字、描述、作者直接回车即可（当然也可修改）
  b>vue-router默认安装，直接回车
  c>eslint建议安装，用来约束代码规范的。可以选第三个选项‘none’，之后自定义用vue的约束规范。
  d>unit tests和e2e tests都是测试的，这里没有启用，如果需要可以按需启用。
  e>然后装一下依赖就配好了（可以直接回车自动安装，也可手动安装 npm install）,安装时间有点久，耐心等待……
  

  f>出现如下图就安装好了，到项目文件夹下npm run dev，打开浏览器输入对应路由就可以看到自己的网站了。
  

  

eslint配置

• 1、安装eslint-plugin-vue cnpm install --save-dev eslint eslint-plugin-vue，传送门
• 2、引用eslint-plugin-vue规范，如下图所示：

  

• 3、相关知识点展开
  关于eslint-plugin-vue
  a>这里只需改两个地方即可。root这些eslint-plugin-vue本身已经配过了，不过跟这里的配置不冲突，就可以先不改。
  b>eslint-plugin-vue本身提供了四种模式，建议新手从essential入手，之后可以升级。
  c>eslint-plugin-vue已经详细介绍了各个模式的用途，以及具体的限定规则，可以没事看两眼，当然也可以翻源码……

  

  关于自定义规则
  在刚刚引用eslint-plugin-vue的文件中有个rules，在这里就可以添加我们自定义的规范。具体的规范设置：eslint中文。

scss配置

• 1、安装node-sasscnpm install --save-dev node-sass、sass-loadercnpm install --save-dev sass-loader。
• 2、然后再安装一下所有依赖cnpm install(因为包的安装顺序会有影响，所以先把需要的包保存到package.json，然后让他自动安装一遍)
  安装好之后就可以用scss的语法写样式文件了
• 3、配置webpack中scss文件的解析规则
  配置好就可以新建带‘.scss’后缀、使用scss语法的样式文件了。

  

vuex配置

• 1、安装vuex cnpm install --save vuex
• 2、配置vuex如下图

  

  

  a> strict严格模式，有利于代码规范和数据管理
  b> modules可以加入子模块，建议尽量把数据存在子模块中，主入口保持干净，只做配置用。子模块的配置统一在‘文件层级’一节中将，这里只做初步配置。

axios配置

• 1、安装axios cnpm install --save 'axios'
• 2、配置axios如下图，axios的配置分为三部分：全局配置、请求拦截、响应拦截

  

  a>全局配置包括请求时长限制、后端接口处理文件路径、请求头配置等
  b>请求拦截：发请求前进行一些处理
  若请求配置成功，则对post请求参数做序列化处理，然后发请求
  若请求配置不成功，则不发请求
  c>响应拦截：接收后端响应前进行一些处理
  若成功，则表示限定时间内收到了后端响应，即“响应成功”，返回resolve(response.data)。
  若失败，则表示限定时间内没有收到后端响应，即“响应失败”，返回reject(error)。
  d>针对响应成功，还有请求成功和请求失败之分，这个由前后端约定执行，在api的配置中实现，这里只配置axios相关。

至此，构建项目的相关配置和依赖包已基本安装配置完毕，其他的配置按需自取。接下来开始搭建项目，使用当前配置进行移动端web开发

移动端项目开发

首先先看一下当前的目录结构和package.json(只截取依赖包部分，部分构建项目时自动安装的依赖包没有截取到)，因为接下来将在现有配置的基础上开发移动端项目，重点在于文件层级结构的搭建。

scss实践

• 1、建立如图文件层级结构
  

  a>_reset.scss为移动端样式(网上直接可以搜到)，在App.vue中引入该文件;
  b>在index.html中配置好各种移动端meta属性，然后设置html、body、#app高为100%;
  c>main.js中引入移动端flexible布局，可以以iphone为基准：375的宽度1rem=20px。
  d>_variable.scss为全局样式参数配置，如主题色$theme-color-black: #333333;等

• 2、vue组件中使用scss：只需在style中加入lang=“scss”即可使用scss语法。
• 3、sass详情：sass中文、sass入门

文件层级:components、vue-router、vuex、scss

首先明确两点
1、vue-router、vuex、scss的文件层级跟着组件的文件层级走。
2、组件的文件层级依照项目的功能模块划分。
在此基础上我们可以建立如下文件层级结构，尽量让根目录足够干净，文件尽量收录在对应的具体模块文件夹中。
这样可以让文件层次够清晰，方便直接找到功能配置和具体业务代码，这对之后的维护影响还是很大的。

我们可以初步把组件分为三类：根组件、页面组件、其他组件：

• 根组件："src/App.vue"，我们的vue项目开发最终都会汇集到App.vue，编译后替代index.html中的“#app”标签。进入网站后先进入main.js、到App.vue，然后再到各个自定义组件，执行对应的事件。
• 页面组件："src/view文件夹内的组件，每个组件都对应一个单独的页面，同样的就要在router文件夹下建立对应的路由。编译后替代App.vue中的<router-view/>。
• 其他组件：src/components文件夹内的组件，通指比页面组件要次级的组件，作为模块被引用。又可分为模块组件、公用组件、基础组件。
  1、模块组件：components/modules文件夹中，被页面组件作为模块引入，实现页面组件中代码量大、模块化程度高、跟页面内其他部分交互不多的部分。
  2、公用组件：components/public文件夹中，被页面组件、模块组件引入，实现项目中复用性强、模块化程度高、有明确可控交互需求的部分。
  3、基础组件：components/basic文件夹中，被其他组件引入，实现web开发中通用、模块化程度高、有明确可控交互需求的部分。

结语

本文详细介绍了移动端vue项目构建全过程，方便新手体验完整流程，具体页面搭建就是堆积木了。关于接口配置部分仍在研究，这部分需要后端接口支持、以及多种情况的实验，等什么时候研究透了再详细写一下。