一、初始化项目
创建新的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的知识后,再碰到原来的问题相对来说会得心应手些。总结了从学习前端到现在为止的过程,我明白了每天总结复盘的重要性,总之,多总结多敲代码。最后,对自己说一句,加油!