脚手架2向脚手架4的过度
-
全局卸载电脑中脚手架2工具
npm uninstall vue-cli -g
全局安装脚手架4
npm install -g @vue/cli
或者
yarn global add @vue/cli查看当前vue的版本
vue -V通过脚手架4创建新的项目模版
vue create gshop_client此时电脑中不能再使用脚手架2的命令来下载项目啦,肿么办,安装桥接工具
npm install -g @vue/cli-init此时电脑中脚手架2/4的命令都可以下载项目了
npm run serve 运行项目
npm run build 打包 项目中会出现dist文件
serve dist 运行打包-
脚手架2和脚手架4 的区别
(1) 目录及文件个数不同
(2) 脚手架4的 index.html 在public目录中
(3) 项目能够在浏览器中自动的打开, 在package.json中后面加--open
"serve": "vue-cli-service serve --open"
(4) main.js中的创建Vue实例对象中的代码不同
(5)配置跨域不同
// 脚手架4中的代码
new Vue({
render: h => h(App),
}).$mount('#app')// 脚手架2的项目中的代码
new Vue({
el:'#app',
components:{App},
template:'<App/>'
})
创建结构目录
-
在src中创建项目所需所有的目录:
api: 存储封装后的api接口函数的及二次封装的axios(请求拦截器和响应拦截器)
components: 普通组件
mock: 模拟后台数据
pages: 路由组件
router: 路由器配置
store: vuex的配置
utils: 相关工具的文件
- 在public目录下面创建css和images文件
安装所需要的插件
npm install vuex vue - router axios less less - loader
建议: 一个一个的安装
脚手架的项目中如果样式使用的是less, 那么需要安装两个插件less less - loader
脚手架的项目中如果样式使用的是stylus, 那么需要安装两个插件stylus stylus - loader
npm install nprogress 进度条插件安装
项目相关配置
项目自动打开
- 在package.json 里面修改serve命令 添加--open
屏蔽eslint语法检查
在项目文件中新建vue.config.js文件
在vue.config.js添加配置 如下
简化路径写法
- 在项目中创建jsconfig.json文件
跨域的配置
-
在vue.config.js中添加如下配置
重要知识点
路由跳转
- 路由跳转有两种方式params的方式传参和query的方式
//路由跳转的时候需要传递参数
//params的方式传参
this.$router.push(`/search/${this.keyword}`)
//query的方式传参
this.$router.push(`/search?keyword=${this.keyword}`)
-
可以使用对象的方式进行参数的传递,但是也分为params和query的方式
query和params以对象的形式做路由跳转并传参的时候,query的方式可以使用path或者name,但是params的方式不能用path,可以用name
query的方式 以对象的形式来进行传参
this.$router.push({path:'/search',query:{keyword:this.keyword}})
this.$router.push({name:'search',query:{keyword:this.keyword}})
params的方式 以对象的形式来进行传参
this.$router.push({ name: 'search',params:{keyword:this.keyword } })
例子:(以下都是在重写push或者replace方法 在router/index.js中的情况下书写的逻辑)
- 当以query的方式进行路由跳转
// 判断文本框中是否输入内容
if (this.keyword) {
this.$router.push({
path: "/search",
query: { keyword: this.keyword },
});
} else {
this.$router.push({ path: "/search" });
}
routes.js的配置
{
path: '/search/?keyword',
component: Search
},
- 当以params方式进行跳转
if (this.keyword) {
this.$router.push({
name: "search",
params: { keyword: this.keyword },
});
} else {
this.$router.push({ name: "search" });
}
routes.js中的配置
{
//?表是参数可传可不传
path: '/search/:keyword?',
component: Search,
name: 'search'
},
公共组件
在main.js里面添加以下代码,就可以设置公共组件,这样每个组件里面都可以使用这个公共组件
// 引入TypeNav组件
import TypeNav from '@/components/TypeNav'
// 设置为全局的公共组件
// 参数1:组件的名字,参数2:组件对象
Vue.component('TypeNav',TypeNav)
在xx.vue组件中可以使用TypeNav组件
<template>
<div>
<!-- 商品分类导航 -->
<!--不用在下面配置中引入组件 可以直接使用-->
<TypeNav />
</div>
</template>
组件的显示和隐藏
- 在routes.js里面添加meta:{....}
// 注册Login路由组件
{
path: '/login',
component: Login,
// 用来存储所需的参数数据,随便的使用
meta: {
isHideFooter: true
}
},
// 注册Register路由组件
{
path: '/register',
component: Register,
meta: {
isHideFooter: true
}
},
-
在App.vue中添加以下就可以
即可以实现login和register界面中没有footer组件
因为v-if中表达式是true表示该组件存在于DOM树种中,false表示这个组件在DOM树中不存在
image-20200921191652677.png
跨域
- 在src下面新建api文件,里面新建两个文件
2.ajax.js文件的代码
//二次封装axios
//引入aioxs
import axios from 'axios'
//引入Nprogress插件,可以在发送请求或者作出响应的时候有进度条
import Nprogress from 'nprogress'
//引入该插件的样式文件
import 'nprogres/nprogress.css'
//设置请求的时候的根路径及请求的超时时间
const ajax = axios.create({
baseURL: '/api', //根路径
timeOut: 20000 //超时时间
})
//请求拦截器
ajax.interceptors.request.use(config => {
Nprogress.start()
return config;
})
//响应拦截器
ajax.interceptors.response.use(response => {
Nprogress.done() //隐藏进度条
//直接返回响应数据
return response.data
}, error => {
Nprogress.done()
alert('错误信息为:' + error.message)
// 把错误信息返回,外部可以做处理
return Promise.reject(error)
})
export default ajax
3.index.js文件中的代码
// 封装每个接口的api函数
import ajax from './ajax'
// 获取首页的三级分类信息的api接口函数
export const reqGetBaseCategoryList = () => ajax.get(`/product/getBaseCategoryList`)
4.在app.vue可以实现跨域访问 得到结果 (后面会在vuex仓库中获取api接口的数据,又是另一种写法)
注意:要引入api接口的函数
// 引入api接口函数
import { reqGetBaseCategoryList } from '@/api'
....
async mounted() {
const result = await reqGetBaseCategoryList()
console.log(result)
},
....
面试问题总结
1.多次点击按钮会报错,此错误是vue-router中的一个bug
错误出现在vue的脚手架3中,脚手架2没有这个问题
即错误代码如下
this.$router.push("/search");//这个代码在多次点击按钮会报错
解决方法如下:
方法一:传入一个成功回调
this.$router.push("/search", () => {});
方法二:可以传入成功的回调和失败的回调
this.$router.push('/search', () => {},()=>{})
方法三:只传入失败的回调
this.$router.push('/search',undefined,()=>{})
方法四:使用then不行,用.then和.catch同时使用才可以
this.$router.push('/search').then((=>{})).catch(()=>{})
方法五:只使用catch也可以解决问题
this.$router.push('/search').catch(()=>{})
方法六: 重写push或者replace方法 在router/index.js中
// 重新修改路由器对象中的push方法和replace方法
const pushOrigin = VueRouter.prototype.push
VueRouter.prototype.push = function (location, onComplete = () => { }, onAbort) {
return pushOrigin.call(this, location, onComplete, onAbort)
}
const replaceOrigin = VueRouter.prototype.replace
VueRouter.prototype.replace = function (location, onComplete, onAbort = () => { }) {
return replaceOrigin.call(this, location, onComplete, onAbort)
}
