vue2全家桶是什么，如何使用？

# 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 安装依赖，走你 $ cd my-project $ npm install $ npm run dev

import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/Home'import Chat from '@/components/Chat'import Firends from '@/components/Firends'import Logon from '@/components/Logon'Vue.use(Router) let router=new Router({ routes: [ { path: '/home', name: 'Home', component: Home }, { path: '/', redirect: '/home' },//重定向 { path: '/chat', name: 'Chat', component: Chat }, { path: '/firends', name: 'Firends', component: Firends }, { path: '/logon', name: 'Logon', component: Logon } ] });

首页

router.beforeEach((to, from, next) => { //todo 以后增加不需要验证的地址判断 if(to.path!=="/logon"&&!store.state.userInfo.Account){ next({ path: '/logon' }) return; }else{ next(); } })

首页 统计 更多

import VFooter from './VFooter' export default { name: 'app', data () {return { msg: 'this is home'} },components:{VFooter}}

import Footer from './components/VFooter'//Vue.component('VFooter', Footer)//写在构造函数之前

.slide-out-enter-active, .slide-out-leave-active, .slide-in-enter-active, .slide-in-leave-active { will-change: transform; transition: all 400ms; position: absolute; }.slide-out-enter { opacity: 0; transform: translateX(-100%); }.slide-out-leave-active { opacity: 0; transform: translateX(100%); }.slide-in-enter { opacity: 0; transform: translateX(100%); }.slide-in-leave-active { opacity: 0; transform: translateX(-100%);

proxyTable: { '/api': { target: 'http://11.111.249.12:11', changeOrigin: true, pathRewrite: { '^/api': '' } },

import VueResource from 'vue-resource'Vue.use(VueResource); Vue.http.interceptors.push(function(request, next) {// modify method //request.method = 'POST'; // modify headers request.headers.set('token',“token”);// continue to next interceptor next(); });

let login=(name,pwd,success,fail)=>}).then(res=>

{{hasLogin}}

data () { return { hasLogin:window.hasLogin } }, methods:{ toggle(){ window.hasLogin=!window.hasLogin; console.log("clicked",window.hasLogin) } },

this.hasLogin=window.hasLogin;

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const userStore=new Vuex.Store({ state:{ userInfo:{ userName:"" } }, getters:{ getUserInfo(state){ return state.userInfo; } }, mutations:{ setUserInfo(state,userInfo){ state.userInfo=userInfo; } }, actions:{ setUserInfo({commit}){ commit('setUserInfo'); } } }) export default userStore;

import store from './store/user';//... new Vue({ el: '#app', router, store, template: '', components: { App } })

import store from '@/store/user'; //... store.commit('setUserInfo',user)

computed:{ ...mapGetters({username:'getUserName'}) },

if (window.sessionStorage.user) { var json=JSON.parse(window.sessionStorage.user); store.commit('setSessionUser',json)}

==