尚硅谷-尚品汇项目(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