npm install --g vue-cli

vue init webpack myproject(項(xiàng)目目錄名稱)

npm install vuex --save

/**
 * home.js
 * 用于home模塊的狀態(tài)管理
 */
import * as types from '../mutation-type' // 引入定義的方法
const home = {
 state: {
 number: 1
 },
 mutations: {
 [types.SET_NUM](state, num) { // 修改state 可通過mapMutations調(diào)用
 state.number = num
 }
 },
 actions: {},
 getters: {  // 定義getters，可以通過mapGetters拓展函數(shù)調(diào)用
 number: state => {
 return state.number
 }
 }
}
export default home // 輸出home模塊

import Vue from 'vue'
import Vuex from 'vuex'
import home from './modules/home'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)
const debug = true

export default new Vuex.Store({
 modules: {
 home
 },
 plugins: debug ? [createLogger()] : [] // 是否開啟vuex的debug模式
})

import {mapMutations, mapGetters, mapState} from 'vuex' // 引入map方法
export default {
 data () {
 return {
 num: 0
 }
 },
 methods: {
 ...mapMutations({  // 調(diào)用setNum方法
 setNum: 'SET_NUM'
 }),
 increase() {
 this.num++
 this.setNum(this.num) // 將this.num轉(zhuǎn)入setNum
 }
 },
 computed: {
 // ...mapGetters([  // 通過getters獲取state數(shù)據(jù)
 // 'number'
 // ]),
 ...mapState({  // 通過state獲取state數(shù)據(jù)
 number: state => state.home.number
 })
 }

npm install axios --save

/* eslint-disable */
import axios from 'axios'

/**
* 定義請求常量
* TIME_OUT、ERR_OK
*/
export const TIME_OUT = 1000; // 請求超時時間
export const ERR_OK = true; // 請求成功返回狀態(tài)，字段和后臺統(tǒng)一
export const baseUrl = process.env.BASE_URL // 引入全局url，定義在全局變量process.env中，開發(fā)環(huán)境為了方便轉(zhuǎn)發(fā)，值為空字符串

// 請求超時時間
axios.defaults.timeout = TIME_OUT

// 封裝請求攔截
axios.interceptors.request.use(
 config => {
 let token = localStorage.getItem('token') // 獲取token
 config.headers['Content-Type'] = 'application/json;charset=UTF-8'
 config.headers['Authorization'] = ''
 if(token != null){    // 如果token不為null，否則傳token給后臺
  config.headers['Authorization'] = token
 }
 return config
 },
 error => {
 return Promise.reject(error)
 }
)
// 封裝響應(yīng)攔截，判斷token是否過期
axios.interceptors.response.use(
 response => {
 let {data} = response
 if (data.message === 'token failure!') { // 如果后臺返回的錯誤標(biāo)識為token過期，則重新登錄
 localStorage.removeItem('token')  // token過期，移除token
 // 進(jìn)行重新登錄操作
 } else {
 return Promise.resolve(response)
 }
 },
 error => {
 return Promise.reject(error)
 }
)
// 封裝post請求
export function fetch(requestUrl, params = '') {
 return axios({
 url: requestUrl,
 method: 'post',
 data: {
 'body': params
 }
 })
}

/**
 * 引入fetch、baseUrl
 * @param params
 * @returns {*}
 */
import {fetch, baseUrl} from 'config/index'
// 登錄接口
export function loginUserNo(params) {
 return fetch(`${baseUrl}/root/login/checkMemberLogin`, params)
}

import * as homeApi from 'api/home-api' // 引入api
import { ERR_OK } from 'config/index' // 引入請求成功狀態(tài)
// 請求方法
login() {
 let params = {
 password: '*******',
 storeNo: '',
 userName: '*********'
 }
 homeApi.loginUserNo(params).then((res) => {
 let {data} = res
 if (data.success === ERR_OK) {
  // 請求成功操作，存儲token
  localStorage.setItem('token', data.value.token)
 } else {
 }
 }).catch(() => {
 })
 }
}

npm install lessless-loader --save-dev

{
 test: /\.less$/,
 loader: 'style-loader!css-loader!less-loader'
 },

<style scoped lang="less">
@import "~styles/index.less";
@import "~styles/variable.less";
.hello{
 h1{
 color: red;
 .fs(38); // mixin里數(shù)字大小函數(shù)
 }
}
</style>

// 需要左方向動畫的路由用this.$router.to('****')
Router.prototype.togo = function (path) {
 this.isleft = true
 this.isright = false
 this.push(path)
}
// 需要右方向動畫的路由用this.$router.goRight('****')
Router.prototype.goRight = function (path) {
 this.isright = true
 this.isleft = false
 this.push(path)
}
// 需要返回按鈕動畫的路由用this.$router.goBack()，返回上一個路由
Router.prototype.goBack = function () {
 this.isright = true
 this.isleft = false
 this.go(-1)
}
// 點(diǎn)擊瀏覽器返回按鈕執(zhí)行，此時不需要路由回退
Router.prototype.togoback = function () {
 this.isright = true
 this.isleft = false
}

<template>
 <div id="app">
 <transition :name="transitionName">
 <router-view class="Router"></router-view>
 </transition>
 </div>
</template>

<script>
export default {
 name: 'App',
 data() {
 return {
 transitionName: 'slideleft'
 }
 },
 watch: {
 $route() { // 監(jiān)聽路由變化重新賦值
 if (this.$router.isleft) {
 this.transitionName = 'slideleft'
 }
 if (this.$router.isright) {
 this.transitionName = 'slideright'
 }
 }
 }
}
</script>

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
.Router {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 width: 100%;
 height: 100%;
 transition: all .5s ease;
 -webkit-transition: all .5s ease;
 -moz-transition: all .5s ease;
}
.slideleft-enter,
 .slideright-leave-active {
 opacity: 0;
 -webkit-transform: translate(100%, 0);
 transform: translate(100%, 0);
}
.slideleft-leave-active,
.slideright-enter {
 opacity: 0;
 -webkit-transform: translate(-100%, 0);
 transform: translate(-100%, 0);
}
</style>

this.$router.goBack() // 返回
this.$router.to('****') // 進(jìn)入到詳情

 window.addEventListener('popstate', function(e) {
 router.togoback() // router已經(jīng)在上面import進(jìn)來
}, false)

npm install mint-ui --save

import Mint from 'mint-ui'
import 'mint-ui/lib/style.css' // 引入css
Vue.use(Mint) // 全局使用

npm install fastclick --save

// 在main.js引入
import FastClick from 'fastclick'
FastClick.attach(document.body)