创别书城项目
1、排除node_modules文件检索
2、扩展文件.css后缀省略引入
3、注释自动检查代码格式代码
4、路由模式设置成history
1、UI组件 —— iView + swiper
$ npm install iview --save
$ npm install vue-awesome-swiper --save
2、模块组件 —— axios
$ npm i axios -D
$ npm i vue-axios -D
1、@/views文件(具体页面成型)
home(首页页面) classify(分类页面) rank(排行页面) women(女区页面) men(男区页面) booklist(书单页面)
2、@/components文件(页面模板组件)
Topbar.vue(顶部组件) Footer.vue(页脚组件)
1、分配根路径页面
2、分配'/home'路径页面
3、分配其他路由页面
4、分配'*'没有指定路径的出错访问页面
1、完成顶部、Swiper、页脚的模板组件布局和样式
Swiper坑1:以下代码必须写在home/index.vue文件里面
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
Swiper坑2:无法自动切换轮播图,请在依赖包里的swiper.js文件修改autoplayDisableOnInteraction属性 true -> false
autoplayDisableOnInteraction: false,
2、
你可能遇到的坑:
(1)自定义组件的元素标签名不能与HTML已有的标签名重复 (2)插件使用总结:哪里用到插件,就在哪个vue模块组件里引入插件!
你可能遇到的坑:
(1)axios无法解决跨域问题
(2)JSON可以解决跨域问题,但使用时特别注意this重定向以及在使用组件引入JSONP模块
1、根目录的路径问题 -> 生产配置config/index.js/assetsPublicPath属性改为“./”
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: true,
// 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-plugin
productionGzip: 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 off
bundleAnalyzerReport: process.env.npm_config_report
}
2、路径模式不可为"history"
export default new Router({
//mode: 'history',
...
})
3、背景图片路径问题
背景路径以动态路径写在标签属性内
:style="{ backgroundImage: 'url(' + bg + ')'}"
背景路径以变量写在vue实例的data属性内
data: function(){
return {
bg: require('../../assets/img/router.png')
}
}
4、UI插件引入路径问题 -> 根据错误的路径,新建文件夹,讲字体丢进去
路径重复报错如下
swiper.js:4928GET file:///E:/web/project/zhuliu/my-project/dist/static/css/static/fonts/ionicons.24712f6.ttf net::ERR_FILE_NOT_FOUNDcss @ swiper.js:4928t @ swiper.js:470o @ app.67e006f….js:406e @ swiper.vue:62mounted @ app.67e006f….js:411Me @ vue.esm.js:2646insert @ vue.esm.js:3501S @ vue.esm.js:5440e.nodeOps @ vue.esm.js:5610e._update @ vue.esm.js:2395i @ vue.esm.js:2519Ha.get @ vue.esm.js:2862Ha @ vue.esm.js:2851_e @ vue.esm.js:2523xt.$mount @ vue.esm.js:7842xt.$mount @ vue.esm.js:10045e._init @ vue.esm.js:4207xt @ vue.esm.js:4292(anonymous function) @ main.js:33n @ bootstrap 561b45d…:54window.webpackJsonp @ bootstrap 561b45d…:25(anonymous function) @ app.67e006f….js:1
index.html:1 GET file:///E:/web/project/zhuliu/my-project/dist/static/css/static/fonts/ionicons.05acfdb.woff net::ERR_FILE_NOT_FOUND
新建static/fonts文件夹,纠正无法找到文件路径的错误
static/css/static/fonts/ionicons.24712f6.ttf
static/css/static/fonts/ionicons.05acfdb.woff
1、跨域的问题【以下方法实测不行】
使用api代理(config/index.js -> dev.proxyTable: {})
proxyTable: {
'/api/**': {
target: 'http://127.0.0.1:8089', // 你接口的域名
secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
},
'/users/*':{
target:'http://127.0.0.1:8089'
}
},
请求时路由要加 '/设置的代理名/'
getUser(){
this.$http.get('/api/')
.then((res) => {
console.log(res)
})
.catch((error) => {
console.log(error)
})
}
2、子组件数据在父组件中使用
3、API请求数据地址相关的过滤
4、v-for 列表数据获取完后如何重新渲染
使用v-if
5、v-for 如何遍历数组的部分元素
使用过滤器
this.data.filter((item)=>{
return item 条件
})
6、$router与$route的区别
(1)$router是视图的内置对象,使用时无需this.其有go()方法
(2)$route是vue实例的内置对象,使用时需要this.$route,其有params属性对象
7、自定义全局变量
(1)全局变量专用模块 -> 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好
(2)全局变量模块挂载到Vue.prototype 里 -> 在程序入口的main.js引入全局变量模块,添加下面代码
import global_ from './components/tool/Global'
Vue.prototype.GLOBAL = global_
挂载之后,在需要引用全局量的模块处,不需再导入全局量模块,直接用this就可以引用了
8、for与forEach()的区别
(1)for可以使用break跳出循环
(2)forEach()无法提前终止遍历
9、arr.filter()[0]与arr.filter()区别
(1)arr.filter()[0]返回的是一个符合过滤条件的第一个数组元素,如下:
let localObj = res.result.data.filter((localItem)=>{
return localItem.title == item.title;
})[0];
(2)arr.filter()返回的是一个包含所有符合过滤条件的元素的数组,如下:
let rankList = rankSortArr.filter(function(item){
return item.reading >= 10000;
});
10、使用组件框架(如iView)时,其组件新定义的标签属性无法与Vue的动态数据绑定 -> 即vue实例的属性与方法统一放在原DOM标签元素内绑定!
11、搜索功能的实现,需要正则表达式里面添加变量,解决方法如下:
let pat = eval("/" + self.searchMsg + "/ig");
return pat.test(item.title);
12、实现图片的懒加载 使用Vue-Lazyload插件 -> 参考:https://github.com/hilongjw/vue-lazyload
(1)npm
$ npm install vue-lazyload -D
(2)main.js
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: require('./assets/img/failImg.jpg'),
loading: require('./assets/img/lazyImg.gif'),
attempt: 1,
listenEvents: [ 'scroll', 'mousewheel' ]
})
new Vue({
el: 'body',
components: {
App
}
})
特别注意:如果error和loading的地址为本地,需要加require(''); (3)template
<img :src="body.img" class="bookImg" /> -> <img v-lazy="body.img" class="bookImg" />
注意,在template使用时,v-lazy属性值若为一个变量,则直接在""里写变量;若为一个定值,则需要在"''"添加单引号说明为字符串!
- 注意:本人没有服务器,所以没有动态数据展示!!!