商城类vue2.0项目实战经验积累

一、项目搭建相关

1、 在当前目录中使用 vue init webpack (或在父级目录中使用vue init webpack 项目名称)
2、在当前项目目录时，直接使用npm install ，未在当前目录时，需先进入到当前项目目录中使用npm install
3、npm run dev 运行项目

注意：在创建项目时，保留router配置，ESlint根据实际需求选择是否添加

二、项目成功搭建后的基础配置

1、打包后可正常访问项目的基础配置

前言：vue项目在完成后，使用npm run build打包后，访问index.html页面会报错且不能查看页面效果，所以需要进行进行相关配置。
报错如下：

　　配置步骤：
　　1)、在当前项目中找到config目录下的index.js文件。
　　2)、在模块导出设置中存在dev对象及build对象，其相对应的是生产环境配置及打包相关配置，在打包相关配置中，找到assetsPublicPath字段将其值 / 改为 ./，意思是将打包后static相关文件的路径从绝对路径改为了相对路径。
　　3)、在dev对象设置中可对访问地址及端口进行配置。

！！！注意： 该种设置只能在路由为hash模式下才能修改，使用history模式会产生组件挂载不上的问题。

2、如何去掉url中#

前言：vue2.0项目中默认使用的是hash模式。即使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，因为对于正常的页面来说，更换URl一定是会导致页面的更换的， 而只有更换URL中的查询字符串和hash值的时候才不会重新加载页面。

history模式介绍：这种模式充分利用了history.pushState API来完成URL的跳转而不需要重新加载页面。没有#号。

配置步骤：
　　1)、在当前项目中找到router目录下的index.js路由文件，在导出路由中加入mode: 'history’
如图：

　　　!!!注意：这种模式的路由在正式部署时，需要后台配置的支持：详情请看vue-router官网.

3、添加路由守卫

前言：在进入每一个组件时，我们都需要进行对登陆状态的判断，如果未登录就需要让其返回到登陆页去登陆，这里就需要进行路由守卫的配置了。( TT说多了全是泪呀~,本身小白，对这块理解的不够，竟然会在每一个组件渲染前[created]中进行sessionStrong中进行登陆状态的判定。)
　　配置：在项目的router目录下的index.js中进行路由跳转的相关配置。如图：
)
学习地址：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

4、路由component引用的es6简化

前言：在平常的开发中我们一般都是先导入组件声明组件名，然后再赋值给router中component，但其过于繁琐，所以可使用es语法进行简化书写。
　　配置步骤：
　　　　1)、在项目的router目录下的index.js中进行路由跳转的相关配置
　　　　2)、以往的书写习惯。

// 导入注册组件
import Register from '@/components/pages/Register';

// 在router中引用
export default new Router({
  routes: [
	    {
	        path: '/register',
	        name: '注册页',
	        component: Register
		},  
	]
});

3)、简化：

{ // 【注册页面】
	path: '/registerPage',
	name: 'registerPage',
	component: e => import('@/views/Register')
},

5、vuex状态管理

前言：在项目中总有一部分数据是各个组件都需要用到的，如登陆状态、用户信息等等…这块我们我们就需要用到vuex了。

6、第三方插件axios的引用及封装

前言：vue在请求后台接口的插件常用的有vue-resource和axios，其中vue-resource是官方推出的插件库，而axios是第三方推出的插件库。该项目中使用的是axios。虽然该插件使用起来已经相当简洁，但我们在实际开发中 仍需要根据项目进行封装。
　　相关配置：
　　　　1)、axios的导入：
　　　　　　　　npm install axios --save
　　　　 　　　　或 npm i axios -S
　　　　 使用淘宝镜像：
　　　　 　　npm install axios --save --registry=https://registry.npm.taobao.org (使用淘宝镜像源)
　　　　 　　或 cnpm install axios --save
　　　　2)、如果不进行封装，可直接在模板中导入，如下：

// 在script中进行导入
import axios from 'axios';

/* 在methods中的使用方式——get */ 
axios.get(‘接口地址’)
	.then(res=>{
    	// 请求成攻
	}).catch(err=>{
    	// 请求失败
	});
/* 在methods中的使用方式——post */ 
axios.post('接口地址',{
	// 参数
}).then(res=>{
	// 请求成功
}).catch(err=>{
	// 请求失败
});

3)、进行封装

• 在当前项目中的src文件中创建http.js文件。
• http.js文件相关配置：

// 1、导入axios插件
import axios from "axios";
import import { Spin } from "iview";  // 导入请求发送时状态的组件

// 2、基础配置
axios.defaults = Object.assign(axios.defaults,{
	base: 'http://localhost:8080/api';    		    // 进行接口基础路径配置(该处有设置本地代理) 
	headers: { 										// 添加请求头部所需类型生命
		"Content-Type": "application/json",
	}
});

// 3、添加请求拦截器
axios.interceptors.request.use(
	config => {
 		let isUser = sessionStorage.userInfo;		// 该处有引用sessionstrong存值
 		if (isUser) {					
            config.headers.accessToken = JSON.parse(isUser).user.token;	// 配置通行密钥
        }
        // iview loading  该处配置请查看引入UI框架的具体配置实例
        Spin.show({
      		render: (h)  => {
				return h('div',[
					h('Icon',{
						'class': 'demo-spin-icon-load',
						props: [
							type: 'ios-loading',
							size: 14
						}
					]),
					h('div','努力加载中...');
				]);
			}
      	});
      	return config;
	},
	error => {
			return Promise.reject(error);
	}
);

// 4、添加响应拦截器
axios.interceptors.response.use(
	response => {
		if( response.status === 200 ){  // 响应接收成功
			if( response.data ){
				setTimer(() => {
					Spin.hide();
				},1000);
				switch( response.data.code ){
					case 100:  // 响应正常
						return response.data.data;
					default:
						return Promise.reject(response); // 失败，回调
				}
			} else {
				return response;
			}
		} else { // 响应错误原因
			alert( `网络错误!(${response.status})` );
		}
	},
	err => {
		return Promise.reject(error);
	}
);

// 5、导出
export default axios;

• 在main.js中进行全局引用

// 从http.js中导入axios
import axios from './http'

// vue实例全局挂载
Vue.prototype.$axios = axios;

• 在组件中进行使用

// get方法
this.$axios.get('接口地址')
	.then(res => {
		// 请求成功
	}).catch( err => {
		// 请求失败
	} );
// post方法
this.$axios.post('接口地址',{
	参数
}).then(err => {
	// 请求成功
}).catch(err => {
	// 请求失败
})

！！！注意： 响应拦截器应该根据实际数据结构进行修改。

7、本地请求接口时的跨域配置（反向代理）

前言：说多了都是泪呀~，弱弱的问一下，这不应该是后台进行配置的么TT。算了，废话不多。在请求接口时，在后台没有处理跨域配置时，就需要我们自行进行调整的，不然绝对一脸的懵逼。
　　相关配置：
　　 　1)、在项目目录中找到config文件夹下的index.js文件中的proxyTable，并且进行如下配置：

	proxyTable: {
		'/api':{
			target: 'http://172.112.16.201:8787',  // 接口的基础地址
			changeOrigin: true,
			pargPewrite: {
				'^/api':''
			}
		}
	}

！！！注意1：所设置的请求基础地址后，在https.js中进行接口的基础地址配置需要填写本地请求路径 base: ‘http://localhost:8080/api’;
！！！注意2：在进行配置后需要进行项目从启才能生效。

8、打包后本地访问报项目编译错误

前言：在hash模式下，打包后会本地访问会报项目编译错误。如图：

　　相关配置：
　　　　1)、在项目的根目录中找到utils.js文件
　　　　2)、在generateLoaders中options.extract中增加publicPath 设置 …/…/

  if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
		fallback: 'vue-style-loader',
		publicPath:'../../'    // 新增
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }