Vue从零到实战项目

原文链接：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

  <keep-alive>

  <router-view></router-view>

  </keep-alive>