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>

文章来源: https://blog.csdn.net/weixin_44424187/article/details/90342508

标签

vue

fastclick