Vue2学习记录04——Vue-cli，webpack，vue-router，vue-elementUI

最新推荐文章于 2022-10-08 18:07:20 发布
最新推荐文章于 2022-10-08 18:07:20 发布
阅读量79 收藏
点赞数
分类专栏： 前端 笔记 文章标签： elementui node.js vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51072735/article/details/119909957
版权

文章目录

环境搭建

  1. node.js安装
    下载对应的版本安装
    安装成功后使用以下命令测试即可
    在这里插入图片描述
  2. 安装node.js淘宝镜像加速器
npm install cnpm -g

安装目录为C:\Users\Lenovo\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm

  1. 安装vue-cli
cnmp install vue-cli -g

可以使用vue list测试是否安装成功

创建vue-cli项目

  1. 管理员权限打开cmd，切换到自定义的项目路径，执行如下命令
vue init webpack myvue

在这里插入图片描述
2. 创建完成后，执行以下操作

cd myvue

npm install

npm run dev
  1. 执行完毕后会出现界面，即为安装成功
    在这里插入图片描述
    打开该网址
    在这里插入图片描述

使用webpack

  1. 安装
npm install webpack
npm install webpack-cli
  1. 安装完成后，创建一个空文件夹，使用idea打开
  2. 创建一个modules文件夹
    在这里插入图片描述
  3. 新建两个js文件

hello.js

// 暴露一个 Hello 方法
exports.Hello = function() {
    document.writeln("<h1>Hello webpack!</h1>>")
}

main.js

// 引入hello.js
let hello = require("./hello")
hello.Hello()
  1. 更目录下创建一个webpack.config.js文件

webpack.config.js

module.exports = {
    // 入口文件
    entry: "./modules/main.js",
    output: {
        // 输出目录
        filename:"./js/bundle.js"
    }
};

  1. 打开终端输入webpack命令即可打包
    出现错误使用管理员权限打开idea，或者使用cmd管理员模式

  2. 创建一个index.html，引入导出的bundle.js文件

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="dist/js/bundle.js"></script>
</head>
<body>

</body>
</html>

8.打开index.html，真神奇！

在这里插入图片描述

vue-router

  1. 下载
npm install vue-router --save-dev
  1. 打开vue-cli项目
  2. 引用方式
import VueRouter from "vue-router";

Vue.use(VueRouter)
  1. 创建两个组件

content.vue

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

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

<style scoped>

</style>

Main.vue

<template>
  <h1>主页面</h1>
</template>

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

<style scoped>

</style>
  1. 创建一个路由配置文件

index.js

import Content from "../components/Content";
import Main from "../components/Main";

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: "/main",  // 路径
      component: Main, // 组件
      name: "main",   // 名称
    },
    {
      path: "/content",
      component: Content,
      name: "content"
    }
  ]
})
  1. 在main.js中引入路由配置文件

main.js

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,  // 路由
  components: { App },
  template: '<App/>'
})
  1. 在App.vue中配置链接
<template>
  <div id="app">
    <h1>App</h1>
    <router-link to="/main">主页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
  1. 启动
npm run dev

在这里插入图片描述

vue+elementUI

  1. 创建一个vue-cli项目hello-vue
  2. 创建好后进入工程目录，安装如下依赖
cd hello-vue

//vue-router
npm install vue-router -save-dev

// element-ui
npm i element-ui -S

npm install

//sass
cnpm install sass-loader node-sass -save-dev
  1. 完成后启动测试
npm run dev
  1. 测试无误后，idea打开项目，新建两个Vue文件

login.vue
代码从elementUI拷贝

<template>
  <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>
</template>

<script>
export default {
  name: "Login",
  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 scoped>

</style>

mian.vue

<template>
  <h1>main页面</h1>
</template>

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

<style scoped>

</style>
  1. 新建一个路由配置文件
    配置好创建的两个vue组件
import Vue from "vue";
import VueRouter from "vue-router";

import Login from "../view/Login";
import Main from "../view/Main";

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/login',
      component: Login,
    },
    {
      path: "/main",
      component:Main
    }
  ]
})
  1. 在mian.js中
    导入elementUI，导入路由配置
import Vue from 'vue'
import App from './App'
import router from "./router"

//elementUI
import ElementUI from 'element-ui';
//element-ui的css
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})
  1. App中如下配置
<template>
  <div id="app">
    <h1>app</h1>
    <router-link to="/login">login</router-link>
    <router-link to="/main">main</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

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

<style>
</style>
  1. npm run dev
    在这里插入图片描述

路由嵌套

定义两个用户组件

List.vue

<template>
  <h1>用户列表页</h1>
</template>

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

<style scoped>

</style>

Profile.vue

<template>
  <h1>个人信息页</h1>
</template>

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

<style scoped>

</style>

将其添加在main组件的路由中
在chilren中定义子路由
和在routes中定义一样

index.js

{
      path: "/main",
      component:Main,
      children:[
        {path: "/user/profile", component: UserProfile},
        {path: "/user/list", component: UserList}
      ]
    }

定义在Main组件中，那么就在Main组件中使用子路由

Main.vue

<router-link to="/user/list">用户列表</router-link>
<router-link to="/user/profile">用户详情</router-link>

参数传递

现在要在路由中接收传递参数，并接收

首先将route-link改为如下形式
name：组件名称
params：需要传递的参数
to需要用v-bind绑定

<router-link :to="{name:'UserList', params:{id:1}}">用户列表</router-link>

在路由配置中接收参数
使用 :id 来接收
name就是route-link中的name

{path: "/user/list/:id", component: UserList, name:"UserList"}

使用接收的参数

<h2>{{$route.params.id}}</h2>

使用props接收

<router-link :to="{name:'UserList', params:{id:1}}">用户列表</router-link>

在路由配置中加上
props:true

{path: "/user/list/:id", component: UserList, name:"UserList", props:true}

在组件中添加props: [“id”]

<script>
export default {
  props: ["id"],
  name: "UserList"
}
</script>

取出

<h2>{{id}}</h2>

重定向

{
      path:'/toMain',
      redirect: "/main",
    }
即将秃头的小老弟
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
12-12
windows下vue-cli及webpack 构建网站(一)环境安装  windows下vue-cli及webpack 构建网站(二)导入bootstrap样式 windows下vue-cli及webpack 构建网站(三)使用组件  1、本篇文章是建立在以上三篇文章的基础上的...
vue-cli安装及webpack项目搭建.docx
05-07
Vue CLI（Vue.js Command Line Interface）是Vue.js官方提供的一个快速构建Vue项目开发环境的工具。它基于Webpack，能够帮助开发者快速地初始化一个符合最佳实践的项目结构，并配置好各种构建脚本。Vue CLI的安装...
Element Ui使用技巧——Form表单的校验规则rules详细说明
zhouxianguang的专栏
09-20 1万+
逍遥云天 Element Ui使用技巧——Form表单的校验规则rules详细说明 Element UI中对Form表单验证的使用介绍： Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item的 prop 属性设置为需校验的字段名即可。校验规则参见async-validator 文档中提及的用法有2种： 1.对整个表单进行规则验证： <el-form :model="ruleForm" status-icon :rules="r.
elementui 自定义三种校验？ （vue2）
最新发布
weixin_43677787的博客
10-08 328
elementui三种自定义校验规则
Vue2的路由vue-router固定版本安装
m0_65292523的博客
09-20 4623
vue2的版本只能和vue-router 3.x使用，vue-router 4.x和vue3使用，如果安装vue-router不标注版本的话，会默认安装vue-router 4.x的版本，可以在package.json文件里查看vue-router的版本信息，我的是^3.5.2的版本。
VUE基础-伍
qq_46263740的博客
02-25 511
路由 前端路由的概念和原理 1、声明是路由 路由（英文：router）就是对应关系 2、SPA与前端路由 SPA指的是一个web网站只有唯一的一个HTML页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由实现。 结论：在SPA项目中，不同功能之间的切换，要依赖于前端路由来完成！ 3、声明是前端路由 通俗易懂的概念：Hash地址与组件之间的对应关系。 4、前端路由的工作方式 用户点击了页面上的路由链接 导致了 URL 地址栏的 Hash 值发生了变化 前端路由监听
关于vue2中vue-router的使用
weixin_44693550的博客
08-31 3775
vue2中vue-router的使用
vue2-webpack4:webpack4 vue2模拟js axios vue-router
05-01
webpack4.x + vue2之前已经做过 相关的配置详细步骤，此次会再结合进 vue 来进一步配置我们的项目实现内容vue 路由实现vue 模块化mockjs 模拟后端数据axios 获取后端数据配置步骤命令安装npm install运行开发环境npm...
详解vue-router和vue-cli以及组件之间的传值
12-10
首先简单介绍使用vue-router的四个基本步骤：（为了方便演示，所有代码都写在一个文件里） 1.定义组件 2.定义路由 3.创建router实例并将定义好的路由传入 4.创建和挂载根实例 再来说一下vue-cli 一、...
浅谈vue-cli加载不到dev-server.js的解决办法
11-28
在Vue.js开发中，我们经常会使用Vue CLI工具来快速搭建项目环境。然而，在更新到较新的VueWebpackTemplate时，可能会遇到“vue-cli加载不到dev-server.js”的问题。这是因为旧版本中，开发服务器的配置通常在dev-...
v-router 路由基础
小hu同学
03-20 2065
导读：由于本篇文章我是在juejin上面发了后，复制过来的，所以会有一些动态图没有动，图片有水印，排版等问题 一、路由的基本概念与原理 1.什么是路由 路由（英文：router）就是对应关系。 2.SPA 与前端路由 SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。 此时，不同组件之间的切换需要通过前端路由来实现。 结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！ 3.什么是前端路由 概念：Hash 地址与组.
vue2中如何使用vue-router（步骤）
qq_43405603的博客
07-20 2052
1、安装 vue-router vue2 npm i vue-router@3
el-form 动态控制rules是否校验
xiaokangna的博客
07-27 4641
需要主要数字是字符串还是数字类型，假设以这个是和否为例，只有为是的时候才触发校验，那么就设置为当这个参数为1的时候才触发校验，这种方法是最简单的，如果你的校验是在标签里的话，那么就需要另外设置，那么请往下看。那么此时的校验判断就应该写在标签内，比如下图这样，但是为1后的rules应该要精确到他的指定属性，如果prop是name，那他就应该是rules.name。工作日常分享今天一个朋友问我，他有一个需求，就是怎么去动态控制表单的校验，下面图片举例，假设只有为是的时候才需要去校验，这种情况下要怎么处理。...
vue--elementUI
qq_43470725的博客
01-23 1145
官网：https://element.eleme.io/#/zh-CN/component/installation
vue表单及遍历表单校验rules以及validator校验器的使用
m0_53206841的博客
04-25 4万+
为防止用户犯错，尽可能让用户更早地发现并纠正错误。 Element中Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。注意：prop对应表单域 model 字段，使用 validate方法时，该属性是必填的。在data里配置要校验字段和校验规则：required:true；message:""不符合校验规则时的提示信息；trigger:""校验触发方式设置除此之外，我们还可以使用validator验证器.
Vue中rules表单验证（常用）
lzzw的学习之路
11-19 4万+
vue的rules用法及自带的校验规则和常用正则表达式校验
在vue中使用rules对表单字段进行验证
我的博客
01-08 11万+
vue 中表单字段验证的写法和方式有多种，本博客介绍三种较为常用的验证方式。 1. 写在 data 中验证 表单内容 <!-- 表单 --> <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px"> <el-form-item labe...
vue父页面和子页面的相互调用
qq_45732538的博客
06-10 1212
vue
关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题
热门推荐
和子昭的博客
05-28 17万+
来自”和“小编的小提示：首先打印一下this.$refs[formName]，检查是否拿到了正确的需要验证的form。其次在拿到了正确的form后，检查该form上添加的表单验证是否正确，需要注意的点有：1.使用此方法前检查prop一定必须要写在&lt;el-form-item&gt;上面，写在里面的input上或者其他任何地方都不行（el-form-item prop属性绑定）2.el-form...
使用vue-cli快速创建Webpack项目的步骤详解
通过全局安装`vue-cli`，然后使用`vue init webpack`命令初始化基于Webpack模板的新项目，可以快速搭建项目结构。 详细步骤如下： 1. **全局安装Vue CLI**： 首先，你需要在命令行中执行以下命令来全局安装Vue ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值