目录
1. 安装node10 :node-v10.24.1-x64.msi，查看是否安装成功
2. 在F盘创建文件夹demo,cmd进入命令行窗口，cd命令进入指定目录
7.安装[email protected] webpack-cli@3
12.创建组件文件src\components\GoodsList.vue
13.创建组件文件src\components\Shopcart.vue
19.创建管理商品状态src\store\modules\goods.js
20.创建src\store\modules\shopcart.js
1. 安装node10 :node-v10.24.1-x64.msi，查看是否安装成功
node -v2. 在F盘创建文件夹demo,cmd进入命令行窗口，cd命令进入指定目录
f:
cd demo3.初始化项目
4.设置淘宝镜像
npm config set registry https://registry.npm.taobao.org或
npm config set registry https://registry.npmmirror.com5.安装vue@2
npm i -g vue@2 -g6.安装vue-cli
npm I –g vue-cli -g
7.安装[email protected] webpack-cli@3
npm i [email protected] webpack-cli@3 --save
8.创建项目
vue init webpack shopcart回车回车回车回车.....
9.进入shopcart目录，安装vuex
cd shopcart
npm i [email protected] --save
10.运行服务，浏览器查看结果
npm run dev浏览器地址栏输入：localhost:8080
11.实现底部Tab栏的切换
将图片资源复制到static目录下
12.创建组件文件src\components\GoodsList.vue
<template>
<div>
goodslist
</div>
</template>
<script>
</script>
<style>
</style>13.创建组件文件src\components\Shopcart.vue
<template>
<div>
shopcart
</div>
</template>
<script>
</script>
<style>
</style>14.修改src\router\index.js
import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/components/GoodsList'
import Shopcart from '@/components/Shopcart'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'GoodsList',
component: GoodsList
},
{
path: '/shopcart',
name: 'Shopcart',
component: Shopcart
}
]
})15.修改入口src\App.vue，浏览器看结果
<template>
<div id="app">
<div class="content">
<router-view></router-view>
</div>
<div class="bottom">
<router-link to="/" tag="div">商品列表</router-link>
<router-link to="/shopcart" tag="div">购物车</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
</style>
16.修改入口src\App.vue，加入样式
<template>
<div id="app">
<div class="content">
<router-view></router-view>
</div>
<div class="bottom">
<router-link to="/" tag="div">商品列表</router-link>
<router-link to="/shopcart" tag="div">购物车</router-link>
<!-- <router-link to="/shopcart" tag="div">购物车</router-link> -->
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
html,body{
height: 100%;
}
body{
margin: 0;
font-size: 12px;
box-sizing: border-box;
}
</style>
<style scoped>
#app{
height: 100%;
display: flex;
flex-direction: column;
}
.content{
flex: 1;
overflow-y: scroll;
}
.bottom{
height: 40px;
display: flex;
border-top: 1px solid #ccc;
}
.bottom>div{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
color: #444;
}
.bottom>div:not(:last-child){/* 复合选择器 */
border-right: 1px solid #ccc;
}
.bottom>div.router-link-exact-active{
color: #f18741;
font-weight: bold;
background: #fef5ef;
}
</style>17.浏览器查看结果
18.创建商品数据src\api\shop.js
const data=[
{'id':1,"title":'电水壶','price':59.01,src:"/static/1.jpg"},
{'id':2,"title":'压力锅','price':159.01,src:"/static/2.jpg"},
{'id':3,"title":'电饭煲','price':259.01,src:"/static/3.jpg"},
{'id':4,"title":'电磁炉','price':359.01,src:"/static/4.jpg"},
{'id':5,"title":'微波炉','price':459.01,src:"/static/5.jpg"},
{'id':6,"title":'电饼铛','price':559.01,src:"/static/6.jpg"},
{'id':7,"title":'豆浆机','price':659.01,src:"/static/7.jpg"},
{'id':8,"title":'电热锅','price':759.01,src:"/static/8.jpg"},
]
export default{
getGoodsList(callback){
setTimeout(()=>callback(data),100) //单位是毫秒值
}
}19.创建管理商品状态src\store\modules\goods.js
import shop from '../../api/shop'
const state = {
list: [] //存储商品列表
}
const getters = {} //用于计算的
// 获取商品列表数据
const actions = {
getList ({ commit }) {
shop.getGoodsList(data => {
commit('setList', data)
})
}
}
// 将商品列表保存到state中
const mutations = {
setList (state, data) {
state.list = data
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
20.创建src\store\modules\shopcart.js
const state = {
items: [] //保存购物车列表
}
const getters = {}
const actions = {}
const mutations = {}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}21.创建src\store\index.js
import Vue from 'vue'
import Vuex from 'vuex'
import goods from './modules/goods'
import shopcart from './modules/shopcart'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
goods,
shopcart
}
})22.修改src\main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
store
})