vuex vue-cli锤子商城

2018-06-14 admin

sinker-shop

萌新起步请看: 我们需要用到npm打包工具,所以咱们需要先安装node,不懂为啥要先安装node的话,请百度呢,兄弟。 我们可以用:npm -v来查看我们安装的版本就可以确认是否安装成功。 首先我们用脚手架(不知道脚手架是个啥鬼的请自行百度)vue-cli起步, 我们先建一个文件夹命名为sinkerShop打开命令行终端,(你可以用vscode的ctrl+进入终端,也可以直接用window+r进入cmd命令行)进入到这个文件的路径下,码上几个字母: npm install -g vue-cli 咱们就全局安装了vue-cli,然后呢,我们可以查看下是否安装成功,我们可以使用这几个字母(命令): vue -V (记住是V哦) 使用这个我们可以查看到vue的版本,然后我们可以进行下一步,直接进行建议一个基于webpack的新项目,使用这几个字母: vue init webpack 项目名 我这里用的是 vue init webpack chuizi 然后你可以看到的是 这一大堆的东西,是关于你的文件的设置问题:(萌新们看着办,确定的话直接回车就好了呢) ? Project name chuizi ? Project description A Vue.js project ? Author ? Vue build standalone ? Install vue-router? Yes ? Use ESLint to lint your code? No ? Set up unit tests No ? Setup e2e tests with Nightwatch? No ? Should we runnpm install` for you after the project has been created? (recommended) npm install 成功的话,我们可以跳到我们创建的新项目内。 like this: cd chuizi (在这里我们要用的是vuex,所以用的是以下命令) npm install vuex --save 在我们的package.json中我们看到"dependencies"中我们可以看到"vuex": "^3.0.1"说明我们安装了呢。 npm run dev 到现在为止,我们可以打开浏览器输入"localhost:8080"进行查看了,至此我们的项目就搭建完毕了哦。

我的项目目录中src中的文件夹来给大家介绍下: assets:主要放的是样式文件和图片 css 样式文件 img 图片文件 components:主要是放我们的组件 lib:主要是放数据(自己模拟) router:主要是放路由的配置文件 store:主要放vuex的相关文件 views:所有的单页面 App.js main.js

首先,我们做一个锤子商城的头部,因为头部很多地方都要用到并且都差不多,所以可以把它当做是一个组件。 我们在components组件文件中创建一个header-nav.vue的页面,完成html的编写,并且要有页面的图片图标等放入img文件夹中,然后呢,我们的样式可以在css样式文件夹中进行引用,我们可以创建两个文件一个是reset.css(重置文件)和header-nan.css文件。 因为几乎是共用的样式文件,我们可以直接在路由文件中引用他们,即在router文件夹下的index.js中进行引用,like this: import '@/assets/css/reset.css’ import '@/assets/css/header.css’ 有了页面效果之后我们要做的就是将这个页面加入到APP.vue总组件中: 在template中我们需要做的写入对应的模板,在script中我们需要的是导入这个组件,关键代码如下: template中: <header-nav></header-nav> script中: import headerNav from ‘@/components/header-nav’ 导入 export default 中 components:{ headerNav } 至此,我们的头部组件已经准备好了

我们来写一下我们的首页的商品列表,显而易见这是一个循环列表,我们需要用到的是v-for语句对数据进行循环,而数据哪里来捏,嗯…自己造。首先我们在lib文件夹下创建newGoodsData.js数据内容是商品详情: 数据结构like this: let goodsData = [{ “id”: 1000271, “name”: “坚果 Pro 软胶保护套”, “name_title”: “TPU 环保材质、耐磨、耐油、耐久性强”, “price”: 49, “sku_info”: [{

"sku_id": 100027101,
"title": "坚果 Pro 软胶保护套",
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
"ali_image": "http://image.smartisanos.cn/resource/902befd5f32a8caf4ca79b55d39ee25a.jpg",
"price": 49,
"limit_num": 5,
"spec_json": {
  "image": "attr/v2/1000271/948F029DCF134EF23267994487994DA5/",
  "show_name": "红色"
}

},{

"sku_id": 100027102,
"title": "坚果 Pro 软胶保护套",
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
"ali_image": "http://image.smartisanos.cn/resource/554da94d8e4f84f03e0015fd1c997f46.jpg",
"price": 49,
"limit_num": 5,
"spec_json": {
  "image": "attr/v2/1000271/649AD35E36A9703BACBE1555AEB6D266/",
  "show_name": "黑色"
}

},{

"sku_id": 100027104,
"title": "坚果 Pro 软胶保护套",
"sub_title": "TPU 环保材质、耐磨、耐油、耐久性强",
"ali_image": "http://image.smartisanos.cn/resource/b20055215ae3db0f2c8b7ba4db68866f.png",
"price": 49,
"limit_num": 5,
"spec_json": {
  "image": "attr/v2/1000271/52317E0C067C97FC6CE9376A2432CFFF/",
  "show_name": "浅金色"
}

}] },{ “id”: 1000299, “name”: “Smartisan 快充移动电源 10000mAh”, “name_title”: “10000mAh 双向快充、轻盈便携、高标准安全保护”, “price”: 199, “sku_info”: [{

"sku_id": 100029901,
"title": "Smartisan 快充移动电源 10000mAh",
"sub_title": "10000mAh 双向快充、轻盈便携、高标准安全保护",
"ali_image": "http://image.smartisanos.cn/resource/ae40a16324658c192c7361d829f603bd.jpg",
"price": 199,
"limit_num": 1,
"spec_json": {
  "image": "attr/v2/1000299/B37F37544921114CEF1EC01ED4DF44E4/",
  "show_name": "灰色"
}

}] }]

export default goodsData //将变量进行暴露

在这里将我们定义的变量进行暴露出来,我们在页面就可以通过import拿到这个数据了。 解决了数据来源问题我们需要的是页面的建立,首先我们注册路由,在router文件夹的index.js中进行注册: import Shop from ‘@/views/shop’ 因为是在首页显示所以是默认当前路径: 在routes:[{ path:’/’, name:Shop, component:Shop }] 然后我们进行页面的搭建,写好template中的html和style中的css我们就可以有个可显示的页面了,我们想用我们自己造的数据,我们可以在script中引入,使用: import goodsData from '@/lib/goodsData’ export default{

data(){
    return {
    goodsData:goodsData
    }
}

} 现在我们可以用v-for循环出数据变量goodsData了 <div v-for="(item,index) from goodsData" >{{item}}</div> 嗯,你可以自己搞了。 大概就是: <div class=“item-box”>

<div class="item" v-for="(item,index) in goodsData" :key="index">
    <div>
        <div class="item-img">
            <img :alt="item.name" :src="item.sku_info[0].ali_image+'?x-oss-process=image/resize,w_206/quality,Q_80/format,webp'" style="opacity: 1;">
        </div>
        <h6>{{item.name}}</h6>
        <h3 >{{item.name_title}}</h3>
        <div class="params-colors">
            <ul class="colors-list">
                <li v-for="(sku,index) in item.sku_info " :key="index">
                    <a href="javascript:;"  :title="sku.spec_json.show_name">                       
      <img:src="'http://img01.smartisanos.cn/'+sku.spec_json.image+'20X20.jpg'">
                    </a>
                </li>
            </ul>
        </div>
        <div class="item-btns clearfix">
            <span class="item-gray-btn">
                <a href="javascript:;" target="_blank">查看详情</a> 
            </span>
            <span class="item-blue-btn">加入购物车 </span>
        </div>
        <div class="item-price clearfix">
            <i>¥</i><span>{{item.price}}</span>
        </div>
        <div class="discount-icon">false</div>
            <div class="item-cover">
                <a href="javascript:;" target="_blank"></a>
            </div>
        </div>
    </div>
</div>

我们知道商城是一个很复杂的东西呢,所以我们可以将商品列表中的每一个相同的商品做成一个组件,这样别的模块中也可以进行使用,这里涉及到了父组件向子组件传递数据的知识即props 我们可以写一个goods-item的组件,然后呢我们在父组件就是shop中: <goods-item v-for="(item,index) in goodsData" :key=“index” :item=“item”></goods-item> 我们在父组件中自定义了一个变量就是item,他的值是我们循环出来的item,我们把这个值传递给子组件 在子组件中我们如何接受父组件传递过来的值呢。 如下: props:{ item{

type:Object

} } 我们获取到了数据后直接进行循环出来,接下来,我们要做的是点击各个颜色按钮出现相应的颜色图片,<img :alt=“item.name” :src=“item.sku_info[0].ali_image+’?x-oss-process=image/resize,w_206/quality,Q_80/format,webp’” style=“opacity: 1;”>改为: <img :alt=“item.name” :src=“item.sku_info[itemindex].ali_image+’?x-oss-process=image/resize,w_206/quality,Q_80/format,webp’” style=“opacity: 1;”> data(){

return{
    itemindex
}

} 并且颜色选择按钮当选择对按钮进行加上active的类名(采用三元运算符 :class="{itemindex=== index ?‘active’:’’}"),我们知道的是@clic可以为我们添加事件: @click=“itemIndex(index)” 我们将循环中的index作为参数: methods:{ itemIndex(index){

this.itemindex = index
}

}

原文链接:https://segmentfault.com/a/1190000015284000

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34018.html

文章标题:vuex vue-cli锤子商城

相关文章
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的&lt;span style=“color: orange;”&gt;“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
按照正常的产品逻辑,我们在进行页面切换时滚动条应该是在页面顶部的,可是。。。在使用vue-router进行页面切换时,发现滚动条所处的位置被自动记录了下来,且在另一个组件内定义的滚动监听事件仍会运行,着实吃了一大惊。。。 说说我的破解方法:...
2017-03-13
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
Vue.js 2.0中select级联下拉框实例
在网上搜索了Vuejs2.0 动态级联select许久未果,决定自己总结一下自己的经验,有关select在Vue.js 2.0版本中的应用。首先我先说一下的我使用的技术,我参考了网上成熟的经验,选择以Vue.js 2.0+Vue-route...
2017-03-14
Vue.js原理分析之observer模块详解
介绍 observer是Vue核心中最重要的一个模块(个人认为),能够实现视图与数据的响应式更新,底层全凭observer的支持。 **注意:**本文是针对Vue@2.1.8进行分析 observer模块在Vue项目中的代码位置是src/c...
2017-03-16
详解vue-validator(vue验证器)
官方文档:http://vuejs.github.io/vue-validator/zh-cn/index.html github项目地址:https://github.com/vuejs/vue-validator 单独使用vue-val...
2017-03-07
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件。 首先使用基础 Vue 构造器,创建一个“子类”,Vue.extend( options ) var barHtml = &#x27;&...
2017-03-15
详解Vue2 无限级分类(添加,删除,修改)
本人对vue不是很懂,搜索了很多关于Vue2 无限级分类介绍,下面我来记录一下,有需要了解Vue2 无限级分类的朋友可参考。希望此文章对各位有所帮助。 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en...
2017-03-13
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
回到顶部