尚硅谷-尚品汇项目（day1）

1.vue-cli脚手架初始化项目

node + webpack + 淘宝镜像

node_modules文件夹：项目依赖文件夹

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

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

​ assets文件夹：一般也是放置静态资源（多个组件共用的静态资源），webpack会将这些静态资源当做一个模块，打包到js文件夹中。

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

​ App.vue：唯一的根组件，Vue当中的组件（.vue）

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

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

package.json文件：作为项目的“身份证”，记录项目名称、项目依赖、项目运行

package-lock.json：缓存性文件

README.md：说明性文件

2.项目的其他配置

2.1 让浏览器自动打开项目

---package.json"serve": "vue-cli-service serve --open",

2.2eslint校验功能关闭

---vue.config.js

module.exports={​ //关闭eslint​ lintOnSave:false}

2.3src文件夹配置别名@（简便）

jsconfig.json配置别名@提示

{ "compilerOptions": { "baseUrl": "./", "paths": { "@/*":["src/*"] } }, "exclude" :["node_modules", "dist"]}

3.项目路由的分析

vue-router

前端所谓路由:KV键值对。

key: URL（地址栏中的路径)value:相应的路由组件注意:项目上中下结构

路由组件:

Home首页路由组件、Search路由组件、Login登录路由、Register注册路由

非路由组件:Header【首页、搜索页】Footer【在首页、搜索页】，但是在登录|注册页面是没有

4.完成非路由组件Header和Footer业务

1.书写静态页面（HTML+CSS)

2.查分组件

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

4.完成相应的动态业务逻辑①创建组件：组件结构+组件样式+图片资源②less less-loader安装

npm install --save less less-loader@5

<style scoped lang="less">

4.1使用组件的步骤（非路由组件）-创建/定义-引入-注册-使用

5.路由组件的创建

淘宝镜像：

npm config set registry https://registry.npm.taobao.org

npm install --save vue-router@3.5.3

路由组件：Home 、Search 、Login 、Register-components文件夹：放置非路由组件-page/views文件夹：放置路由组件

5.1配置路由

项目中配置的路由放置router文件夹中

5.2总结

路由组件与非路由组件的区别?1:路由组件一般放置在pages|views文件夹，非路由组件一般放置components文件夹中2:路由组件一般需要在router文件夹中进行注册（使用的即为组件的名字），非路由组件在使用的时候，一般都是以标签的形式使用3:注册完路由，不管路由路由组件、还是非路由组件身上都有、router属性$route:一般获取路由信息【路径、query、params等等】$router:一般进行编程式导航进行路由跳转【push|replace】

5.3路由的跳转?

路由的跳转有两种形式:声明式导航router-link,可以进行路由的跳转编程式导航push|replace，可以进行路由跳转

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

6.Footer组件显示与隐藏

显示或者隐藏组件: v-if|v-showFooter组件:在Home、Search显示Footer组件Footer组件:在登录、注册时候隐藏的

6.1我们可以根据组件身上的$route获取当前路由的信息，通过路由路径判断Footer显示与隐藏。6.2配置的路由的时候，可以给路由添加路由元信息【meta】，路由需要配置对象，它的key不能瞎写、胡写、乱写

7.路由传参

8.1:路由跳转有几种方式?比如:A->B声明式导航:router-link（务必要有to属性），可以实现路由的跳转编程式导航:利用的是组件实例的$router.push|replace方法，可以实现路由的跳转。(可以书写一些自己业务)

8.2:路由传参，参数有几种写法?params参数:属于路径当中的一部分，需要注意，在配置路由的时候，需要占位query参数:不属于路径当中的一部分，类似于ajax中的querystring /home?k=v&kv=,不需要占位

8.路由传参相关面试题

1;路由传递参数（对象写法)path是否可以结合params参数一起使用?路由跳转传参时，对象的写法时name、path形式，但是path不可结合params参数一起使用

2:如何指定params参数可传可不传?//如果路由要求传递params参数，但是如果不传递params参数，发现一件事情，URL会有问题的

如何指定params参数可以传递、或者不传递，在配置路由的时候，在占位的后面加上一个问号【params可以传递或者不传递】

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

4:路由组件能不能传递props数据?可以：三种写法：对象、函数、布尔

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

最后

以上就是平常眼神为你收集整理的尚硅谷-尚品汇项目（day1）的全部内容，希望文章能够帮你解决尚硅谷-尚品汇项目（day1）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。