项目执行流程

一、整个项目的流程

1.在 gitlab 或者 github 上建项目

本地需要安装 node.js 环境

2.本地创建项目

2.1 vue 脚手架使用

本地创建项目有个问题，下载下来的时候有多个文件夹，然而用 vue 脚手架创建项目时会产生另一个文件夹，会产生冲突。（主要对 git 命令不太熟，可以通过 git remote add origin 仓库名 添加到项目上）

# 默认会按照vue2方式进行安装
npm create 项目名
# 按照默认指引选择就行

2.2 跟远程仓库对上

当前是 vue2，后续会进行改善

• 第一种方式（推荐）

git init
# .git是从远程克隆的git文件
git remote add origin http://xxx.git
git add .
git commit -m 'init'
git pull origin master --allow-unrelated-histories
git push --set-upstream origin master

• 第二种方式（麻烦）

用 vue-cli 创建项目，然后将这个项目的内容拷贝到上一层

// 目录结构
--- project
    --- vue-test
        --- README.md
        --- vue-test
            --- .git // 需删除
            --- README.md
            --- node_modules // 需删除
            --- public
            --- src
            --- package.json
            --- package-lock.json // 需删除
            --- .gitignore
            ---
        --- .git

// 目标目录结构
--- project
    --- vue-test
        --- README.md
        --- public
        --- src
        --- package.json
        --- .gitignore
        --- .git // 不可见

执行 linux 命令

# 进入到需创建的目录
cd project/vue-test

# 删除脚手架生成的 .git文件
rm -rf ./vue-test/.git

# 复制脚手架创建的项目到当前目录
\cp -rf vue-test/* ./

# 会提示是否覆盖readme.md，输入y
y

# 删除 node_modules package-lock.json
rm -rf ./node_modules ./package-lock.json

# 安装npm，可用cnpm，这样更快
cnpm install
# 缺点是不会更新到package-lock.json中

二、下一步

1.设计目录结构

目录结构如下

--- public
    --- index.html
--- src
    --- api
        --- index.js
    --- assets
        --- js
        --- css
        --- image
    --- components
        --- xxx.vue
    --- pages
        --- xxx2.vue
		--- vuex
				--- store.js
		--- router
				--- index.js
		main.js

这里分成 hash 模式和 history 模式

• hash 模式和 history 模式区别：
  • hash 模式不需要设置 nginx
  • history 模式需要设置 nginx，不然会出现 404 页面

2.准备工作（vue2 版本）

• 准备 axios 对应的环境

// 命令行
npm install axios
/*
* api/index.js中
*/
import axios from 'axios'
axios.defaults.baseURL = '/api'//假定和后端协调对应的路径为/api
export default axios

/*
*	main.js中
*/
import Vue from 'vue'
import axios from './api/index.js'
Vue.prototype.$api = axios
/**
		或者
		Vue.prototype.$http = axios
		到时候引用就用this.$http.get('接口名')。。。
**/

• 准备 element ui 环境（懒加载）

// 安装element-ui
npm install element-ui

// main.js中
// 引入css文件
import 'element-ui/lib/theme-chalk/index.css'
// import { 按需引入 } from 'element-ui'
import { Input } from 'element-ui'
Vue.use(Input)

• 准备 router 环境

// 安装vue-router
npm install vue-router

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
// 刷新或者重复点击问题解决办法
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}

const route = [
  {
  	path:'/',
    redirect:'/home'
  },
  {
  	path:'/home',
    // 组件懒加载
    // 假定这里已经把路径名问题解决了，或者先在vue.config.js中进行处理
    // @pages => src/pages
    component:()=>import('@pages/home.vue'),
    children:[
      {
        path:'about',
        // @components => src/components
        component:()=>import('@components/about.vue')
      }
    ]
  }
]
const router = new Router({
  // hash or history
  // history需要配置nginx
  // hash不需要
  mode:'hash',
  route
})
export default router

• 准备 vuex 环境

// 安装vuex
npm install vuex

// vuex/store.js

import Vuex from 'vuex'

// 常量
const state = {
  flag: false
}
// 异步操作
const actions = {

}
// 同步操作
const mutaions = {
  setFlag(state, payload){
    state.flag = payload
  }
}

const store = new Vuex.store({
  state,
  actions,
  mutations
})

export default store

• 准备跨域问题解决办法（前后端协调）

// 提前安装bable-polyfill，在命令行
npm install babel-polyfill

// vue.config.js中
const path = require('path')
// 可解决 ?. 可选链问题
require('babel-polyfill')
const resolve = (dir) => path.join(__dirname, dir)
module.exports = {
  // publicPath: process.env.NODE_ENV === 'production' ? '/' : './',  // 公共路径
  publicPath: './',
  indexPath: 'index.html', // 相对于打包路径index.html的路径
  outputDir: process.env.outputDir || 'dist', // 'dist', 生产环境构建文件的目录
  assetsDir: 'staticBig', // 相对于outputDir的静态资源(js、css、img、fonts)目录
  lintOnSave: false, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码
  runtimeCompiler: true, // 是否使用包含运行时编译器的 Vue 构建版本
  productionSourceMap: false, // 生产环境的 source map
  chainWebpack: (config) => {
    config.resolve.alias // 添加别名
      .set('@', resolve('src'))
      .set('@assets', resolve('src/assets'))
      .set('@components', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@store', resolve('src/store'))
      .set('@pages', resolve('src/pages'))
      .set('@router', resolve('src/router'))
  },
  configureWebpack: (config) => {
  },
  devServer: {
    open: true,
    host: 'localhost',
    // port: '8112', // 端口号
    https: false, // https:{type:Boolean}
    hotOnly: true, // 热更新
    // proxy: 'http://xxx:8080'   // 配置跨域处理,只有一个代理
    proxy: {
      //配置跨域
      '/api': {
        // 后端提供的地址
        target: 'http://xxx:8080',// 假定开放8080端口
        changeOrigin: true,
        // ws: true,//websocket支持
        secure: false,
        pathRewrite: {
          '^/api': '',
        },
      }
    }
  }
}

3.抽象通用逻辑和通用组件

（有必要，减少重复复制粘贴工作，维护起来也方便）

通用组件要求

• 内部样式不影响外部样式，对父元素依赖不高（最好没有依赖）
• 要足够抽象但是有公共特征
• 能对外部事件进行响应（有事件出口）

这里有点问题，有些是在工作过程中才想到对应的组件，会出现样式覆盖的问题，注意命名。

三、业务逻辑

开发流程

产品根据标书梳理出对应的原型图，然后交给ui，ui进行绘制，一般会有一个平台储存ui绘制的图，我们当前用的蓝湖。
理论上交给ui之前应该还有需求评审？让开发人员评估后续开发的可行性，把不合理的需求驳回，然后做一个排期，然后项目经理再把这个排期跟客户对接，如果有分歧，那时再讨论。

有一个问题，是边出设计图边开发么？如果产品稿出现问题，后续的是不是都需要返工。貌似是不可避免的。问题在于怎么减少这类问题的发生。前期需要做很久的准备，保证大家对这个项目足够了解并且能提出相应的意见。当然，是理论上，这貌似是最难的，在大部分时间都需要考虑项目整体是怎样的，然后再从整体去看细节，而且没干啥活。

假定当前已经排完期了，进入开发流程，ui先出图，前端把对应的图转成页面。

业务代码编写

前端需要把ui图转成页面，你拿到设计图之后，先别慌，页面多是正常的，大部分都是重复的。你需要把整体的结构想出来，看需不需要路由，大部分情况下应该是需要路由的。

结构想清楚之后，你就会发现有很多一样的页面，只是名称啥的不一样，这时你可以想着用一个通用组件把公共部分抽离出来，不同的部分加上插槽。

结构想出来之后就是想对应的布局，设计图上的布局可以怎么实现，前期可以用自己习惯的方式，后面就会知道怎么做比较快。

结构和布局想好之后，可以把设计图上的图片下载下来，重命名一下方便后面引用，尽量起个跟实际用处相关的名称。

然后就是愉快的code时间了。

代码管理

一般本地会提交到公司要求的平台上。
提交之前需要pull

git pull
git add .
git commit -m '填写提交信息'
git push

项目部署

一般来说，这个是运维做的？当然，你也可以自己部署。相关的人会要求你把代码部署到某个平台上，按照他们说的做就可以了。

npm run build

把打包后的dist文件放到要求的位置，也有可能需要重命名，看需求。

项目上线

后期维护

四、引申的思考

为啥需要 loader

暂时没想出来

loader 类别：
css-loader
less-loader
sass-loader
style-loader

vue-loader
babel-loader
img-loader

为啥需要 plugin

为了提高页面的功能或者为了实现某种功能