VUE前台项目day_01

郝丽友巧克力派

已于 2023-01-15 10:16:27 修改

阅读量148

点赞数

文章标签： vue.js javascript 前端 Powered by 金山文档

于 2023-01-10 14:34:49 首次发布

本文链接：https://blog.csdn.net/m0_61235042/article/details/128585465

版权

一、初始化项目

创建新的VUE项目：

cmd唤出命令窗口，进入指定文件夹，执行vue create xxxxx命令初始化项目；

进入项目之后，调整index.html文件,配置好网页的<title>;

删掉src目录下的文件，自己创建App.vue和main.js文件；

配置vue.config.js文件，关掉语法检查。注意：修改文件之后，记得重启项目！

二、搭建整体项目结构

分析整体项目结构，我们先要做的是Header和Footer组件；

首先创建components文件夹，在此文件夹下创建Header和Footer文件夹，在这两个子文件夹下分别创建index.vue文件；

在静态页面代码中找到对应的代码片段，复制粘贴到对应位置，样式同理。在文件夹下创建images文件夹，放入相应的图片；

在App.vue文件中引入Header和Footer，整体结构初步搭建完毕。

三、实现路由切换

创建pages文件夹，在此文件夹下创建Home、Login、Register、Search文件夹，分别在文件夹下创建index.vue文件；

搭建路由环境，控制台输出npm i router@3。创建router文件夹，在此文件夹下创建index.js文件，引入Vue、VueRouter，还有路由组件。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/pages/home'
import Login from '@/pages/login'
import Register from '@/pages/register'
import Search from '@/pages/search'

Vue.use(VueRouter)

const router = new VueRouter({
    mode:'history',
    {
      path:'/home',
      component:Home
    },
    {
      path:'/login',
      component:Login
    },
    {
      path:'/register',
      component:Register
    },
    {
      path:'/search',
      component:Search
    },
}

export default router

切记：要在main.js文件里配置路由

在Header组件里，将登录、搜索、注册用router-link属性变为路由链接

 <router-link to="/login">登录</router-link>
 <router-link to="/register" class="register">免费注册</router-link>

 <router-link class="logo" title="优选商城" to="/home">
      <img src="./images/logo.png" alt="" />
 </router-link>

搜索需要编程式导航来实现

<button class="sui-btn btn-xlarge btn-danger" type="button" @click="toSearch">
     搜索
</button>

//用methods属性来定义方法
methods:{
  toSearch(){
     this.$router.push('/search')
  }
}

四、配置测试路由

在项目当中我们可以用一个测试路由编写一些代码用来测试，在项目上线之后删掉。

在pages文件夹下创建Test文件夹，在此文件夹下创建index.vue文件；

记得去router文件中配置此路由文件；

检查效果

五、二次封装axios(脚手架目录下npm i axios)

1.为什么要对axios进行二次封装？

因为要用到请求拦截器和响应拦截器。请求拦截器：可以在发送请求之前处理一些事情；响应拦截器：当服务器返回数据之后，处理一些事情。

baseURL=>存放请求的基本路径；

timeout=>请求超时时间

import axios from 'axios'

//创建axios实例
const ajax = axios.create({
  baseURL:'/api',
  timeout:5000
})

//请求拦截器
ajax.interceptors.request.use((config)=>{
  nprogress.start()
  return config
})

//响应拦截器
ajax.interceptors.reponse,use(
  (reponse)=>{
    nprogress.done()
    return response.data
  },
  (error){
    nprogress.done()
    alert(error)
    return new Promise(()=>{})
  }
)

2.进度条nprogress的使用

安装插件：npm i nprogress

在服务器发送请求时，进度条开始动；返回数据时，进度条停止

帮我们实现【功能效果】的库，不加-D => 生产依赖；
帮我们【加工代码】的库，加-D => 开发依赖

六、统一管理项目的ajax请求

在api文件夹下创建index.js文件；

该文件是用来管理项目中的ajax请求

import ajax from './ajax'

export const reqCategroy = () => ajax.get('/product/getBaseCategoryList')

学习的小感悟：第一次跟着尚硅谷做这个VUE项目时，发现好多东西跟不上，大多都是基础没有打扎实的缘故，在回过头来补充了axios、Ajax、ES6的知识后，再碰到原来的问题相对来说会得心应手些。总结了从学习前端到现在为止的过程，我明白了每天总结复盘的重要性，总之，多总结多敲代码。最后，对自己说一句，加油！