Vue:实战快速上手 element

我们采用实战教学模式并结合ElementUI组件库，

创建工程

1. 创建一个名为hello-vue的工程

vue init webpack hello-vue

2.安装依赖 我们需要安装vue-router,element-ui,sass-loader和node-sass四个插件

cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装element-ui -S
npm i element-ui -S
#安装依赖
npm install
#安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
# 启动测试
npm run dev

3. npm 命令解释：

• npm install modoleName：安装模块到项目路径下
• npm install -g modoleName：-g的意思是将模块安装到全局,具体安装到磁盘哪个位置要看 npm config prefix的位置
• npm install --save modoleName：–save的意思是将模块安装到项目目录下，并在package文件的dependencies节点写入依赖，-S为该命令的缩写
• npm install --save-dev modoleName：–save-dev 的意思是将模块安装到项目目录下。并在package文件的devDependencies节点写入依赖，-D 为该命令缩

创建登录页面

把没有用的初始化东西删掉！

在源码目录中创建结构：

• assets：用于存放资源文件
• components：用于存放功能组件
• views：用于存放Vue视图组件
• router：用于存放vue-router
  
  创建登录页面试图在views目录下创建一个名为Login.vue 的视图组件，其中el- 的元素为ElementUI 组件：

<template>
  <div class="box">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="密码" prop="pass">
        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
          if (!Number.isInteger(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value < 18) {
              callback(new Error('必须年满18岁'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style>
  .box{
    margin: 140px auto;
    width: 300px;
    height: 200px;
  }
</style>

在目录router下创建index.js文件

import Vue from 'vue'
import Router from 'vue-router'

import Login from '../views/Login'

Vue.use(Router)

export default new Router({
  routes:[
    {
      path: '/login',
      component : Login
    }
  ]
});

main.js

import Vue from 'vue'
import App from './App'

import router from './router/index'

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(router);
Vue.use(Element)

new Vue({
  el: '#app',
  router,
  render: h => h(App)//ElementUI
});

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

运行

npm run dev

路由模式与 404

路由模式有两种

• hash （默认）: 路径带 # 符号 如http://localhost:8080/#/main
• history : 路径不带 # 符号 如 http://localhost:8080/main

修改路由配置 代码如下：

export default new Router({
  mode:'history',
  routes:[
  ]
});

处理 404 创建一个 NotFound.vue

<template>
  <div>
    页面不存在，请重试！！！
  </div>
</template>

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

index.js:

import NotFound from '../views/NotFound'

{
    path:"*",
    component:NotFound
}

路由钩子与异步请求

• beforeRouteEnter : 在进入路由前执行
• beforeRouteLeave : 在离开路由前执行

上代码：

export default {
        name: "List",
        beforeRouteEnter:(to,from,next)=>{
          console.log("进入路由之前")
          next();
        },
        beforeRouteEnter:(to,from,next)=>{
          console.log("进入路由之后")
          next();
        }
    }

参数说明：

• to：路由将要跳转的路径信息
• from：路径跳转前的路径信息
• next：路由的控制参数
  - next() 跳入下一个页面
  - next(’/path’) 改变路由的跳转方向，使其跳转到另一个路由
  - next(false) 返回原来的页面
  - next((vm)=>{}) 仅在 beforeRouteEnter 中可用 ，vm是组件实例

在钩子函数中使用异步请求

1. 安装 Axios

   npm install --save axios vue-axios
   

2. main.js 引入 Axios

   import axios from 'axios'
   import VueAxios from 'vue-axios'
   
   Vue.use(VueAxios, axios)
   

3. 准备数据 ： 只有我们的static 目录下的文件是可以被访问的，所以我们就吧静态文件放在该目录下。
   ststic/mock/data.json

   {
     "name": "QIANJUE",
     "url": "www.qianjue.com",
     "page": 1,
     "isNonProfit": true,
     "address": {
       "street": "奋达",
       "city": "广东深圳",
       "country": "中国"
     },
     "links": [
       {
         "name": "QIANJUE",
         "url": "https://www.qianjue.com"
       },
       {
         "name": "百度",
         "url": "https://www.baidu.com/"
       }
     ]
   }
   

4. 在 beforeRouteEnter 中进行异步请求

   export default {
           name: "List",
           beforeRouteEnter:(to,from,next)=>{
             console.log("进入路由之前")
             next(vm => {
               vm.getData(); //进入路由之前执行这个方法
             });
           },
         methods:{
           getData:function () {
             this.axios({
               method: 'get',
               url:'http://localhost:8080/static/moke/data.json'
             }).then(function (response){
                 console.log(response)
             })
           }
         }
       }