vuejs总结

1、vuejs + webpack 项目创建指令

安装 nodejs 环境
node下载：nodejs 官方网站

在安装好了 nodejs 之后，我们在终端中输入以下两个命令：

node -v
npm -v
 

若能够得到如上图的版本号信息，则说明 nodejs 环境已经安装完成了。 
检查本地npm版本：npm -v，如果版本太低可以通过：npm install -g npm进行升级。

全局安装vue-cil
vue-cil是vue的脚手架工具。命令如下：

npm install -g vue-cli

这个命令只需要运行一次就可以了。安装上之后，以后就不用安装了。

安装完成后，我们在终端中输入：

vue -V

如果输出如上图的版本号信息，则代表你安装正确。

全局安装webpack
若没有安装webpack，则输入以下命令行进行npm安装

npm install webpack -g

vue-cil构建项目
用 vue-cli 构建一个项目

下面，新建一个自己的vue项目：

vue init webpack vuedemo
1
项目名称是不是 vuedemo ，按回车，表示，是。当然，你也可以重写一个，然后回车。 
Project name vuedemo ? Yes

是不是一个 vue.js 的项目。同样，我们可以填写内容，或者直接回车 
Project description A Vue.js project ? Yes

作者姓名，直接回车 ，或自己输入也行 
Author ? Yes

这里是问你，需要不需要安装编译器，我们选择需要安装，也就是第一个，也就是直接回车就OK了。 
Vue build standalone ? Yes

问是不是需要安装 vue-router ，需要安装，这个是管理路由的。我们直接回车。 
Install vue-router? Yes

是否需要使用 ESLint 来检查你的代码。需要！所以同上，我们直接回车或N。 
Use ESLint to lint your code? No

是否需要安装测试功能。不要。我们输入 n 然后回车。 
Set up unit tests No ?

还是关于测试的内容，我们还是输出 n 然后回车。 
Setup e2e tests with Nightwatch? No

如下图： 

接下来

根据图上的提示，继续

 cd vuedemo
 npm run dev

就可以启动项目了。在浏览器里面打开localhost:8080,页面如下： 

这时的目录是这样的 
node_modules已经存在，就不需要npm install。

没有install的话，还是需要npm install，再运行的，如：

 cd vuedemo
 npm install
 npm run dev

其中， npm install 因为需要联网，并且是去连 github ，如果你没有翻墙的话，可能速度会比较慢。我们可以使用国内淘宝提供的 npm 镜像源来进行安装，解决翻墙的问题。

安装方法

npm install -g cnpm --registry=https://registry.npm.taobao.org

2、vue api跨域问题

axios.defaults.withCredentials = false; //让ajax携带cookie

（当为true时项目会报错，具体原因待查）

 

3、vuejs路由传参的三种方式

  <li v-for="article in articles" @click="getDescribe(article.id)">

methods：

方案一：

      getDescribe(id) {
//   直接调用$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,
        })

方案一，需要对应路由配置如下：

   {
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
   }

很显然，需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值。

this.$route.params.id

方案二：

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

       this.$router.push({
          name: 'Describe',
          params: {
            id: id
          }
        })

对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

子组件中: 这样来获取参数

this.$route.params.id

方案三：

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？

    this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
        })

对应路由配置：

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

对应子组件: 这样来获取参数

this.$route.query.id

这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要

4、全局钩子，在main.js配置，可用作用户拦截

 1 //在进入路由之前， 每一次都会执行此方法  全局钩子
 2 router.beforeEach(function(to,from,next){
 3   //设置网页标题
 4   document.title = to.meta.title;
 5   //检查是否已登录
 6   let userObj = JSON.parse(sessionStorage.getItem('user'));
 7   if(userObj){
 8     //执行方法，将用户名设置进全局参数  vuex
 9     //提交mutation的Types.SETUSERNAME方法
10     //第二个参数是携带的参数
11     //main.js使用vuex的提交方法，不需要this.$store.commit()，直接就store.commit()
12     store.commit(Types.SETUSERNAME,userObj.username);
13   }else{
14     //如果未登录，想要进入admin目录，则自动跳回首页
15     if(to.path.indexOf('admin') != -1){
16     //   alert("进了");
17       router.push({name:'home'});
18     }
19   }
20   next(); //继续往下走
21 });

5、检查用户是否登录

// 访问之前，都检查下是否登录了
router.beforeEach((to, from, next) => {
  debugger;
  if (to.path.startsWith('/login')) {
    window.sessionStorage.removeItem('access-token')
    next()
  } else {
    let token = window.sessionStorage.getItem('access-token')
    if (!token) {
      next({ path: '/login' })
    } else {
      next()
    }
  }
})

 6、路由跳转

<template>
  <div class="nav-menu">
    <el-menu default-active="users" class="el-menu-vertical-demo" @select="handleSelect">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-setting"></i>
          <span>系统管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="users"><i class="el-icon-setting"></i>用户管理</el-menu-item>
          <el-menu-item index="department" target="_blank"><i class="el-icon-setting"></i>部门管理</el-menu-item>
          <el-menu-item index="dictionary"><i class="el-icon-setting"></i>数据字典管理</el-menu-item>
          <el-menu-item index="role"><i class="el-icon-setting"></i>角色管理</el-menu-item>
          <el-menu-item index="permissions"><i class="el-icon-setting"></i>权限菜单管理</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-setting"></i>
        <span slot="title">导航三</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    name: "NavMenu",
    data(){
      return{

      }
    },
    methods:{
      handleSelect(key){
        switch(key){
          case 'users':
            this.$router.push('/userList');
            break;
          case 'department':
            this.$router.push('/departmentList');
            break;
          case 'dictionary':
            this.$router.push('/dictionaryList');
            break;
          case 'role':
            let routeUrl = this.$router.resolve({
              path: "/roleList",
              query: {id:96}
            });
            window.open(routeUrl .href, '_blank');
           /* this.$router.push('/roleList');*/
            break;
          case 'permissions':
            this.$router.push('/permissionsList');
            break;
        }
      },
    }

  }
</script>

7、路由动态渲染导航栏

<!--导航菜单-->
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect"
	 unique-opened router v-show="!collapsed">
	<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
	<el-submenu :index="index+''" v-if="!item.leaf">
		<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
		<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}</el-menu-item>
			</el-submenu>
		<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
	</template>
</el-menu>

 

import Login from './views/Login.vue'
import NotFound from './views/404.vue'
import Home from './views/Home.vue'
import Main from './views/Main.vue'
import Table from './views/nav1/Table.vue'
import Form from './views/nav1/Form.vue'
import user from './views/nav1/user.vue'
import Page4 from './views/nav2/Page4.vue'
import Page5 from './views/nav2/Page5.vue'
import Page6 from './views/nav3/Page6.vue'
import echarts from './views/charts/echarts.vue'

let routes = [
    {
        path: '/login',
        component: Login,
        name: '',
        hidden: true
    },
    {
        path: '/404',
        component: NotFound,
        name: '',
        hidden: true
    },
    //{ path: '/main', component: Main },
    {
        path: '/',
        component: Home,
        name: '导航一',
        iconCls: 'el-icon-message',//图标样式class
        children: [
            { path: '/main', component: Main, name: '主页', hidden: true },
            { path: '/table', component: Table, name: 'Table' },
            { path: '/form', component: Form, name: 'Form' },
            { path: '/user', component: user, name: '列表' },
        ]
    },
    {
        path: '/',
        component: Home,
        name: '导航二',
        iconCls: 'fa fa-id-card-o',
        children: [
            { path: '/page4', component: Page4, name: '页面4' },
            { path: '/page5', component: Page5, name: '页面5' }
        ]
    },
    {
        path: '/',
        component: Home,
        name: '',
        iconCls: 'fa fa-address-card',
        leaf: true,//只有一个节点
        children: [
            { path: '/page6', component: Page6, name: '导航三' }
        ]
    },
    {
        path: '/',
        component: Home,
        name: 'Charts',
        iconCls: 'fa fa-bar-chart',
        children: [
            { path: '/echarts', component: echarts, name: 'echarts' }
        ]
    },
    {
        path: '*',
        hidden: true,
        redirect: { path: '/404' }
    }
];

export default routes;

8、axios封装

第一步还是先下载axios

npm install axios --save
第二步/src/utils/目录下建立一个htttp.js

import axios from 'axios';


axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';


//http request 拦截器
axios.interceptors.request.use(
  config => {
    // const token = getCookie('名称');
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded'
    }
    // if(token){
    //   config.params = {'token':token}
    // }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 拦截器
axios.interceptors.response.use(
  response => {
    if(response.data.errCode ==2){
      router.push({
        path:"/login",
        querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }
第三步

在main.js中引入

import {post,get} from './utils/http'
//定义全局变量
Vue.prototype.$post=post;
Vue.prototype.$get=get;
最后在组件里直接使用

mounted(){
    this.$post('/api/v2/movie/top250')
      .then((response) => {
        console.log(response)
      })
  },

其余的方法一样