Vue项目实战——第一天(搭建项目、路由分析)

目录

1、项目主要介绍

2、vue-cli脚手架初始化项目

2.1项目的其他配置

2.1.1项目运行的时候，让浏览器自动打开

2.1.2eslint检验功能关闭

2.1.3src文件夹简写方法，配置别名

3、Header与Footer非路由组件

3.1直接使用现有的静态的html+css

3.2cnpm install --save less less-loader@5命令

3.3在Vue.js中引入、注册、使用Header和Footer组件

4、完成路由组件搭建

4.1项目路由分析

4.1.1安装vue-router

4.1.2创建路由组件【一般放在views|pages文件夹】

4.1.3配置路由

4.1.4路由的跳转

4.2Footer组件显示与隐藏

4.3路由传递参数 

4.3.1收集表单数据

4.3.2路由传递参数：字符串形式

4.3.3路由传递参数：模板字符串

4.3.4路由传递参数：对象

4.3.5路由传递参数相关面试题

4.4重写push和replace方法

---

项目视频：

尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅)_哔哩哔哩_bilibili

1、项目主要介绍

2、vue-cli脚手架初始化项目

进入项目目录PROJECT-SHP,在终端执行vue create app（执行该命令的前提是：安装了node+webpack+淘宝镜像cnpm【npm install -g cnpm 】）命令（后续步骤参照vue2.0——第三天（侦听器、计算属性、vue-cli、vue组件））

2.1项目的其他配置

2.1.1项目运行的时候，让浏览器自动打开

 vue的webpack自动打开浏览器跳转到了http://0.0.0.0:8080/

 解决办法：

http://t.csdn.cn/Iy75Z

2.1.2eslint检验功能关闭

 关闭eslint检验功能就可以不会报错

2.1.3src文件夹简写方法，配置别名

3、Header与Footer非路由组件

3.1直接使用现有的静态的html+css

3.2cnpm install --save less less-loader@5命令

1. 咱们项目采用的less样式，浏览器不识别less样式，需要通过less、less-loader【安装五版本的】进行处理less，把less样式变为css样式，浏览器才可以识别。 
2. 如果想让组件识别less样式，需要在style标签的身上加上lang=less

安装命令

3.3在Vue.js中引入、注册、使用Header和Footer组件

清除默认样式

4、完成路由组件搭建

4.1项目路由分析

4.1.1安装vue-router

cnpm install  --save vue-router

4.1.2创建路由组件【一般放在views|pages文件夹】

4.1.3配置路由

4.1.4路由的跳转

路由的跳转就两种形式：

• 声明式导航（router-link：务必要有to属性）

•  编程式导航push||replace

编程式导航更好用：因为可以书写自己的业务逻辑

4.2Footer组件显示与隐藏

首页|搜索底部是有Footer组件，而登录注册是没有Footer组件

Footer组件显示|隐藏，选择v-show|v-if

第一种方法：通过$route.path实现

 解决：不推荐，如果有大量的路由链接需要写很多

第二种方法：路由元信息（推荐使用）

 

4.3路由传递参数 

1. params参数：路由需要占位，程序就崩了，属于URL当中一部分
2. query参数：路由不需要占位，写法类似于ajax当中query参数

4.3.1收集表单数据

4.3.2路由传递参数：字符串形式

​​​​​​​

 

4.3.3路由传递参数：模板字符串

4.3.4路由传递参数：对象

4.3.5路由传递参数相关面试题

     1:路由传递参数（对象写法）path是否可以结合params参数一起使用?

     不可以：不能这样书写，程序会崩掉

     2:如何指定params参数可传可不传?

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

     4:如果指定name与params配置, 但params中数据是一个"", 无法跳转，路径会出问题

     5: 路由组件能不能传递props数据?

4.4重写push和replace方法