Vue PC商城项目开发笔记与问题汇总

Vue PC商城项目开发笔记与问题汇总

负责PC端商城项目，这也是人生第一个真正的项目。刚做了一天，就遇到不少问题，在这里列出自己的问题与解决办法，与大家交流，提升自己，希望以后不会掉进同一个坑里。

一、使用vue-cli创建项目
上次逛论坛遇到一张图，出处忘记了，借送给大家，从搭建到项目结构，一张图解决好多疑问，好优秀

安装淘宝镜像：npm install cnpm -g --registry=https://registry.npm.taobao.org。

二、Element-ui安装应用
1.安装到项目 $ cnpm install element-ui -S

2.main.js中写入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';Vue.use(ElementUI);new Vue({el: '#app',render: h => h(App)
});

3.后期简洁代码，做到只引用需要组件

三、Swiper安装应用
此处slide组件单独引用

1.安装Swiper

$ cnpm install swiper -S$ cnpm install vue-awesome-swiper -S
（这个地方，先这样，安装swiper有用）

2.使用

<template><div><swiper :options="swiperOption" ref="mySwiper"><!-- slides --><swiper-slide><a href="javascript:;"><img src="../assets/images/首页_slices/banner_01@2x.png" height="460" width="1024"/></a></swiper-slide><swiper-slide><a href="javascript:;"><img src="../assets/images/首页_slices/banner_01@2x.png" height="460" width="1024"/></a></swiper-slide><swiper-slide><a href="javascript:;"><img src="../assets/images/首页_slices/banner_01@2x.png" height="460" width="1024"/></a></swiper-slide><!-- Optional controls --><div class="swiper-pagination" slot="pagination"></div><div class="swiper-button-prev" slot="button-prev"></div><div class="swiper-button-next" slot="button-next"></div><div class="swiper-scrollbar"   slot="scrollbar"></div></swiper></div>
</template><script>import {swiper, swiperSlide} from 'vue-awesome-swiper';require('swiper/dist/css/swiper.css');export default {name: 'slide',data() {return {swiperOption: {// 配置选项}},components: {swiper,swiperSlide}}
</script><style scoped></style>

四、问题整合
1.使用axios调用后台数据

(1).安装 $ cnpm install axios -S

(2).main.js 引入以下内容

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from 'axios'; // this
import App from './App';
import router from './router';Vue.config.productionTip = false
/* eslint-disable no-new */Vue.use(ElementUI);
Vue.prototype.$axios = axios; //and thisnew Vue({el: '#app',components: {App},template: '<App/>'
})

(3).从后台获取数据（POST）

export default {name: "footer",data() {return {recommends: ''}},methods: {post() {this.$axios.post('url', {params1: 'data', params2: 'data'}).then((response) => {this.recommends = response.data.data.goodsList;console.log('成功');}).catch((error) => {console.log('失败' + error);});}},mounted() {this.post()}}

2.npm run build 页面空白或缺失元素
(1).修改config/index.js

build: {// Template for index.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',// assetsPublicPath: '/', //************原始assetsPublicPath: './',  //********修改后，资源生成目录/*** Source Maps*/productionSourceMap: true,// https://webpack.js.org/configuration/devtool/#productiondevtool: '#source-map',// Gzip off by default as many popular static hosts such as// Surge or Netlify already gzip all static assets for you.// Before setting to `true`, make sure to:// npm install --save-dev compression-webpack-pluginproductionGzip: false,productionGzipExtensions: ['js', 'css'],// Run the build command with an extra argument to// View the bundle analyzer report after build finishes:// `npm run build --report`// Set to `true` or `false` to always turn it on or offbundleAnalyzerReport: process.env.npm_config_report}

(2).设置了路由的mode:‘history’，（地址栏http:aa.com/#/index 去除#号）,注释掉

(3).如果mode为history，解决方法如下：(router/index.js)

export default [{
path: '/box',
component: App, //顶层路由，对应index.html
children: [ //二级路由。对应App.vue
//地址为空时跳转home页面
{
path: '',
redirect: '/box/page1'
},
{
path: '/box/page2',
component: page2
},
{
path: '/box/page3',
component: page3
},
{
path: '/box/page4',
component: page4
}]
}]

3.通过登录验证携带cookie获取后台数据
（1）使用了vue-cookie

      npm install vue-cookie --save

（2）使用了axios

（3）具体设置

mian.js内容

引入vue-cookie

设置axios默认请求头（携带本地cookie）

Vue.prototype.$cookies = new cookies();  // !importantnew Vue({el: '#app',components: {App},template: '<App/>',router,create: function () {   // !importantlet token = this.$cookies.get('token') || 'html5';this.$axios.defaults.headers.accessToken = token;}
})

登录后存储后台返回的accessToken
（login.vue）

//登录成功document.cookie = "token=" + response.data.data.accessToken;this.$axios.defaults.headers.accessToken = response.data.data.accessToken;

退出登录删除cookie
完成

Vue PC商城项目开发笔记与问题汇总相关推荐

spring boot 前后端分离项目(商城项目)学习笔记
spring boot 前后端分离项目(商城项目)学习笔记目录 spring boot 前后端分离项目(商城项目)学习笔记后端配置 springboot项目 pom.xml文件 maven 配置文 ...
[Openwrt 项目开发笔记]：Samba服务vsFTP服务（四）
[Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 在上一节中,我们讲述了如何在路由器上挂载U盘,以 ...
尚硅谷前端项目开发笔记
尚硅谷前端项目开发笔记 B站视频直达,这个项目亮点在于所有 API 请求都并非在组件内编写,而是在组件内使用this.$store.dispatch() 派发任务,再由 Vuex(actions.mu ...
[Openwrt 项目开发笔记]：Openwrt平台搭建（一）
[Openwrt项目开发笔记]系列文章传送门:http://www.cnblogs.com/double-win/p/3888399.html 正文: 最近开始着手进行Openwrt平台的物联网网关设 ...
SSM米米商城项目笔笔记二（登录业务逻辑实现）
米米商城项目笔笔记二(登录业务逻辑实现) Service层业务逻辑实现由于在笔记一中已经完成了底层的搭建,所以可以直接上手service层代码的编写在service包下创建AdminService ...
SSM米米商城项目笔笔记五（商品信息多条件查询）
SSM米米商城项目笔笔记五(商品信息多条件查询) 1.当查询的条件没有数据时,点击查询会展示出所有的上商品信息 2.当输入商品的模糊信息时,就会展示带有模糊信息的数据 3.当选中商品类型的时候就根据类 ...
尚硅谷——谷粒商城项目开发记录——2021.11.21
尚硅谷--谷粒商城项目开发记录--2021.11.21 概念: 1.var和let的区别: 作用域: var 声明的变量往往会越域 let 声明的变量有严格局部作用域声明次数: var 可以声明多次 ...
京东投票项目开发笔记
京东投票项目开发笔记打开项目 $yarn install / $ npm install: 跑环境(把项目依赖的插件进行安装) $node admin.js: 启服务(把自己的计算机作为服务器,创建 ...
京东抽奖项目开发笔记
京东抽奖项目开发笔记前言: 这是一个独立项目,这个项目会由我们四个人来一起完成,所以首先就要分工合作,我是写前端的,所以我会先把基本的页面写出来 1.注册页这是注册页的代码 <!DOCTYP ...

Vue PC商城项目开发笔记与问题汇总

Vue PC商城项目开发笔记与问题汇总相关推荐

最新文章

热门文章