目录
day1
2)脚手架使用
2: vue init webpack 项目的名字
3|4:vue create 项目名称
脚手架目录:public + assets文件夹区别
node_modules:放置项目依赖的地方
public:一般放置一些共用的静态资源,打包上线的时候,
public文件夹里面资源原封不动打包到dist文件夹里面
src:程序员源代码文件夹 -----assets文件夹:经常放置一些静态资源(图片),assets文件夹里面资源webpack会进行打包为一个模块(js文件夹里面)
-----components文件夹:一般放置非路由组件(或者项目共用的组件)
App.vue 唯一的根组件 main.js 入口文件【程序最先执行的文件】
babel.config.js:babel配置文件
package.json:看到项目描述、项目依赖、项目运行指令
README.md:项目说明文件
3)脚手架下载下来的项目稍微配置一下
3.1:浏览器自动打开
在package.json文件中
"scripts": { "serve": "vue-cli-service serve --open", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },
3.2关闭eslint校验工具
创建vue.config.js文件:
需要对外暴露 module.exports = { lintOnSave:false, }
3.3 src文件夹的别名的设置 因为项目大的时候src(源代码文件夹):里面目录会很多,找文件不方便,
设置src文件夹的别名的好处,找文件会方便一些 创建jsconfig.json文件 { "compilerOptions": { "baseUrl": "./", "paths": { "@/": [ "src/" ] } }, "exclude": [ "node_modules", "dist" ] }
5)路由的配置 vue-router 路由分为KV
node平台(并非语言) 对于后台而言:K即为URL地址 V即为相应的中间件 http://localhost:8080/0607 app.get("/0607",(res,req)=>{ res.send('我是祖国的老花骨朵'); });
前端路由: K即为URL(网络资源定位符) V即为相应的路由组件
5.1路由的一个分析 确定项目结构顺序:上中下 -----只有中间部分的V在发生变化,中间部分应该使用的是路由组件 2个非路由组件|四个路由组件 两个非路由组件:Header 、Footer 路由组件:Home、Search、Login(没有底部的Footer组件,带有二维码的)、Register(没有底部的Footer组件,带二维码的)
5.2安装路由 cnpm install --save vue-router --save:可以让你安装的依赖,在package.json文件当中进行记录 5.3创建路由组件【一般放在views|pages文件夹】 5.4配置路由,配置完四个路由组件
6)创建非路由组件(2个:Header、Footer)
非路由组件使用分为几步: 第一步:定义 第二步:引入 第三步:注册 第四步:使用
非路由组件的结构的搭建: 前台项目的结构与样式不需要自己写的,老师准备好了 辉洪老师静态页面: 结构 + 样式 +图片资源
项目采用的less样式,浏览器不识别less语法,需要一些loader进行处理,把less语法转换为CSS语法
1:安装less less-loader@5 切记less-loader安装5版本的,不要安装在最新版本,安装最新版本less-loader会报错,报的错误setOption函数未定义
2:需要在style标签的身上加上lang="less",不添加样式不生效
7)路由的跳转 路由的跳转就两种形式:声明式导航(router-link:务必要有to属性) 编程式导航push||replace 编程式导航更好用:因为可以书写自己的业务逻辑
面试题:v-show与v-if区别? v-show:通过样式display控制 v-if:通过元素上树与下树进行操作 面试题:开发项目的时候,优化手段有哪些? 1:v-show|v-if 2:按需加载 8)首页|搜索底部是有Footer组件,而登录注册是没有Footer组件 Footer组件显示|隐藏,选择v-show|v-if 路由元信息
9)路由传参 params参数:路由需要占位,程序就崩了,属于URL当中一部分 query参数:路由不需要占位,写法类似于ajax当中query参数 路由传递参数先关面试题 1:路由传递参数(对象写法)path是否可以结合params参数一起使用? 不可以:不能这样书写,程序会崩掉 2:如何指定params参数可传可不传? 3:params参数可以传递也可以不传递,但是如果传递是空串,如何解决? 4:如果指定name与params配置, 但params中数据是一个"", 无法跳转,路径会出问题 5: 路由组件能不能传递props数据?