当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue项目开发学习经历（持续更新）

Vue项目开发学习经历（持续更新）

2020年07月14日  | 移动技术网IT编程  | 我要评论

前端项目初始化步骤
1.安装Vue脚手架
2.通过Vue脚手架创建项目
3.配置Vue路由
4.配置Element-UI组件
5.配置axios库
6.初始化git仓库
7.将本地项目托管到github

在学习的时候接触到了一个新的知识点：token

token登入原理：
客户端与服务器存在跨域问题 不推荐使用session cookie
登入页面输入用户名和密码进行登入，服务器验证通过之后生成该用户的token并返回
客户端存储该token，后续的请求都应该携带该token发生请求

接下来把脚手架里不需要的内容删除
1.App.vue根组件删除后效果

<template>
    <div id="app"></div>
</template>
<script>
export default {
    name:"app",
}
</script>
<style scoped>

</style>

2.router文件夹下的index.js删除后效果

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = []
const router = new VueRouter({
    routes
})
export default router

接下来就是创建项目开发时所学到的知识点：

1.在开发时推荐使用less进行页面美化，并且加上scoped保证该美化只对该组件生效。（当时学CSS不太了解scoped属性，现在在vue项目开发中遇到了它）

<style lang="less" scoped>

</style>

2.在开发的时候，上午使用vue写的好好的代码，下午打开却发现报了一堆错误（心里有点慌），后面想到应该是Vuetr插件的设置问题。
在这里插入图片描述
打开Vuetr插件设置，找到图中的三个选项，取消勾选即可在这里插入图片描述
3.踩雷:必须要安装less-loader依赖才能在编译的时候不报错（因为我自己使用的是less语法）

4.使用element-ui的时候，一开始报错：在这里插入图片描述
翻译一下是说没有找到这些标签，想了一下是自己在一开始创建项目的时候使用了按需导入。因此我来到了plugins文件夹下，修改element.js

import Vue from 'vue'
import { Button, Form, FormItem, Input, Message, 
Container, Header, Aside, Main, Menu,
 Submenu, MenuItem } from "element-ui"

Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem

导入Form、FormItem、Input，并在use方法中使用它们。之后发现不报错了。

5.表单验证规则导入：
1.首先要定义一个规则 :rules=“loginRules”

<el-form  class="form" :model="form" :rules="loginRules">

2.在data中定义表单规则验证对象
3.给需要验证的表单加上验证规则 prop=" "

6.表单重置规则导入：
1.首先我们要拿到表单引用对象 ref=“reset”

<el-form  ref="reset" class="form" :model="form" :rules="loginRules">

2.然后给重置按钮绑定一个单击响应函数
3.在单击响应函数中，调用this.$refs.reset.resetFields()即可

7.axios组件导入：
如果表单验证通过，就发送请求，那么这里我选择通过axios发送请求。
在main.js中导入axios并全局配置

import axios from "axios"

Vue.config.productionTip = false
axios.defaults.baseURL = "http://127.0.0.1:8888/api/private/v1"
Vue.prototype.$http = axios

使用this.$http.post()发送请求
使用对象结构并重命名为res的方式获取服务器Promise对象中的data：

const {data:res}=  await this.$http.post("login",this.form)

8.导入Message消息提示，并全局挂载

import { Message } from "element-ui"
Vue.prototype.$message = Message

9.将登录成功之后的token保存在客户端的sessionStorage中
①项目中出了登录之外的其他API接口，必须在登录之后才能访问
②token只应该在当前网站打开期间生效，所以将token保存在sessionStorage中

window.sessionStorage.setItem("token",res.data.token);

10.Vue登录拦截：

router.beforeEach((to, from, next) => {
    //to表示将要访问的路径
    //from代表从哪个路径跳转而来
    //next是一个函数表示放行
    if (to.path === "/login") {
        return next();
    } else {
        const tokenStr = window.sessionStorage.getItem("token")
        if (!tokenStr) {
            return next("/login")
        } else {
            next();
        }
    }
})

11.通过axios请求拦截器添加token，保证拥有数据获取的权限。

//axios拦截器
axios.interceptors.request.use(config => {
    config.headers.Authorization = window.sessionStorage.getItem("token")
    return config
})

12.踩雷：在使用NavMenu 导航菜单时，给index绑定一个item.id属性之后，发现报错：

<el-submenu :index="item.id" v-for="item in menuList" :key="item.id">

在这里插入图片描述
从报错信息反映出这个index接收字符串，而我更改index属性之后是一个数字，直接使用最简单的方法解决,在item.id之后加一个空字符串，拼串

<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">

13.如何使用循环生成icon图标字体？

<el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
	<i :class="icons[item.id]"></i>
</el-submenu>

<script>
export default {
  data() {
    return {
      icons:{
        "125":"el-icon-user",
        "103":"el-icon-lock",
        "101":"el-icon-star",
        "102":"el-icon-font",
        "145":"el-icon-flag",
      }
    }
  },
</script>

在导出的默认数据内部的data中返回一个icons对象，分别保存对应item.id和想要的图标字体代码，在循环时给class属性绑定，使用中括号，根据item.id找到icons对象中对应的图标字体代码。

本文地址：https://blog.csdn.net/LX20190110/article/details/107273185

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网