-
未登录统一拦截
-
首先需要安装axios和vue-axios
-
安装好了之后需要在main.js中引入
import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios)
-
根据前端的跨域方式做调整(此处使用的是proxy做代理)
axios.defaults.baseURL = '/api'
-
对请求超时做处理(优化用户体验)
axios.defaults.timeout = 8000
-
接口错误拦截(此处和后端约定好,成功状态码为0,未登录状态码为10,此处必须使用window.location.href跳转,由于是hash路由,所以加上#)
axios.interceptors.response.use(function(response) { let res = response.data; if (res.status == 0) { return res.data; } else if (res.status == 10) { window.location.href = "/#/login"; } else { alert(res.msg); } });
-
-
必要插件安装
-
图片懒加载插件
-
npm install vue-lazyload --save-dev
-
-
element-ui
-
npm install element-ui --save-dev
-
-
axios
-
npm install axios --save-dev
-
-
vue-axios
-
npm install vue-axios --save-dev
-
-
vue-router
-
npm install vue-router --save-dev
-
-
vuex
-
npm install vuex --save-dev
-
-
安装sass插件
-
npm install node-sass sass-loader --save-dev
-
-
安装轮播插件
-
npm install vue-awesome-swiper --save-dev
-
-
vue-cookie
-
npm install vue-cookie --save-dev
-
-
在安装node-sass的时候遇到了报错,错误代码为
MSBUILD : error MSB4132: 无法识别工具版本“2.0”。可用的工具版本为 "4.0"。
-
解决办法如下
* 解决 npm 安装 node-sass 速度慢的问题: 可通过配置淘宝的镜像源解决,首先配置淘宝的镜像源
执行命令:
npm config set registry https://registry.npm.taobao.org* 然后在 ~/.npmrc 加入下面内容
sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
注:.npmrc 文件位于:
win:C:\Users[你的账户名称].npmrc
linux:直接使用 vi ~/.npmrc
-
-
路由封装
import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/home.vue' import Product from '../views/product.vue' import Detail from '../views/detail.vue' import Cart from '../views/cart.vue' import Order from '../views/order.vue' import OrderConfirm from '../views/orderConfirm' import OrderList from '../views/orderList' import OrderPay from '../views/orderPay' import Index from '../views/index.vue' import Login from '../views/login.vue' import Alipay from '../views/alipay.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'home', component: Home, // 重定向到index页面 redirect: '/index', // 这里是Home页面的子页面使用children来引入 children: [{ path: 'detail/:id', name: 'detail', component: Detail }, { path: 'product/:id', name: 'product', component: Product }, { path: 'index', name: 'index', component: Index }] }, { path: '/login', name: 'login', component: Login }, { path: '/cart', name: 'cart', component: Cart }, { path: '/order', name: 'order', component: Order, children: [{ path: 'confirm', name: 'order-confirm', component: OrderConfirm }, { path: 'list', name: 'order-list', component: OrderList }, { path: 'pay', name: 'order-pay', component: OrderPay }, { path: 'alipay', name: 'alipay', component: Alipay }] } ] const router = new VueRouter({ routes }) export default router
-
保存后自动格式化为eslint支持的规则
-
安装vetur插件和eslint插件
-
在设置中打开settings.json,然后复制如下规则进去
"editor.codeActionsOnSave": { "source.fixAll.eslint": true, }
-
-
解决eslint报错component has been registered but not used(组件定义了未使用)
- 在.eslintrc.js文件的rules内增加一条代码,如下:
rules: { 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'vue/no-unused-components': 'off' }
- 或者在package.json中找到eslintConfig下的rules,新增如下代码
"eslintConfig": { "rules": { "vue/no-unused-components": "off" } }
- 配置完成需要重启服务,.eslintrc.js优先级高于package.json
仿小米商城的路由配置,插件安装,项目结构
猜你喜欢
转载自blog.csdn.net/qq_39208971/article/details/108284122
今日推荐
周排行