原文链接：http://www.3mooc.com/front/articleinfo/97
项目概要
本项目用到的技术栈： vue-cli + vue-router + vuex + axios
如何在本地运行本项目
git clone https://gitee.com/ehcto/vuecli3_rangers.git
cd vuecli3_rangers
npm i 或 cnpm i
npm run serve
项目文档说明
├── node_modules/ #模块文件
├── src/ #项目入口目录
├── assets/ #前端资源目录
├── components/ # vue组件目录/.vue文件存放目录
├── router/ # vue路由管理目录
├── store/ # vuex状态管理目录
├── App.vue # 项目根组件
├── main.js # 项目入口文件
├── test/ #测试目录
├── package.json #包文件信息
├── .babelrc
├── README.md
功能简单介绍
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//reset.css ==>重置样式
import './assets/css/reset.css'
//fastClick ==>解决click事件在移动端300ms延迟的问题
import FastClick from 'fastclick'
FastClick.attach(document.body);
//引入字体图标
import './assets/css/iconfont.css'
//引入适配font.js文件
import './assets/js/font.js'
//引入swiper
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
import './assets/css/swiper.css'
//引入动画库animate.css
import animate from 'animate.css'
//引入axios
import axios from 'axios'
Vue.prototype.axios = axios
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
路由管理
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import Home from './components/home/Home'
export default new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/city',
name: 'city',
component: () => import('./components/city/City.vue')
},
{
path: '/details',
name: 'details',
component: () => import('./components/details/Details.vue')
}
]
})
vuex管理
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let defaultCity = '北京';
defaultCity = localStorage.city;
export default new Vuex.Store({
state: {
cityName:defaultCity
},
mutations: {
changeCity(state,city){
state.cityName=city;
localStorage.city=city
}
},
actions: {
}
})
App.vue
<template>
<div>
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
</template>
