vue电商项目(一)——项目搭建

目录

一、项目初始化

1、脚手架目录介绍

2、项目的其他配置

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

（2）关闭语法检查工具

（3）src文件夹的简写形式，配置别名，方便以后访问。

 二、项目路由搭建

1、项目路由分析

（1）Vue-router路由介绍

（2）组件分析

2、开发项目步骤

3、非路由组件的搭建

4、路由组件的搭建

（1）安装路由器

 （2）引入路由组件

（3）路由重定向

（4）路由跳转

三、Footer组件的显示与隐藏

四、 路由传参

1、路由跳转的两种方式

2、路由传参，参数有几种书写方式

3、路由传参面试题

五、解决NavigatioDuplicated警告

---

一、项目初始化

使用脚手架创建项目，安装脚手架npm install -g @vue/cli， 创建项目vue crete app,

我起名为app。

1、脚手架目录介绍

node_modules文件夹：放置项目的依赖

public文件夹：一般放置的是静态资源（图片），需要注意：放在public文件夹中的静态资源，webpack进行打包的时候，会原封不动打包到dist文件夹中，不会当做一个模块打包到 JS 里面

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

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

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

​ —App.vue ：唯一的根组件，Vue当中的组件都是(.vue)

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

babel.config.js：配置文件，与babel相关

package.json文件：记录着项目信息，叫什么…有哪些依赖…项目怎么运行…

package-lock.json：缓存性文件

README.md：说明性文件

2、项目的其他配置

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

找到package.json文件夹,在”script”进行如下修改

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

（2）关闭语法检查工具

找到vue.config文件夹，书写一下代码

  //关闭eslint(语法检查工具)
  lintOnSave:false

（3）src文件夹的简写形式，配置别名，方便以后访问。

在jsonfig.json文件夹下做如下配置即可。

【但是’@’不能在”node-modules”,”dist”中使用】

 二、项目路由搭建

1、项目路由分析

（1）Vue-router路由介绍

前端路由：KV键值对

Key:URL(地址栏路径)

Value:相应的路由组件

这次的项目是上中下结构

（2）组件分析