尚品汇学习笔记

1、创建项目

vue-cli脚手架创建项目

node+webpack+淘宝镜像

node_module文件夹:项目依赖文件夹

puiblic文件夹:一般放置静态资源文件夹,webpack打包的时候,会原封不动的打包到dist里

src文件夹:

​-assets文件夹:一般也是放置静态资源的文件夹(一般放置多个组件共用的静态资源),需要注意,放置到assets中的文件夹会打包时会放置到js里

-components文件夹:一般是非路由组件(全局组件)

​-App.vue:唯一的根组件(vue中的组件).vue

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

babel.config.js文件:配置文件,babel相关的

package.json文件:可以当做项目的身份证,记录项目中有什么依赖,项目怎么运行

package-lock.json:缓存性文件

2、项目的其他配置

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文件

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

3.配置src文件夹的简写,配置别名,@

根目录创建jsconfig.json文件夹

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

3、项目路由的分析

vue-router

路由组件:Home组件,Search组件

非路由组件:Header、Footer

4、完成非路由组件Header与Footer的创建

主要以业务、逻辑为主。HTML+CSS为辅

在开发项目的时候:
1、书写静态页面(HTML+CSS)

2、拆分组件

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

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

注意一:创建组件的时候,组件结构+组件的样式+图片资源

注意二:项目使用的是less样式,浏览器不识别less样式,需要使用less、less-loader处理less,需要把less处理成css

注意三:需要在style标签加上lang=less,组件才能识别less样式

4.1、使用组件的步骤(非路由组件)

-创建或者定义

-引入

-注册

-使用
https://www.hualigs.cn/image/61d32a2c696d2.jpg

5、路由组件的搭建

5.1、路由

vue-router

-components文件夹:经常放置非路由组件

pages/views文件夹:经常放置路由组件

5.2、配置路由

项目中的路由一般放在router文件夹中

路由组件和非路由组件的区别

1、路由组件一般放在pages/views中,非路由组件一般放置在components中

2、路由组件需要在router文件夹中注册(使用的即为组件的名字),非路由组件在使用的时候,一般是以标签的形式使用

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

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

3、不管是路由组件还是非路由组件都有$route和$router属性

1、配置路由

https://www.hualigs.cn/image/6208ccc1a3761.jpg

2、注册路由
https://www.hualigs.cn/image/6208ccc14623f.jpg

3、路由使用
https://www.hualigs.cn/image/61d32a2c696d2.jpg

5.3、路由的跳转

路由的跳转有两种形式

声明式导航router-link,可以进行路由的跳转

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

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

Q.E.D.