vue基础的介绍，创建，基本操作，页面布局：阿里巴巴图标库，vant，flexible，路由，接口，解决报错，vue页面在手机浏览，计算属性

最新推荐文章于 2023-12-05 11:47:43 发布

置顶坎坷的程序员

最新推荐文章于 2023-12-05 11:47:43 发布

阅读量664

点赞数 7

分类专栏：暑期作品文章标签： vue js web

本文链接：https://blog.csdn.net/weixin_49527298/article/details/118858670

版权

暑期作品专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文详细介绍了如何创建Vue2.0项目，包括页面布局、路由配置、组件创建、 vant UI 框架的使用、图标库集成、axios接口调用以及错误处理。还涉及到了移动端浏览、计算属性的运用和组件复用。同时，讲解了如何解决常见的错误问题，如路由报错、模板未定义等。

摘要由CSDN通过智能技术生成

npm i vant -S===安装，
自动按需引入组件：npm i babel-plugin-import -D，
在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}
最后在main.js中导入你需要使用的组件
import { Button } from 'vant';

Vue.use(Button);

在这里插入图片描述

 
 -  在vue中使用阿里巴巴图标库


1.切换到`font class`，点击下载到本地
2.在`assets`文件夹下新建，`iconfont`文件夹，
3.然后将打开下载下的文件，选择#`iconfont.css，iconfont.js iconfont.json iconfont.ttfAiconfont iconfont.woff  iconfont.woff2`，将他们放进`iconfont文件夹`
4. `<div class=" iconfont icon-QQ"></div>`：通过class使用，class名称就是你图标名称

> <div id=”router“>路由介绍</div>

 - 二级路由的使用

 

```bash
在router/index.js输入
import contact from '../components/about/contact'
import delivery from '../components/about/delivery'
import history from '../components/about/history'
import orderingguide from '../components/about/orderingguide'

Vue.use(Router)

export default new Router({
  routes: [
{
      path: '/about',
      name: 'about',
      component: about,
      children:[
        {  path:'/about/contact',name:'contact',component:contact},
        {  path:'/delivery',name:'delivery',component:delivery},
        {  path:'/history',name:'history',component:history},
        {  path:'/orderingguide',name:'orderingguide',component:orderingguide},
      
      ]
    },
     ]
})
使用： <router-link tag="li" class="nav-link" :to="{name:'contact'}">//绑定路由名字name
<template>
<div>
    <div class="row mb-5">
        <div class="col-4">
            <div class="list-group mb-5">
                <router-link tag="li" class="nav-link" :to="{name:'contact'}">
                    <a href="" class="list-group-item list-group-item-action active">历史订单</a>
                </router-link>
                <router-link tag="li" class="nav-link" :to="{name:'delivery'}">
                    <a href="" class="list-group-item list-group-item-action active">历史订单</a>
                </router-link>
                <router-link tag="li" class="nav-link" :to="{name:'history'}">
                    <a href="" class="list-group-item list-group-item-action active">历史订单</a>
                </router-link>
                <router-link tag="li" class="nav-link" :to="{name:'orderingguide'}">
                    <a href="" class="list-group-item list-group-item-action active">历史订单</a>
                </router-link>
            </div>
            
        </div>
        <div class="clo-8">
            
            <router-view></router-view>
            
        </div>
    </div>
    </div>
</template>
<script>
export default {
    
}
</script>

三级路由

router里面的index.js中写入
import phone from '../components/contact/phone'
import personname from '../components/contact/personname'//文件路径

 path: 'about/contact/phone'//路由路径
 {
      path: '/about',
      name: 'about',
      component: about,
      children: [{
          path: '/about/contact',
          name: 'contact',
          component: contact,
          children: [{
              path: 'about/contact/phone',
              name: 'phone',
              component: phone
            },
            {
              path: 'about/contact/personname',
              name: 'personname',
              component: personname
            },
          ]
        },

守卫导航

main.js中写入，写入之后，导航的所有按钮都按不了，除非你登录了
router.beforeEach((to, from, next) => {
  
  if(to.path =='/login' || to.path == '/register'){

       }else{
         alert("请先登录")
         next('/login')
       }
  }
 })
 ----beforeEnter----对某个路由进行判断
 {
      path: '/admin',
      name: 'admin',
      component: admin,beforeEnter: (to, from, next) => {
       if(to.path =='/login' || to.path == '/register'){

       }else{
         alert("请先登录")
         next('/login')
       }
      }
    },

----beforeRouteLeave ----判断是否要离开
<template>
    <div>
        admin
    </div>
</template>
<script>
export default {
     beforeRouteLeave (to, from, next) {
      
        if (confirm("确定要离开吗")==true) {
          next()
        } else {
          next(false)
        }
      }
}
</script>

路由复用

app.vue中写入
 <div class="container">
        <div class="row">//bootstrap：row布局
          <div class="col-sm-12 col-md-4">
            <router-view name="contact"></router-view>//name:对应路由的name
          </div>
          <div class="col-sm-12 col-md-4">//col-md-4:bootstrap的布局
            <router-view name="delivery"></router-view>
          </div>
          <div class="col-sm-12 col-md-4">
            <router-view name="history"></router-view>
          </div>
        </div>
    </div>
router/index.js写入：
{
      path: '/home',
      name: 'home',
      components: {
        default: home,
        'contact': contact,
        'delivery': delivery,
        'history': history
      }
    },

axios接口基础

下载
npm install axios -s

main.js写入
import router from './router'

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

页面中使用：
import  axios from 'axios'

export default {
    data(){
        return{
email:"",
password:"",
qdpassword:""
        }
    },
    methods:{
onsubmit(){
if(this.password === this.qdpassword){
   axios({
       method:'GET',
       url:'http://localhost:8080/../../static/a.json'//这是我自己搞的文件
   }).then(res => res =>this.$router.push({name:"login"})//注册完跳转到登录
     
   )
}else{
    console.log("失败")
}
}
    }
}
</script>

解决报错

第一个报错：This dependency was not found: * @/components/first-page in ./src/router/index.js To install it, you can run: npm install --save @/components/first-page

其实就是我文件的命名和components（组件）的命名不一样，导致找不到！

新建完一个新文件，浏览器打开后报错Failed to mount component: template or render function not defined.

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>
在新建的文件中写出这些。就不会有报错了！

Error in render: "TypeError: Cannot read property ‘split’ of undefined"怎么造成的

就是值没有对上
//错误的
export default {
  // el: '#example',
data(){
    // el: '#example',
    return{
 ms: 'value',//这里
    }
   
  
},
computed:{
  fw:function(){
      return this.msssage.split('').reverse().join('')//这里
  }
}
}
//正确的
export default {
  // el: '#example',
data(){
    // el: '#example',
    return{
 ms: 'value',//这里
    }
   
  
},
computed:{
  fw:function(){
      return this.ms.split('').reverse().join('')//这里
  }
}
}

因为不知道为啥引入外部的js没有代码提示，只能在.vue里面写js了，引入css就是import …/你的css文件路径

在这里插入图片描述

vue项目在手机浏览，修改文件之后，重启项目，手机网址输入http://ip:端口号/#/文件名

在这里插入图片描述

vue的基操

  <h1>{{ title }}</h1>
   data() {
    return {
    title：vue基操
    };
  },

v-on:click="Judgment"
 Judgment : function(){
    var adminnamesubit = document.getElementsByTagName('input')[2]
    var  adminname = document.getElementsByTagName('input')[0]
    var pwd = document.getElementsByTagName('input')[1]
    adminnamesubit.onmousedown = function(){
        // console.log(adminname);
        // console.log(adminname.value)
        if(adminname.value == pwd.value){
          alert('登录成功')
        }
        else{
          alert('用户名或者密码错误')
        }
    } 
  }

v-model="active"
  data() {
    return {
    active：vue基操
    };
  },

 <a v-bind:href= "url" >
  data() {
    return {
      url:'http://192.168.1.2:8080/#/login'
    };
  },

计算属性:除非发生变化，不然不会重复调用执行

<!--<template>
 <div id="app">
    <mycomponent></mycomponent>
</div>
  
</template>

<script>
import mycomponent from './tryc'
 export default {
   name:'home',
   components:{
     mycomponent
   }
 }




</script>

<style>

</style>
-->
<template>
  <div id="example">
  <p>Original message: "{{ ms }}"</p>
  <p>Computed reversed message: "{{ fw }}"</p>
</div>
</template>

<script>
export default {
  // el: '#example',
data(){
    // el: '#example',
    return{
 ms: 'value',
    }
   
  
},
computed:{
  fw:function(){
      return this.ms.split('').reverse().join('')
  }
}
}
</script>

<style>

</style>

<p>总价：{{tot}}</p>
---{{tot}}:属性名---
computed:{
        tot(){
          ---tot()调用---
            let tota = 0

            for(let index in this.shuzu){
            ---循环里面的数据---
                let individaul = this.shuzu[index]
                // console.log(individaul)
                tota += individaul.num *individaul.price
                ---计算---
            }
            return tota;
        }
    },

.vue文件中创建和引用组件


首先创建一个.vue文件
然后
<template>
 <div id="app">
    <mycomponent></mycomponent>
</div>
  
</template>

<script>
import mycomponent from './tryc'//个人理解，将mycomponent组件名放到新建的文件
 export default {
   name:'home',
   components:{
     mycomponent
   }
 }

</script>

<style>

</style>

课外知识

git提交出现问题：fatal: unable to access ‘https://github.com/30621056058/twocat.git/’: Failed to connect to github.com port 443: Timed out
—就是登不上GitHub才会这样，等可以登上GitHub就可以了。。。。

设置了eslint,出现的警告：
打开bulid–webpack.base.conf.js----(config.dev.useEslint ? [createLintingRule()] : [])----注释这句话-------然后重启项目

打开文件发现vue的字体都是白色的，就要在vscode下载vetur插件
Not Found - GET https://registry.npmjs.org/ilb-flexible - Not found
打开vue项目时发现，只可以打开一个页面，无论如何设置路由都只可以打开一个页面，最后删除了新创建的页面和路由，再重新来一次，就可以了，也不知道啥问题！！！
vue项目中写入创建js文件，没有代码提示就是Vetur的锅，我的是打开项目，vscode就会报错，解决方案：在vscode点击设置----搜索Ignore Project Warning=打勾✔然后就可以了===后来发现还是不行，百度也没有解决方案！！！

坎坷的程序员

关注

7
点赞
踩
11

收藏

觉得还不错? 一键收藏
5
评论
vue基础的介绍，创建，基本操作，页面布局：阿里巴巴图标库，vant，flexible，路由，接口，解决报错，vue页面在手机浏览，计算属性

起点！，如何创建一个vue2.0项目我这里有介绍，网上也有很多教程，就不多说了第一个报错：This dependency was not found: * @/components/first-page in ./src/router/index.js To install it, you can run: npm install --save @/components/first-page其实就是我文件的命名和components（组件）的命名不一样，导致找不到！安装flexible.
复制链接

扫一扫

专栏目录