![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue.js自学记录(搭建小商城)
QINGDONG¥
编程自学的成长记录
展开
-
第二步,Vue Router安装和使用
在前面第一步已经搭建好了Vue的开发环境,现在安装和使用VUE路由器动态路由。第一步安装vue router:打开cmd进入工作目录即firstVue所在的文件夹,输入命令安装vue router:npm install vue-router安装完成之后,开始使用vue router:①我们新建一个文件夹并命名为view,然后在文件夹下新建test.vue:② 到router文件夹下 》inde...原创 2018-05-25 12:20:52 · 7791 阅读 · 1 评论 -
第一步---在window下搭建Vue.Js开发环境(和项目文件目录介绍和vue调试工具谷歌vue-devtools插件下载)
搭建Vue.Js开发环境1-nodejs官网http://nodejs.cn/下载安装包,(最好不要装在c盘)2-安装完node.js之后,打开cmd输入:(1)-node -v //显示node版本(2)-npm -v //显示npm包管理器版本3-由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所有我还需要npm的国内的镜像cnpm安装方法:cmd命...原创 2018-05-21 21:25:13 · 1343 阅读 · 0 评论 -
第八,学习less和reset.css的引用 完成首页活动、商品推荐模块。
第七,完成了vue轮播图的使用,接下来完成首页的活动,商品模块一,less的引用使用方法和介绍 https://www.jianshu.com/p/bf641d9d979a①首先安装less,cmd进入项目目录,输入命令$ cnpm install less less-roader --save-dev。②安装完成之后就可以使用了,在<style>lang 属性定义就可以。二...原创 2018-06-03 20:17:11 · 515 阅读 · 0 评论 -
第三,vue router路由嵌套
前面已经完成了原创 2018-05-27 22:42:23 · 288 阅读 · 0 评论 -
第四,vue-router编程式路由(和vue-cli关闭Eslint验证)
vue-router编程式路由编程式路由就是通过写js代码来实现页面的跳转。①在test.vue组件里面写个div并添加click事件。$router.push('name'); 或者 $router.push({path: 'name'});这两个方法是等效的。②在view文件夹下新建立goods.vue并且内容:③在router文件夹下index.js里面引入goods组件。④进入cmd运行命...原创 2018-05-28 12:52:29 · 661 阅读 · 0 评论 -
第五,vue-router命名路由和命名视图(以及学完vue-router总结)
前面把动态路由、嵌套路由等弄完了,这里搞完命名路由和命名视图,vue-router的基本使用方法就算是完篇了。vue-router命名路由①命名路由就是在routers配置路由名称的时候给路由定义不同的名字,这样的好处就是可以在使用router-link的to属性跳转路由的时候传一个对象从而实现与router.push一样的效果:<router-link :to="{ name: 'user...原创 2018-05-28 13:49:53 · 2964 阅读 · 0 评论 -
第六,vue组件及应用-创建头部组件
vue组件及应用-创建头部组件①在components文件夹下面新建文件myHeader.vue组件,删掉留下来的helloworld.vue。在myHeader.vue输入下面内容:分析:myHeader.vue页面分成三个部分:1,<template></template>里面放的是html代码,为结构部分。2,<script></script>...原创 2018-05-29 14:15:07 · 4215 阅读 · 0 评论 -
第七,轮播图组件及vue-awesome-swiper的引入
轮播组件vue-awesome-swiper使用方法和介绍:GitHub地址在这里:https://github.com/surmon-china/vue-awesome-swiper,官网介绍这里:https://surmon-china.github.io/vue-awesome-swiper/;安装方法:用npm安装vue-awesome-swipercmd进入项目目录,执行命令:cnpm ...原创 2018-05-31 15:27:52 · 819 阅读 · 0 评论