vue-cli脚手架

安装

按照以下顺序执行

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g vue-cli (用npm不行，因为要从谷歌下载)
vue init webpack vuetest //在当前目录生成vuetest目录的vue-cli项目
cd vuetest
npm install
npm run dev

局部安装：

npm install vue-cli //局部安装
npx vue //当前目录使用要使用加上npx，才能调用vue命令

npx vue init webpack vuetest //在当前目录生成vuetest目录的vue-cli项目
cd vuetest
npm install
npm run dev

成功后访问：http://localhost:8080/#/

子路由

(类似可以创建admin后台管理)

import Adminbig from '@/components/Adminbig' //里面要加上<router-view/>
import Admin from '@/components/Admin'
import Bb from '@/components/Bb'

编辑：router/index.js

export default new Router({
  mode:'history', //可以去除url中的#,且可以前进、后退，但是对浏览器的要求高
  routes: [
    {  
      path: '/admin',
      name: 'Adminbig',
      component: {
        Adminbig:Adminbig, 
        viewB:Bb //<router-view name="viewB"> </router-view>
      },
      children:[
        {
          path: 'index',
          component: Admin
        }
      ]
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

访问：http://localhost:8080/admin/index

移除url中#
默认安装vue-cli中url是会带有#的

export default new Router({
  mode:'history', //可以去除url中的#,且可以前进、后退，但是对浏览器的要求高
  routes: [
    {
     path: '/',
     name: 'HelloWorld',
     component: HelloWorld
    },
    {
     path: '/123/:color',
     name: 'Diy',
     component: Diy
    }
  ]
})

get传参

{
 path: '/123/:color',
 name: 'Diy',
 component: Diy
}

<button @click="get_param">获取参数</button>
<p>也可以在页面打印参数{{$route.params.color}}</p>
methods:{
  get_param : function () {
     console.log(this.$route.params); //{color: "dgfg"}
  }
}

http://localhost:8080/#/123/dgfg

post提交

vue-lic是主张使用前后端分离的，后台并没有像koa、express那样能接收post数据的路由。

所以可以使用vue-source、axios类似的模块去post请求接口然后提交数据。

显示路由的内容

<router-view/>
或者
<router-view><router-view/>

链接

<router-link to="/123">新闻</router-link>
<router-link :to="{path:'123',param:{color:'参数1'}}">新闻</router-link> //动态链接
<router-link :to="{name:'路由的命名'}">新闻</router-link>
<router-link :to="{path:'123'}" tag='li'>新闻</router-link> // <li>新闻</li>
<router-link to="/123" replace>新闻</router-link> //History模式就不能使用前进后退了

或者用js控制跳转

<button @click="xx"></button>

export default {
  methods:{
    xx:function(){
      this.$router.push('/123');
    }
 }
}

router.beforEach(route.push('123'))

自动跳转 重定向302

export default new Router({
  routes: [
   {
     path: '/admin',
     name: 'Adminbig',
     component: Adminbig,
     children:[
       {
         path: 'index',
         component: Admin
       }
     ]
   },
   {
      path:'/123/:color',
      redirect:'/admin/index' // 访问/123/:color页面时候就自动跳转到/admin/index
   },
   {
      path: '/123/:color',
      name: 'Diy',
      component: Diy
   }
 ]
})

动画

<transition name="fade">
 <keep-alive> //动画缓存,避免下去又重新渲染耗资源
 <router-view></router-view>
 </keep-alive>
</transition>

vuex状态管理

例如：用户登录状态，同一个页面很多地方需要调用到，进行逻辑判断。
或者用户在退出又，其他地方也需要同步更新

每个组件更新都要通知一下vuex，vuex接收到后，又统一通知所有的组件。

//编辑 main.js

import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.use(Vuex)

var store=new Vuex.Store({
 state:{
   a:111
 }
})


new Vue({
 el: '#app',
 router,
 store,
 components: { Appvv },
 template: '<Appvv/>'
})

可以在任意页面调用：{{$route.params.color}}

404页面

import HelloWorld404 from '@/components/404'

export default new Router({
 routes: [
   {
    path: '*',
    name: 'HelloWorld',
    component: HelloWorld404
   }
 ]
})

单独修改某个页面内容

例如修改某个页面的title

//编辑main.js

router.beforeEach((to, from, next) => {
 /* 页面要显示出来前，先把数据填充进div中后在展示出页面 */
 window.document.title=to.meta.title;
 next();
})


new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>'
})

//编辑router目录的index.js
export default new Router({
 routes: [
  {
    path: '/',
    name: 'HelloWorld',
    component: HelloWorld,
    meta:{
      title:'自定义内容'
    }
  },
  {
    path: '/123',
    name: 'HelloWorld',
    component: HelloWorld123,
    meta:{
      title:'内容123'
    }
  },
  {
    path: '*',
    name: 'HelloWorld',
    component: HelloWorld404
   }
 ]
})

数据库交互

//编辑main.js
import VueResource from 'vue-resource'
Vue.use(VueResource)

//编辑 components/HelloWorld.vue

import Mock from 'mockjs'

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      json:[]
    }
  },
  mounted:function(){

    var data = Mock.mock('/home',{
     'list|1-10': [{
       'id|+1': 1
     }]
    });


    this.$http.get('/home').then((res)=>{
      console.log(res)
    })

 },
 methods:{
    get_param : function () {
      console.log(this.$route.params);
    }
 }
}

cookie

cnpm install vue-cookies --save


//编辑main.js
import VueCookies from 'vue-cookies'

Vue.use(VueCookies)

//编辑 components/HelloWorld.vue


mounted:function(){
 this.$cookies.set("token1","GH1.1.1689020474.1484362313","1MIN");
}


取值：
this.$cookies.get(keyName)
this.$cookies.keys() // 取所有值，返回数组

判断值是否存在
this.$cookies.isKey(keyName) // return false or true


删除：
this.$cookies.remove(keyName [, path [, domain]])

时间过期：
this.$cookies.set("default_unit_second","input_value",60 + 30); 1分30秒过期
this.$cookies.set("token","GH1.1.1689020474.1484362313","60s");
60s
30MIN
16h
24d
4m
3y


其他：
this.$cookies.set("use_path_argument","value","1d","/app","domain.com",true);

// set path
this.$cookies.set("use_path_argument","value","1d","/app");

// set domain
this.$cookies.set("use_path_argument","value",null, null, "domain.com"); // default 1 day after,expire

// set secure
this.$cookies.set("use_path_argument","value",null, null, null,true);

https://www.npmjs.com/package/vue-cookies

session

浏览器本地session storage，浏览器关闭值就会删除

cnpm install vue-session --save-dev


//编辑main.js

import VueSession from 'vue-session'
Vue.use(VueSession)

this.$session.getAll(), returns all data stored in the Session.
this.$session.set(key,value), sets a single value to the Session.
this.$session.get(key), returns the value attributed to the given key.
this.$session.start(), initializes a session with a 'session-id'. If you attempt to save a value without having started a new session, the plugin will automatically start a new session.
this.$session.exists(), checks whether a session has been initialized or not.
this.$session.has(key), checks whether the key exists in the Session
this.$session.remove(key), removes the given key from the Session
this.$session.clear(), clear all keys in the Session, except for 'session-id', keeping the Session alive
this.$session.destroy(), destroys the Session
this.$session.id(), returns the 'session-id'
this.$session.renew(session_id), allows a user to renew a previous session by manually inputting the session_id