电商项目尚品汇学习笔记_尚品汇项目学习笔记整理

本文参考其他文章自己整理补充的,要阅读原文请查看:尚品汇项目笔记_爱哭的毛毛虫的博客-CSDN博客_尚品汇项目

1、vue文件目录

public文件夹：静态资源，webpack进行打包的时候会原封不动打包到dist文件夹中。

pubilc/index.html是一个模板文件，作用是生成项目的入口文件，webpack打包的js,css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html。
src文件夹

1.assets:存放公用的静态资源
2.componets:存放非路由组件(全局组件),其他组件放在views文件夹中,路由组件放入pages文件夹中
3.App.vue:唯一的根组件
4.main js:项目入口文件,最先执行的文件

babel.config.js: 配置文件（babel相关）
package.json: 项目的详细信息记录
package-lock.json: 缓存性文件（各种包的来源）

2、项目配置

2.1 项目运行，浏览器自动打开

package.json
    "scripts": {
    "serve": "vue-cli-service serve --open", //--open自动打开
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
    },
 
 
//或者在vue.config.js文件中设置
module.exports = {
  open:true
  }

2.2 关闭eslint校验工具（不关闭会烦人的代码规范，不按照规范就会报错）

在根目录中创建vue.config.js文件

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

3、组件页面样式

组件页面的样式使用的是less样式，浏览器不识别该样式，需要下载相关依赖
npm install --save less less-loader@5
如果想让组件识别less样式，则在组件中设置
<script scoped lang="less">

4、清除vue页面默认的样式

vue是单页面开发，我们只需要修改public下的index.html文件，引入清除样式的css文件

<link rel="stylesheet" href="reset.css">

5、pages文件夹

创建pages文件夹，并创建路由组件
5.1创建router文件夹，并创建index.js进行路由配置，最终在main.js中引入注册

5.2 总结
路由组件和非路由组件区别：

• 非路由组件放在components中，路由组件放在pages或views中
• 非路由组件通过标签使用，路由组件通过路由使用
• 在main.js注册玩路由，所有的路由和非路由组件身上都会拥有$router $route属性
• $router：一般进行编程式导航进行路由跳转
• $route： 一般获取路由信息（name path params等）

5.3 路由跳转方式

• 声明式导航router-link标签 ,可以把router-link理解为一个a标签，它 也可以加class修饰
• 编程式导航 ：声明式导航能做的编程式都能做，而且还可以处理一些业务