项目的开始和技术选型相关

项目初始

首先需要明确项目的需求，开发的周期，可能存在的问题以及解决的方案。这个项目是为了什么，可能存在哪些问题，应该怎么做，就目前最近的一个例子，一个OA周报系统的手机端。它的需求是手机访问，那是通过H5网页访问还是安装APP使用，还是二者都需求，微信小程序有需求吗？开发的周期是多久，可能存在开发一半后被接手吗？首先明确：手机端，开发周期不确定（尽可能短），技术团队还未磨合（都会Vue，有未开发过手机端的），有可能被接手（可能会被抽调人手）

技术选型

一般项目搭建，可以使用 html，css 加 js原生或者jQuery，或者使用框架，React.js 或者 Vue.js。 然后可以使用脚手架快速构建也可以使用 Webpack 一步一步配置管理。不同的搭建方式优缺点都各不一样。根据开发时间未知，项目大小，那就简单使用vue-cli脚手架，整体布局就使用rem布局就好了。Ui框架的话就随便选一个常用的就好了。还有一些第三方库的话，根据功能，安全和价格选择就好了。然后选择合作开发的代码的存储管理平台，是公司提供的内部gitLab(当然有公司内部搭建的就用公司内部的), 还是gitHub或者gitee 等等。

搭建项目

cmd
vue create xxx
cd xxx
yarn serve

项目结构拆分

根据相关需求进行配置

src/
 |——api/ (所有请求：用户相关，功能相关等)
   |——user.js 
   |——login.js
   ......

 |——assets/ (静态资源：图片，视频，字体等)
   |——images/ 
   |——fonts/
   ......

 |——components/ (所有组件：主页，登录，注册等)
   |——Home/
     |——index.vue
     ......
   |——Login/
   ......

 |——config/ (所有配置项：网关,路由字体大小等)
   |——geteway.js
   |——router.js
   |——common.css
   ......

 |——router/ (路由配置：配置项目路由)
   |——index.js
   ......

 |——store/  (Vuex的数据中心:可以根据模块拆分)
   |——index.js
   |——modules/

 |——utils/  (工具集合：请求，常用函数等)
   |——require.js

App.vue
min.js

引入 VueX 进行状态管理

$ yarn add vuex

根据相关需求进行配置

store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
    // ...
  },
  getters:{
    // ...
  },
  mutations:{
    // ...
  },
  actions:{
    // ...
  },
  modules:{
    // ...
  }
})
export default store

入口文件中引入

main.js
import store from './store'
// ...
new Vue({
  store,
  // ...
}).$mount('#app')

引入 Vue-Router 进行路由管理

$ yarn add vue-router

根据相关需求进行配置

route/index.js
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// ...

import Home from  '@/components/Home'
// ...

const routes=[
  {path:'/Home',component:Home},
  // ...
]

const router=new VueRouter({
  routes
})
export default router

入口文件中引入

main.js
import router from './router'
// ...
new Vue({
  router,
  // ...
}).$mount('#app')

引入 Axios 网络请求库

$ yarn add axios
$ yarn add vue-axios

main.js
import Vue from 'vue'
import axios from 'axios'
import vueAxios from 'vue-axios'
Vue.use(vueAxios,axios)
// ...

第三方库，包的引入

根据相关需求进行引入

# qs 数据处理
yarn add qs

# 低版本兼容
yarn add polyfill

# cookie处理
yarn add js-cookie

# 日期格式处理
yarn add moment

# Vue国际化
yarn add vue-i18n

# 自定义滚动条
yarn add perfect-scrollbar

# ......还有很多第三方库，就不一一列举了，根据相关需求去网上查找

相关处理

配置跨域

根据相关需求进行配置

vue.config.js
module.exports = {
  devServer: {
      proxy: {
        "/xxx": {
          target: 'https://xxx/',
          changeOrigin:true
        },
        "/xxx":{
          target: 'http://xxx.xxx.xxx.xxx:4000/',
          changeOrigin:true,
          pathRewrite:{
            '^/xxx':''
          }
        },
      }
  }
}

配置拦截器

根据相关需求进行配置

// ...
//请求拦截器
axios.interceptors.request.use(function (config) {
  //添加身份验证
  // ...
  return config;
}, function (error) {
  // console.log(error)
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use(function (response) {
  //添加错误处理
  // ...
  return response;
}, function (error) {
  return Promise.reject(error);
});
// ...

分支管理

不同的团队，不同项目有不同的分支管理规则，也可能没规则。但大差不差

master：主分支（远程，本地），一般作为大版本上线使用。普通开发者无权限修改。 
dev：开发分支（远程，本地），一般作为小版本上线使用。由团队负责人管理。普通开发者无权限修改（当然，有的小团队没有这种规则）。 
dev0930：版本分支（远程，本地），一般作为日常版本迭代或是功能分支使用。由dev分支上创建。 由团队负责人创建管理，普通开发者有权限
lixianbin:个人分支（本地），一般作为本地开发使用，由功能分支上创建。 由你个人负责管理。

简单的讲，团队负责人将 master , dev , dev0930 创建后，你在 dev0930 上创建新分支，在完成功能后，将 lixianbin 合并到 dev0930 版本上，在推送到远程 dev0930 上。 一般大团队会有很多版本分支作为存档分支。
当然小团队和小项目不用那么麻烦，只要保证master不被污染，dev不要有太多错误提交就好了。

注意：个人分支不推送到远程 分支推送前先本地运行一下再提交

代码规范

可以在项目开发前进行说明，之后编辑文档进行规范，也可以通过 es-lint 进行设置规范；

问题

Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)报错，页面全空白

vue-router的版本问题，vue-router4区别于3 ，没有了默认导出export default的模块，需要使用 import {createrRouter} from ‘vue-router’的方式进行导入；之后在页面引用<router-view>的时候同样需要进行模块引入；vue.use()；建议将vue-router 替换成 3.1.3版本；