vue学习

---

---

**

需要的环境：Node.js

**

http://nodejs.cn/download/ 安装后直接无脑下一步
安装完后在cmd输入node -v即可查看版本号检查是否安装成功

安装Node.js淘宝加速器（cnpm)

npm install cnpm -g

安装webpack

npm install webpack -g
npm install webpack-cli -g

在cmd中进入一个空目录，输入vue init webpack myvue 即可创建一个vue-cli程序，可在idea中打开

在idea的终端输入

npm run dev//运行
webpack//打包

vue-router路由

在idea终端输入

npm install vue-router--save-dev

在src下创建一个components目录，在次目录下建立一个vue项目

<template>
  <div>
    <h1>nb</h1>
  </div>
</template>

<script>
export default {
  name: "Main"
}
</script>

<style scoped>

</style>

在src目录下创建一个router目录，在里面创建index.js

import Vue from 'vue'
import Router from 'vue-router'
import Main from "../components/Main";
Vue.use(Router)
export default new Router({
  routes:[
    {
      path:'/main',
      redirect: 'main'
    },
 ]
});

在main.js中配置

import Vue from 'vue'
import App from './App'
import router from './router'//自动扫描
Vue.config.productionTip = false
new Vue({
  el: '#app',//配置路由
  router,
  render:h=>h(App)
});

在App.vue中入

<template>
  <div id="app">
<!--    router-link,点击后在router-view里面展示router-link的数据-->
    <router-link to="/main">首页</router-link>
    <router-view></router-view>
  </div>
  </template>

一个简单的路由跳转完成

安装element-ui

npm i element-ui -S

cnpm install sass-loader node-sass --save-dev//安装SASS加载器

在main.js中加入配置

import ElementUI from 'element-ui';
import {Container,Aside} from "element-ui";
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.use(Container);
Vue.use(Aside);

路由嵌套

比如这样

{
      path:'/Text1',
      component: Text1,//只有在路由中配置子路由才能嵌套访问
      children:[
        {path:'list',component:list}
      ]
    },

参数传递

在App.vue中写入

<router-link :to="{name:'kuang',params:{id:1}}">内容</router-link>

在index.js中配置

{
      path:'/kuang/',
      name:'kuang',
      component: kuang,
    },

在vue组件kuang中写入

<template>
  <div>
    <h1>kuang</h1>
    {{$route.params.id}}
  </div>
</template>

重定向

index.js中写入比如如下代码

    {
      path:'/main',
      redirect: 'kuang'
    },

路由钩子与404页面

404页面只需写一个NotFound组件，后再index.js中配置

    {
      path:'*',
      component: NotFound
    },

<template>
  <h1>内容页</h1>
</template>

<script>
export default {
  name: "ContentVue",
  beforeRouteEnter:(to,from,next)=>{//执行路由转跳前
    next(vm => {
      vm.getData();
    });
  },
  beforeRouteLeave:(to,from,next)=>{
    next();//路由跳转后
},
  methods:{
    getData:function (){
      this.axios({
        method:'get',
        url:''
      });
    }
  }
}
</script>

<style scoped>

</style>