vue项目使用cli手脚架搭建的时候要开发的步骤和注意事项

该项目总结是我的公司同事写的，很完整，也一幕了然

Vue项目开发文档

 
目录 1. 技术学习.............................................................................................................................................................................................. 2
1.1 前期准备................................................................................................................................................................................. 2
1.2 相关技术文档......................................................................................................................................................................... 2
1.3 ES6的学习............................................................................................................................................................................. 3
2. 程序入口.............................................................................................................................................................................................. 4
2.1 基本配置................................................................................................................................................................................. 4
2.2 多项目配置整合.................................................................................................................................................................... 5
3. 项目配置文件及组件的复用.......................................................................................................................................................... 5
4. 别名的使用.......................................................................................................................................................................................... 6
5. 路径说明.............................................................................................................................................................................................. 6
6. 项目结构详解..................................................................................................................................................................................... 7
6.1 增加新项目的开发步骤....................................................................................................................................................... 7
6.2 项目结构与文件解读........................................................................................................................................................... 8
7. 数据缓存.............................................................................................................................................................................................. 9
7.1  Store....................................................................................................................................................................................... 9
7.2 Cookie..................................................................................................................................................................................... 10
7.3 localStorage、sessionStorage........................................................................................................................................ 10
7.4 变量........................................................................................................................................................................................ 10
7.5 apollo缓存............................................................................................................................................................................ 10
8. HTTP请求方式................................................................................................................................................................................. 11
8.1 Axios....................................................................................................................................................................................... 11
8.2 Vue-Apollo............................................................................................................................................................................. 11
 
 
 
 
 
 
 
 
 
 
 
 

1. 技术学习

1.1 前期准备

Node.js环境安装，webpack打包工具请自行学习，简单了解即可。
NPM是随同NodeJS一起安装的包管理工具
注意一个问题，刚从github/SVN上clone下来是没有node_modules的，需要安装，那么根据什么信息安装依赖呢？就是package.json中的dependencies和devDepencies。所以，在本地安装的同时，将依赖包的信息（要求的名称和版本）写入package.json中是很重要的！
npm install 模块：安装后不写入package.json中
npm install 模块 --save 安装后写入package.json的dependencies中（生产环境依赖）
npm install 模块 --save-dev 安装后写入package.json的devDepencies中（开发环境依赖）
删除本地模块 uninstall
 
直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
$ npm install -g cnpm--registry=https://registry.npm.taobao.org
这样就可以使用 cnpm 命令来安装模块了：
$ cnpm install [name]

1.2 相关技术文档

element文档：我们采用的是vue和element结合的方式开发，element是饿了么开发的一套前端框架，以标签的形式混入到vue组件中（包括了页面布局、表单、表格等，类似于bootstrap）
网站链接：http://element-cn.eleme.io/#/zh-CN/component/form
 
Vue.js文档： 学习难度较大，内容也较多。下面列举一些关键的部分：
data: Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value对)
props: 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
Methods: 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 this 自动绑定为 Vue 实例。
Watch: 一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用$watch()，遍历 watch 对象的每一个属性。
Vue的生命周期钩子- created ：在实例创建完成后被立即调用。
实例属性/方法/时间vm.$refs 、vm.$watch、vm.$on、vm.$emit、vm.$nextTick
所有vue指令以及内置组件component
路由的使用： https://router.vuejs.org/zh-cn/essentials/dynamic-matching.html

1.3 ES6的学习

在此系统框架中，es6的使用相当广泛，熟练使用es6语法对前端开发来说是必不可少的。按照惯例，简单列一个提纲：
l  Promise 这可谓是重中之重了，它用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。结合async,await语法糖使用，能高效的控制异步操作的有序执行。
l  && || 的使用，大多数情况下能代替if else的使用，这可以使代码变得更加简洁易读，这个看个人习惯使用。起步时有一定难度，需要反复测试，保证代码的正确性。
l 箭头函数的使用：https://blog.csdn.net/yangbingbinga/article/details/61424363
l  数组和对象的操作，重点敲黑板！
l  数组：forEach() 、map()、filter()、some()、every()这五个方法比较常用，具体请看该文章：http://blog.csdn.net/tang15886395749/article/details/65629898
    数组遍历、数组拆分比较简单，自行百度。
l  对象：其中最实用的一个方法 -- 数据拷贝 Object.assign(target, …sources):把任意多个的源对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。和
JSON.parse(JSON.stringify(source)) 的作用相当，常用来解耦和解冻。
解耦：对象间的赋值操作存在引用传递，拷贝可以解除耦合。
解冻：在某些情况下（gql请求返回的数据），数据为冻结状态，即不可扩展和修改属性。
 
 

2.  程序入口

<
118ea
a>2.1 基本配置

找到根路径下的package.json文件，其中scripts部分，通过npm run 命令启动
若是用webstrom开发，打开侧边npm模块 双击对应选项即可，如下图所示
指令说明：
cross-env 用于向进程传递变量，后面直接跟多个变量名=值 的形式。
Webpack的官网配置：https://webpack.js.org/configuration/dev-server/#devserver-inline
webpack-dev-server： 用于开发环境的启动
--Inline： dev-server的两种默认刷新模式之一 ，默认为inline。
--progress ：显示打包的进度
----config：加载配置文件
Node : Node.Js环境下 启动文件的方法，直接跟需要执行的js文件

2.2 多项目配置整合

通过cross-env 命令传递project变量，例如cross-env project=hr，然后再对应的配置文件（webpack.dev.conf.js || build.js）中 通过process.env.project 判断当前启动的项目即hr,
process表示当前进程，可以直接在js中调用，它的env属性为cross-env所传递的变量。
cross-env 传递的变量只在启动期间有效，因此在打包结束前需要如下代码

意为 定义了webpack的插件，可以在打包后使用该参数。在相应的配置文件中需要有project属性。

 
 require('../config/wo')  路径引用时 默认会去查找wo.js 然后是 wo下的index.js 该文件存放了开发环境的服务器端口地址，build的资源路径等配置。

3. 项目配置文件及组件的复用

每个项目需要在config目录下建立对应的工程文件夹，并包括dev、prod、sit三个环境以及index入口。
webpack.base.conf.js文件为webpack的基本配置，entry表示程序的入口。
在main.js中创建了VUE，并且引入了一些全局配置。
路由为不可复用部分，需要在router包下建立对应的js文件。同时在main.js做如下类似处理：const router = process.env.project ? require('./router/' + process.env.project).default : require('./router/wo').default上述代码可以简化为 import router from 'router'其中import from  与 require的区别 自行百度。另外，此处使用了别名，具体看下一节。
在一些复用部分，都使用process.env.project做了区分处理，在修改时需要全局查找。

4. 别名的使用

在webpack打包过程中，加入别名的相关配置能极大地提高开发效率。
代码在webpack.base.conf.js的resolve->alias 位置。'router': path.resolve(__dirname, process.env.project ? '../src/router/' + process.env.project : '../src/router/wo'),这里进行了router的配置，在组件中使用别名就能直接区分所运行的工程路由。
在使用别名时，别名前不能加‘/‘，直接在引号中以别名开头即可，如‘router/xxx’

5.  路径说明

‘/‘, 表示项目根目录
‘./‘，表示当前目录
‘../‘ ，表示上一级目录，可以连续多个，比如‘../../../‘表示往外层退3级目录
如果模块不是以‘/‘, ‘./‘ 或 ‘../‘ 开头的，那么 node 会从当前模块的父目录开始，尝试在它的 node_modules 文件夹里加载相应模块。如果没有找到，那么就再向上移动到父目录，直到到达顶层目录位置。
假如 /home/ry/projects/foo.js 调用了require('bar.js') 那么node查找的位置依次为：
/home/ry/projects/node_modules/bar.js
/home/ry/node_modules/bar.js
/home/node_modules/bar.js
/node_modules/bar.js
如果都找不到，会去全局模块路径找（此时，别名的配置就生效了），还找不到就会抛出模块未找到的错误。

6.  项目结构详解

6.1 增加新项目的开发步骤

1.    新增新项目程序入口，以es（新增项目的简写）为例
在package.json增加"es-dev": "cross-env project=es webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

"build:es-prod": "cross-env project=es NODE_ENV=production env_config=prod node build/build.js",

"build:es-sit": "cross-env project=es NODE_ENV=production env_config=sit node build/build.js",

分别是开发、生产、测试环境的入口。
 
2.    在config目录下新增es文件夹以及4个子文件
其中配置入口index.js中，
build属性表示生产和测试环境的配置，用于输出部署所需的文件，为了能同时输出多个项目的部署文件，需要修改index: path.resolve(__dirname, '../../dist_es/index.html'),
assetsRoot: path.resolve(__dirname, '../../dist_es'),dev属性表示开发环境的配置，用于启动开发环境的微服务端，只需修改port端口号即可。
 
3.    做完前两步，已经能正常打包，并且启动服务了，程序进入index.html和main.js.现在开始路由的配置。在src/router目录下新建es.js文件，并配置项目所需的路由信息，在组件中引用是，注意别名的使用。
 
4.    在main.js中可以看到这样一条语句     import './permission' // 权限作用是导入权限的控制器。在改文件中，包含了whiteList白名单，router.beforeEach和afterEach会在每次访问新路由是执行，相当于java的拦截器。如果首页和权限与现在的不同，需要修改该文件。然后就能根据路由的配置文件，跳转想要的vue组件了。
 

6.2 项目结构与文件解读

外层结构

·        build 文件夹: 里面是对 webpack 开发和打包的相关设置，包括入口文件、输出文件、使用的模块等；
·        config 文件夹: 主要是指定开发和打包中的静态资源路径、要压缩的文件类型、开发使用的端口号、开发使用虚拟服务器跨域请求 api 等。
·        node_modules: 项目的依赖库；
·        src 文件夹： 我们主要操作的地方，组件的增加修改等都在这个文件夹里操作，下文会有详细介绍；
·        static 文件夹: 静态资源文件夹，放置不会变动的资源，直接被复制到最终的打包目录（默认是dist/static）下；
·        .babelrc: 使用 babel 的配置文件，用来设置转码规则和插件；
·        .editorconfig: 代码的规范文件，规定使用空格或 tab 缩进，缩进的长度是两位还是四位之类的代码风格，使用的话需要在编辑器里下载对应的插件；
·        .eslintignore: 指定 eslint 忽略的文件；
·        .eslintrc: 配置 eslint 的检测规则，强制按照规则书写代码；
·        .gitignore: 指定 git 忽略的文件，所有 git 操作均不会对其生效；
·        .postcssrc: 指定使用的 css 预编译器，里面默认配置了 autoprefixer ，自动补全浏览器前缀；
·        favicon.ico: 浏览器标签页 title 旁边的小图标，这是需要我们自己粘贴过来的；
·        index.html: 首页文件，项目运行的时候，会自动将我们在src 文件夹里生成的组件插入这个文件里；
·        LICENSE: 项目声明的 license；
·        package-lock.json: 当node_modules 或 package.json 发生变化时自动生成的文件。这个文件主要功能是确定当前安装的包的依赖，以便后续重新安装的时候生成相同的依赖，而忽略项目开发过程中有些依赖已经发生的更新；
·        package.json: 指定项目开发和生成环境中需要使用的依赖库；
·        README.md: 相当于是一个备注文件，对项目开发过程中需要注意的地方进行一些说明。
 

src文件夹结构

·        assets: 放置静态资源，包括公共的 css 文件、 js 文件、iconfont 字体文件、img 图片文件 以及其他资源类文件。之所以强调是公共的 css 文件，是因为要在组件的 css 标签里加入 ‘scoped‘ 标记，将其作用范围限制在此组件以及调用它的父级组件中，避免污染全局样式；
·        components: 放置通用模块组件。项目里总会有一些复用的组件，例如弹出框、发送手机验证码、图片上传等，将它们作为通用组件，避免重复工作；
·        api: 放置与后台 api 相关的文件。
·        utils: 工具类，在组件中引用时，可以作用于组件而不必书写重复的方法；这里面有 axios 库的实例配置文件、使用配置的 axios 实例接入 api 获取数据的函数的集合的文件（request.js）；
·        Views: 放置主要页面的组件。例如登录页、用户信息页等。通常是这里的组件本身写入一些结构，再引入通用模块组件，形成完整的页面。其中dashboard文件夹是项目欢迎页和首页的配置，layout是主页面的布局，ewe文件夹是项目的业务模块，user为每个项目的公用部分，改动时要特别注意，新增项目时，也需要在此处增加对应的目录。
·        router: 放置路由设置文件，指定路由对应的组件；
·        store: 放置 vuex 需要的状态关联文件，设置公共的 state、mutations 等
·        App.vue: 入口组件，Views里的组件会被插入此组件中，此组件再插入 index.html 文件里，形成单页面应用；
·        main.js: 入口 js 文件，影响全局，作用是引入全局使用的库、公共的样式和方法、设置路由等。
·        Mock：模拟数据，当前未启用。
·        Directive: 自定义指令，要求较低的话可以忽略，熟练之后可以尝试一下。
·        Filters: 全局过滤器。
·        Icons和images: 图标和图片
·        Lang : 多语言的配置。在组件中使用时，$表示被vue组件注册过，已经暴露出来的方法，可以直接作用在this上，即this.$t方法(指的是蹙额组件的this)
 
 

7.  数据缓存

7.1  Store

 Vuex提供了一个仓库，Store仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data。
在使用Vuex的时候通常会创建Store实例newVuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules。

总结，Store类就是存储数据和管理数据方法的仓库，实现方式是将数据和方法已对象形式传入其实例中。要注意一个应用或是项目中只能存在一个Store实例！！
生命周期：刷新页面或关闭浏览器会使该变量失效。
 

7.2 Cookie

此处不多解释，代码规范，统一放在utilsd的anth.js文件，方便cookie管理。

7.3 localStorage、sessionStorage

 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
以上两种都可以当成一个对象，无需声明，直接对其中的属性进行复制即可。实例：

sessionStorage.

myName

="

Ian

";

 

7.4 变量

Vue组件的data变量，和vue的生命周期、作用域一致。
普通js变量，作用在页面上，由于vue是单页面应用，组件的生命周期不会影响该变量，与store一致。

7.5 apollo缓存

见下一节。
 

8.  HTTP请求方式

8.1  Axios

相关代码在utils/request.js,
https://www.cnblogs.com/libin-1/p/6607945.html该片文档很详细。
有一处比较特殊，// download handler
if (response.config.isDownload) {
  downloadUrl(response.request.responseURL)
  return
}下载操作时需要设置isDownload:true,因为下载是通过流进行的，无法用普通的数据进行交互。因此，在downloadUrl方法中，创建了iframe，嵌入url来获取流。

8.2  Vue-Apollo

相关代码在src/apollo.js，以下链接是我使用GraphQL的一个总结
https://blog.csdn.net/qq_15028299/article/details/79739664