时间戳

首页 > 技术文章 > 用vue2做一个全家桶项目过程（vue-cli + vue2 + vue-router2 + vuex2 + axios + es6 + sass + eslint）

用vue2做一个全家桶项目过程（vue-cli + vue2 + vue-router2 + vuex2 + axios + es6 + sass + eslint）

art-poet 2020-03-16 11:09 原文

实现功能

主要用到的技术：
vue-cli + vue2 + vue-router2 + vuex2 + axios + es6 + sass + eslint

主要实现的功能：
页面的数据通过 axios 模拟请求本地的 json 文件获得；
vue-router2 实现各页面的相互跳转；
vuex2 全局状态的管理，如头部导航的标题内容，侧栏的显示状态；
简易购物车功能，详情页加入购物车的商品，随机生成单价、商品名字；
购物车的信息通过localstorage存储在本地；
注册登录的信息也是通过localstorage存储在本地。

项目目录结构

proj5-shop 目录结构，主要看src目录和static目录的：

│--build
|--config
|--dist
|--src
    |--assets
        |--logo.png
    |--components
        |--cart                 购物车页
        |--cate                 商品列表页，商品详情页
        |--center               个人中心，注册登录
        |--com                  公共模块
            |--header.vue       头部
            |--loading.vue      加载
            |--sidebar.vue      导航侧栏
            |--swiper.vue       轮播
            |--jam.js           公共功能函数
            |--localDB.js       localStorage本地存储
        |--page                 首页
        |--Hello.vue
|--static                       本地数据模拟请求（需放static目录下）
    |--data
        |--cart.json
        |--cate.json
        |--index.json
    |  .gitkeep
|--test
│  .babelrc
│  .editorconfig
│  .eslintignore
│  .eslintrc.js
│  .gitignore
│  index.html
│  package.json
│  README.md

vue-cli 初始化及配置修改

vue-cli 脚手架官方安装：https://github.com/vuejs-templates/webpack

$ npm install -g vue-cli
$ vue init webpack proj5-shop
$ cd proj5-shop
$ npm install
$ npm run dev

vue-cli初始化完成后，继续新增安装以下依赖：

cnpm install axios node-sass vuex sass-loader vue-swipe --save-dev

修改 build/webpack.base.conf.js，使其对import引入的sass支持：

{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: vueLoaderConfig
}
// 将上面的修改成下面的：
{
  test: /\.vue$/,
  loader: 'vue-loader',
  options: {
    loaders: {
      'scss': 'vue-style-loader!css-loader!sass-loader',
      'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
    }
  }
}

关键功能技术点剖析

axios 数据请求

首页的数据请求：
首先在入口文件 main.js 引入 axios，并将其挂在到 Vue 全局方法下：

// main.js
import axios from 'axios'
Vue.prototype.$http = axios

在页面中使用：

this.$http.get('../../static/data/index.json').then((response) => {
          this.dataIndex = response.data
        }, (response) => {
          // error
        })

router 的跳转

router/router.js 路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

import App from '../App.vue'
import Index from '../components/page/index.vue'
import Cate from '../components/cate/cate.vue'
import Detail from '../components/cate/detail.vue'
import Center from '../components/center/center.vue'
import Cart from '../components/cart/cart.vue'

export default new VueRouter({
  routes: [
    {
      path: '/',
      redirect: '/index',
      component: App,
      children: [
        {path: 'index', name: 'index', component: Index},
        {path: 'cate', name: 'cate', component: Cate},
        {path: 'detail', name: 'detail', component: Detail},
        {path: 'center', name: 'center', component: Center},
        {path: 'cart', name: 'cart', component: Cart}
      ]
    }
  ],
  linkActiveClass: 'footer-act'
})

主要是通过 router-link 来跳转，比如导航栏 com/sidebar.vue 的跳转：

<ul class="ul-nav" v-show="show">
  <li><router-link to="/index"><span>首页</span><i>></i></router-link></li>
  <li><router-link to="/cate"><span>分类</span><i>></i></router-link></li>
  <li><router-link to="/center"><span>我的</span><i>></i></router-link></li>
  <li><router-link to="/cart"><span>购物车</span><i>></i></router-link></li>
</ul>

vuex 状态管理

vuex 状态管理主要是头部的显示信息、导航栏的显示隐藏状态：

先来看 store/store.js ：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    sideBarState: false,            //导航侧栏的显示状态
    headerTitle: '默认的头部标题'   //不同页面头部标题的变更
  },
  mutations: {
    changeSideBarState (state, boolean) {
      state.sideBarState = boolean
    },
    changeHeaderTitle (state, str) {
      state.headerTitle = str
    }
  },
  actions: {
    // changeSideBarState (context, status) {
    //   context.commit('changeSideBarState', status)
    // }
    // es6解构写法
    changeSideBarState ({commit}, status) {
      commit('changeSideBarState', status)
    },
    changeHeaderTitle ({commit}, str) {
      commit('changeHeaderTitle', str)
    }
  },
  getters: {
    getSideBarState (state) {
      return state.sideBarState
    },
    getHeaderTitle (state) {
      return state.headerTitle
    }
  }
})

例如，在进入分类页 cate/cate.vue 时，会在 created 的时候触发头部标题的变更；
当点击头部 导航 时，又会触发导航侧栏的显示状态的变更：

created () {
  this.$store.dispatch('changeHeaderTitle', '分类')
},
methods: {
  showSideBar () {
    return this.$store.dispatch('changeSideBarState', true)
    // return this.$store.commit('changeSideBarState', true)
  },
  hideSideBar () {
    return this.$store.dispatch('changeSideBarState', false)
  }
}

 

推荐阅读