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

前言

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

构建过程

vue-cli起项目

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

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

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

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

  

eslint配置

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

  

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

  

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

scss配置

• 一、安装node-sasscnpm install --save-dev node-sass、sass-loadercnpm install --save-dev sass-loader。
• 二、而后再安装一下全部依赖cnpm install(由于包的安装顺序会有影响，因此先把须要的包保存到package.json，而后让他自动安装一遍)
  安装好以后就能够用scss的语法写样式文件了
• 三、配置webpack中scss文件的解析规则
  配置好就能够新建带‘.scss’后缀、使用scss语法的样式文件了。

  

vuex配置

• 一、安装vuex cnpm install --save vuex
• 二、配置vuex以下图

  

  

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

axios配置

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

  

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

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

移动端项目开发

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

scss实践

• 一、创建如图文件层级结构
  

  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;等

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

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

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

咱们能够初步把组件分为三类：根组件、页面组件、其余组件：

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

结语

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