vue项目脚手架完整搭建

最近刚换到一家新的公司上班，需要重构我们公司的后台管理系统，因为之前自己在上一家公司也用vue写过东西，只是一些架构上的东西自己还没有完完整整的弄过，所以在做系统之前我也通过查找网上的各种资料，自己花了两天时间搭建了一下底层架构，代码已经上传到git上面去了，

https://github.com/gitEverytime/vue-axios-vuex-element-UI

一 vue-cli

安装node ，因为vue项目是运行在node包下面的，npm指令个人推荐使用淘宝镜像，快速，稳定
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
全局安装vue-cli
npm install vue-cli -g

二、接口重定向配置文件：

      '/performance/**': {
        target: 'http://ip/域名:端口号', // 你接口的域名
        secure: false,      // 如果是https接口，需要配置这个参数
        changeOrigin: true,     // 如果接口跨域，需要进行这个参数配置
},

三、前后交互工具Axios配置：

安装：npm install axios --save
拦截器配置（是否登录验证,验证token是否过期）

axios.interceptors.request.use(config => {
  if (vm.cookie.get("token")) {  // 判断是否存在token，如果存在的话，则每个``http header都加上token,username
 let jsonData = {
   token: vm.cookie.get("token"),
   username: vm.cookie.get("username")
    };
    config.headers.Authorization = JSON.stringify(jsonData);
 }
 return config
}, error => {
  return Promise.reject(error)
})

接口统一放在api.js里面

export default {
right: '地址', // 正确路径
}

接口调用：

函数名: async function() {
        let vm=this;
        let params = {};
        const res = await vm.http.get(地址名称.adminList, params);
        if( res && res.data && res.data.code === 200){//成功处理
        }
     },

四、vue-router:vue地址路径路由

安装：npm install vue-router
基本配置的话照着官方文档大家基本都会配置，api也相对简单易懂，细节配置的话注意我们可以利用全局导航钩子做登录验证的判断，未登录，则直接路由登录界面的地址，登录成功才去其他页面

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
   if(cookieUtil.get("token")) {
      next();
    }
    else {
      next({
       path: '/login'
      })
    }
 }
  else {
    next();
  }
})

五、vuex

Vuex是一个专为Vue.js应用程序开发的状态管理模式。
安装: npm install vuex --save
关于vuex教程详解网上一大堆，不再啰嗦。。。（懒😊😊）
五，我们知道使用vue就是利用它的组件化应用，让我们的开发效率大大提高，在做项目重构之前我就对各个开源组件库的生态社区以及组件的美观进行了详细比对，选用了element组件库作为项目的开发，elment组件库可以自定义主题颜色，每个组件的api都很友好，大家只要细心看官方文档，在用组件的过程遇到的问题其实很多都是没有仔细看文档，
比如日期组件：很多初次使用没看清文档就发现v-model里面的value并不是我们想要的YYYY-MM-dd这种格式，而是澳大利亚西部标准时间，看文档才发现组件@change事件可以提供格式化后的值；然后你发现2.x之后change返回的值是澳大利亚西部标准时间，😄，原来文档api新增了属性
value-format 可选，绑定值的格式。不指定则绑定值为 Date 对象,后面的属性值可指定YYYY-MM-dd

六、关于公共js代码封装

在main.js文件配置里面，import你的js文件
vue.prototype.js文件名 = 引入文件名
就是给vue这个函数的原型对象添加新的属性和属性值

七、node线上服务端配置

安装express node web服务框架：npm install express --save
pm2：node进程管理器 :npm install pm2 --save
webpack-hot-middleware:npm install webpack-hot-middleware --save

//线上启动web服务器配置
var express = require("express");
var proxy = require('http-proxy-middleware');
var app = express();
app.use(express.static("dist")).listen(端口号);
// Add middleware for http proxying
var apiProxy = proxy('/user', {
 target: '域名/ip',
changeOrigin: ``true 
});
app.use('/user/*', apiProxy);

最后编辑于：2020.04.01 17:02:51