vue脚手架创建vue项目

脚手架2向脚手架4的过度

1. 全局卸载电脑中脚手架2工具

   npm uninstall vue-cli -g

2. 全局安装脚手架4
   npm install -g @vue/cli
   或者
   yarn global add @vue/cli

3. 查看当前vue的版本
   vue -V

4. 通过脚手架4创建新的项目模版
   vue create gshop_client

5. 此时电脑中不能再使用脚手架2的命令来下载项目啦,肿么办,安装桥接工具
   npm install -g @vue/cli-init

6. 此时电脑中脚手架2/4的命令都可以下载项目了

7. npm run serve 运行项目
   npm run build 打包 项目中会出现dist文件
   serve dist 运行打包

8. 脚手架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:''
   })

创建结构目录

• 在src中创建项目所需所有的目录:

  
  
  

1. api: 存储封装后的api接口函数的及二次封装的axios(请求拦截器和响应拦截器)

2. components: 普通组件

3. mock: 模拟后台数据

4. pages: 路由组件

5. router: 路由器配置

6. store: vuex的配置

7. utils: 相关工具的文件

• 在public目录下面创建css和images文件

安装所需要的插件

npm install vuex vue - router axios less less - loader

建议: 一个一个的安装

脚手架的项目中如果样式使用的是less, 那么需要安装两个插件less less - loader

脚手架的项目中如果样式使用的是stylus, 那么需要安装两个插件stylus stylus - loader

npm install nprogress 进度条插件安装

项目相关配置

项目自动打开

1. 在package.json 里面修改serve命令 添加--open

image-20200918201159676.png

屏蔽eslint语法检查

1. 在项目文件中新建vue.config.js文件

2. 在vue.config.js添加配置 如下

image-20200918202303846.png

简化路径写法

1. 在项目中创建jsconfig.json文件

image-20200918204429504.png

跨域的配置

1. 在vue.config.js中添加如下配置

   可以参考官方文档https://cli.vuejs.org/zh/config/#devserver

image-20200921193342336.png

重要知识点

路由跳转

• 路由跳转有两种方式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中的情况下书写的逻辑)

1. 当以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
 },

2. 当以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组件

组件的显示和隐藏

1. 在routes.js里面添加meta:{....}

 // 注册Login路由组件 
  {
    path: '/login',
    component: Login,
    // 用来存储所需的参数数据,随便的使用
    meta: {
      isHideFooter: true
    }
  },
  // 注册Register路由组件 
  {
    path: '/register',
    component: Register,
    meta: {
      isHideFooter: true
    }
  },

2. 在App.vue中添加以下就可以

   即可以实现login和register界面中没有footer组件

   因为v-if中表达式是true表示该组件存在于DOM树种中,false表示这个组件在DOM树中不存在

   
   
   image-20200921191652677.png

跨域

1. 在src下面新建api文件,里面新建两个文件

image-20200921194629276.png

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)
}