Vue项目-尚品汇笔记

脚手架使用

vue create 项目名称 脚手架目录:public + assets文件夹区别 node_modules:放置项目依赖的地方 public:一般放置一些共用的静态资源，打包上线的时候，public文件夹里面资源原封不动打包到dist文件夹里面 src：程序员源代码文件夹 -----assets文件夹：经常放置一些静态资源（图片），assets文件夹里面资源webpack会进行打包为一个模块（js文件夹里面） -----components文件夹:一般放置非路由组件（或者项目共用的组件） App.vue 唯一的根组件 main.js 入口文件【程序最先执行的文件】 babel.config.js:babel配置文件 package.json：看到项目描述、项目依赖、项目运行指令 README.md:项目说明文件

脚手架下载下来的项目稍微配置一下

浏览器自动打开

在package.json文件中serve后面加上 --open

"scripts": { 
    "serve": "vue-cli-service serve --open", 
    "build": "vue-cli-service build", 
    "lint": "vue-cli-service lint" 
}

关闭eslint校验工具

创建vue.config.js文件：需要对外暴露 module.exports = { lintOnSave:false, }

路由的配置

路由的一个分析 确定项目结构顺序:上中下 -----只有中间部分的在发生变化，中间部分使用的是路由组件 2个非路由组件|四个路由组件 两个非路由组件：Header 、Footer 路由组件:Home、Search、Login（没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）

安装路由 cnpm install vue-router --save:可以让你安装的依赖，在package.json文件当中进行记录,可写可不写 创建路由组件【一般放在views|pages文件夹】 配置路由，配置完四个路由组件

创建非路由组件（2个：Header、Footer）

非路由组件使用分为几步: 第一步：定义 第二步：引入 第三步：注册 第四步:使用

非路由组件的结构的搭建： 前台项目的结构与样式不需要自己写的，老师准备好了 辉洪老师静态页面： 结构 + 样式 +图片资源

项目采用的less样式,浏览器不识别less语法，需要一些loader进行处理，把less语法转换为CSS语法

1：安装less less-loader@5 切记less-loader安装5版本的，不要安装在最新版本，安装最新版本less-loader会报错，报的错误setOption函数未定义

2:需要在style标签的身上加上lang="less",不添加样式不生效

路由的跳转

路由的跳转就两种形式：声明式导航（router-link：务必要有to属性） 编程式导航 this.$router.push||replace 编程式导航更好用：因为可以书写自己的业务逻辑

面试题：v-show与v-if区别?

v-show:通过样式display控制 v-if：通过元素上树与下树进行操作

面试题:开发项目的时候，优化手段有哪些?

1:v-show|v-if

2:按需加载

首页|搜索底部是有Footer组件，而登录注册是没有Footer组件 Footer组件显示|隐藏，选择v-show|v-if 路由元信息 meta

路由传参

params参数：路由需要占位，程序就崩了，属于URL当中一部分 query参数：？k=值 路由不需要占位，写法类似于ajax当中query参数 路由传递参数先关面试题 1:路由传递参数（对象写法）path是否可以结合params参数一起使用? 不可以：url地址错误 2:如何指定params参数可传可不传?

在路由占位的地方写问号 /home/?      ？表示可传可不传

params参数可以传递也可以不传递，但是如果传递是空串，如何解决？

传递空串路径会发生问题 解决：在空串后面加一个或 undefined

this.$router.push({name: 'search', params: {k: '' || undefined}, query: {k: this.keyword}}) 5: 路由组件能不能传递props数据?

可以，在路由配置里面加props：true 路由传递props只能传递params参数

路由传递props参数 函数写法

props: ($route) => {

   return {

    keyword: $route.params.keyword,
​
    k: $route.query.keyword
​
   }
​
  }