logo
嘿，好久不见！
banner
Vue2_尚品汇项目

Vue2_尚品汇项目

Scroll down

一、初始化vue-cli

vue create app(项目名)

卸载脚手架：npm uninstall @vue/cli -g

二、项目结构

node_modules文件夹：项目依赖

public文件夹：一般放置一些静态资源（图片），需要注意，放在public中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件中。

src文件夹（程序员源代码文件夹）：

​ assets文件夹：一般也是放置静态资源（一般放置多个组件公用的静态资源），注意，放置在assets文件夹中的静态资源，在webpack打包的时候，webpack会把静态资源当做一个模块，打包JS文件里面。

​ components文件夹：一般放置的是非路由组件（全局组件）

​ App.vue: 唯一的根组件

​ main.js: 程序入口文件，也是整个程序当中最先执行的文件

babel.config.js: 配置文件（babel相关）

package.json文件：记录项目信息

package-lock.json：缓存性文件

README.md: 说明性文件

三、其他配置

  1. 项目运行时，浏览器自动打开

    —package.json

    “scripts”: {

    “serve”: “vue-cli-service serve –open”,

    “build”: “vue-cli-service build”,

    “lint”: “vue-cli-service lint”

    },

  2. eslint校验功能关闭

    –vue.config.js

    //关闭eslint校验

    lintOnSave:false

  3. src文件夹简写方法，配置别名。@【@代表的是src文件夹】

    jsconfig.json 配置别名@提示

    “compilerOptions”: {

    “target”: “es5”,

    “module”: “esnext”,

    “baseUrl”: “./“,

    “moduleResolution”: “node”,

    “paths”: {

    “@/*”: [

    ​ “src/*”

    ]

    },

四、项目路由分析

vue-router

前端路由：kv键值对

key: URL(地址栏中的路径)

value：相应的路由组件

开发项目时：

  1. 书写静态页面

  2. 拆分组件

  3. 获取服务器的数据动态展示

  4. 完成相应的动态业务逻辑

less样式：浏览器不识别less样式，需要通过less、less-loader进行处理，把less样式变为css样式，浏览器才可以识别。想让组件识别less样式，需要在style标签上添加 lang='less'

安装less与less-loader:npm install --save less less-loader

使用组件步骤

  • 创建或者定义
  • 引入
  • 注册
  • 使用

<%= BASE_URL %>当前根目录

五、路由组件

安装路由npm install --save vue-router@3

vue 2 对应 vue-router 3 版本

*npm i与npm install*的区别：

  • npm i 安装的模块及依赖，使用npm uninstall是没有办法删除的，必须使用npm uninstall i 才可以删除
  • npm i会帮助检测与当前node版本最匹配的npm包版本号，并匹配出来相互依赖的npm包应该提升的版本号
  • 部分npm包在当前node版本下无法使用，必须使用建议版本
  • 安装报错时install肯定会出现npm-debug.log 文件，npm i不一定

npm install、npm install –save与npm install –save-dev区别

npm install X:

  • 会把X包安装到node_modules目录中
  • 不会修改package.json
  • 之后运行npm install命令时，不会自动安装X

npm install X –save:

  • 会把X包安装到node_modules目录中
  • 会在package.json的dependencies属性下添加X
  • 之后运行npm install命令时，会自动安装X到node_modules目录中
  • 之后运行npm install
    –production或者注明NODE_ENV变量值为production时，会自动安装msbuild到node_modules目录中

npm install X –save-dev:

  • 会把X包安装到node_modules目录中
  • 会在package.json的devDependencies属性下添加X
  • 之后运行npm install命令时，会自动安装X到node_modules目录中
  • 之后运行npm install
    –production或者注明NODE_ENV变量值为production时，不会自动安装X到node_modules目录中

使用原则：运行时需要用到的包使用–save，否则使用–save-dev。

-pages|views文件夹：放置路由组件

配置路由一般放置在router文件夹中

路由

路由组件与非路由组件的区别：

  • 路由组件一般放置在pages|views文件夹中，非路由组件一般放置components文件夹中
  • 路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是标签的形式使用
  • 注册完路由，不管是路由组件还是非路由组件身上都有$route|$router属性

route和router

$router:一般进行编程式导航，进行路由跳转【push、replace】

$router是VueRouter的一个对象，通过Vue.use(VueRouter)和Vue构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由，包含了许多关键的对象和属性。

以history对象来举例：
$router.push({path:’home’})，本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录
$router.replace({path:’home’})，//替换路由，没有历史记录
$router.push(‘/login’) ,跳转到指定路由

$route:一般获取路由信息【路径、query、params】

$route是一个跳转的路由对象，每一个路由都会有一个$route对象，是一个局部的对象，可以获取对应的name，path，params，query等

这两者不同的结构可以看出两者的区别，他们的一些属性是不同的。

$route.path 字符串，等于当前路由对象的路径，会被解析为绝对路径，如/home/ews

$route.params 对象，含路有种的动态片段和全匹配片段的键值对，不会拼接到路由的url后面

$route.query 对象，包含路由中查询参数的键值对。会拼接到路由url后面

$route.router 路由规则所属的路由器

$route.matchd 数组，包含当前匹配的路径中所包含的所有片段所对象的配置参数对象

$route.name 当前路由的名字，如果没有使用具体路径，则名字为空

路由的跳转

路由的跳转有两种形式：

  • 声明式导航router-link,可以进行路由的跳转【声明式导航,务必要有to属性】

  • 编程式导航push | replace,可以进行路由的跳转

    编程式导航：声明式导航能做的，编程式导航都能做。但是编程式导航除了可以进行路由跳转，还可以做一些其他的业务逻辑

六、组件显示与隐藏

可以根据组件身上的$route获取当前路由的信息，通过路由路径判断显示与隐藏。

<Footer v-show="$route.path=='/home' || $route.path=='/search'"></Footer>

路由元信息

配置路由时，可以给路由添加路由元信息【meta】，路由的配置对象key是固定的。

routes:[

​ {

​ path: ‘/home’,

​ component:Home,

​ meta:{show:true}

​ },

]

  • $route.meta.show

路由传参，参数的写法：

params参数：属于路径中的一部分，在配置路由时，需要占位

query参数：不属于路径中的一部分，类似于Ajax中的queryString /home?k=v&kv=,不需要占位

当给路由传参，有params参数，并采用对象写法，只能使用name的路由写法。

路由传递参数有三种写法（字符串写法、模板字符串写法、对象写法），path不可以结合params参数一起使用

如何指定params参数可传可不传

params参数需要占位，在配置路由的时候，在占位的后面加上一个 ？

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

使用undefined解决：params参数可以传递、不传递（空的字符串）

this.$router.push({name:'search',params:{keyword:"" || undefined},query:{k:this.keyword.toUpperCase()}});

路由组件能不能传递props数据

可以：三种写法

  • 布尔值写法:只能传递params参数

    props:true

  • 对象写法：额外给路由传递一些props

    props：{a:1,b:2},

  • 函数写法：可以把params参数、query参数，通过props传递给路由组件 

    1
    2
    props:($route) => {
      return {keyword:$route.params.keyword,k:$route.query.k}	}

路由跳转有两种形式：声明式导航、编程式导航

  • 声明式路由跳转到当前路由（参数不变），多次执行不会抛出NavigationDuplicated的警告错误，这是因为vue-router底层已经处理好了

  • 为什么编程式导航进行路由跳转时，就有这种警告错误呢？

    “vue-router”：“3.5.3版本”，引入promise

    • 通过给push方法传递相应的成功、失败回调函数，可以捕获到当前错误，可以解决

    • this.$router.push({name:'search',params:{keyword:"" || undefined},query:{k:this.keyword.toUpperCase()}},()=>{},(error)=>{});
这种写法，治标不治本.在别的组件当中push|replace，编程式导航还是有类似的错误。

    • this.$router属性：属性值是VueRouter类的一个实例，当在入口文件注册路由的时候，给组件实例添加$router|$route属性

    • push：VueRouter类的一个实例

call与apply的区别：

相同点，都可以调用函数一次，都可以篡改函数的上下文一次。

不同点：call与apply传递参数：call传递参数用逗号隔开。apply方法执行，传递数组

七、

vue组件名在使用时不区分大小写

为什么需要进行二次封装axios?

  • 请求拦截器：可以在发请求前处理一些业务
  • 响应拦截器：当服务器数据返回后，可以处理一些事情

安装axios

npm install --save axios

在项目中，一般在API文件夹中存放【axios】

接口统一管理

小项目：完全可以在组件的生命周期函数中发请求

大项目：axios.get('xxx')

跨域问题：

什么是跨域？

协议、域名、端口号不同请求，称为跨域

解决跨域：Jsonp、cross、代理

nprogress进度条插件

安装npm install --save nprogress

八、

vuex

是官方提供的插件，状态管理库，集中式管理项目中组件公用的数据。

安装npm install --save vuex@3

与vue-router一样，vue2对应vuex 3版本9

九

防抖与节流

浏览器卡顿现象：事件触发非常频繁，而且每一次触发，回调函数都要去执行

节流：在规定的间隔时间范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发改为少量触发

防抖：前面所有的触发都被取消，最后一次执行在规定的时间内才会触发，也就是说如果连续快速的触发，只会执行一次

lodash插件

封装函数的防抖与节流业务【闭包+延迟器】

lodash函数库对外暴露__函数

十

mock模拟数据

webpack默认对外暴露：图片、json数据格式

mock数据：第一个参数请求地址，第二个参数请求数据

其他文章
cover
追
css遗漏
  • 23/03/18
  • 18:57
cover
追
flex弹性布局
  • 23/03/18
  • 17:41
© 2023- 2023 旺财
由 Hexo 驱动 v6.3.0 主题 - Async v2.0.3
博客已萌萌哒运行 天