第1章初始化
node 环境升降级
- 下载 n 模块
npm i -g n- 稳定版本：
n stable - 最新LTS版本：
n lts - 最新版本：
n latest - 某一个版本：
n 10.0.0
第2章 Git安装和配置
[知识点]Git和github基本使用
- 查看本机安装了几个 git
which -a git - vscode下 git 配置
- vscode安装下面的插件
{width=73%}
- 通过
git config --global user.name和git config --global user.email配置的用户名和邮箱地址，会被写入到C:/Users/用户名文件夹/.gitconfig文件中。这个文件是 Git 的全局配置文件，配置一次即可永久生效。
第3章 Vue Cli4.0安装和使用
- npm install -g @vue/cli 或先
npm install -g cnpm再cnpm install -g @vue/cli(快一点，不会被墙) - vue –version （最新的一次安装会覆盖以前安装的版本）
- 官方文档
利用脚手架创建项目
vue create 项目名称- 启动项目
cnpm run serve
也可以用可视化界面的方式去创建项目
vue ui
第4章 项目基础架构
前端跨域解决方案
- CORS跨域
- JSONP跨域
cnpm i jsonp --save-dev，jsonp(url,(err,res)=>{}) - 代理跨域，通过修改nginx服务器配置来实现
vue.config.js
{width=61%}
代理知识点
接口环境设置
Mock设置（模拟数据）
- 本地创建json
- easy-mock平台 ( fastmock )
- [推荐] 集成Mock API
cnpm i mockjs --save--dev
Mock.js
Mockjs知识点
项目初始化
- 大图片放
public，小图片放src/assets - 基本插件安装
路由封装
{width=76%}
Storage封装
{width=76%}
接口错误拦截
axios导入
{width=76%}
axios拦截器
- 为什么这里的编程式导航不用router的，因为router在这里用不行，要在APP那些组件内才行
第5章 商城首页
scss语法
flex布局复习
display:flex;
justify-content:space-between;
align-items:center;
text-align设置水平居中vertical-align设置垂直居中
首页轮播图
transition组件（里面要用v-show）
- 进入/离开 & 列表过渡
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
图片懒加载
- 包地址
- main.js:
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)
// or with options
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt: 1
})
new Vue({
el: 'body',
components: {
App
}
})
- template: 即把传统的
: src="/img.jpg"换成v-lazy="'/img.jpg'"
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
loading-svg，经典的loading时使用的素材
第6章 登录页面
Vue里的data声明方式：data:{}，data(){return {xxx}}
- 在简单的vue实例中看到的Vue实例中data属性是如下方式展示的：
let app= newVue({
el:"#app",
data:{
msg:''
},
methods:{
}
})
- 在使用组件化的项目中使用的是如下形式：
export default{
data(){
return {
showLogin:true,
// def_act: '/A_VUE',
msg: 'hello vue',
user:'',
homeContent: false,
}
},
methods:{
}
}
- 为何在大型项目中data需要使用return返回数据呢？
原因：不使用return包裹的数据会在项目的全局可见，会造成变量污染
使用return包裹后数据中变量只在当前组件中生效，不会影响其他组件。
vue-cookie插件
- vue-cookie插件
- 以后对插件不熟悉的话，可以打开 npm官网 模仿一下
// From some method in one of your Vue components
this.$cookie.set('test', 'Hello world!', 1);
// This will set a cookie with the name 'test' and the value 'Hello world!' that expires in one day
// To get the value of a cookie use
this.$cookie.get('test');
// To delete a cookie use
this.$cookie.delete('test');
第七章 Vuex
{width=81%}
{width=81%}
{width=52%}
{width=61%}
{width=46%}
{width=81%}
延迟问题（渲染时拿到数据为空，渲染完后才取到数据，晚了）
用computed计算属性解决，一旦后面状态改变了，就会重新计算
第8章 产品站页面
路由复习
{width=61%}
{width=61%}
组件吸顶（只能用固定定位不能用绝对定位）
关于兼容性获取滚动距离
let scrollTop = window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop;
需要注意滚动到一定距离后，因为变成固定定位了（脱标），记得设置宽度100%了
CSS3 box-shadow 属性
视频模块实现
- 我们习惯用
overlay表示我们的遮罩，muted静音播放，autoplay自动播放 - CSS object-fit 属性
@keyframes定义动画- 固定中间显示
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
transition过渡实现
{width=81%}
{width=88%}
{width=48%} animation动画（成对出现）
{width=81%} - 这里opacity设置为1，可以使得动画完成后也是1（因为动画完成后就算了回到原来去了）。（动画前为1但因为位置所以没显示）
{width=48%}
第9章 商品详情页面
this.$router.push('/cart');this.$route.params.id,//获取商品ID
第10章 购物车页面
公共logo的样式
伪类是不支持hover的，但是，可以给div加hover
其实就是 div:hover:before{…代码}
这样写的意思是div hover状态下的before怎样怎样
第11章 ElementUI集成
ElementUI应用
- ElementUI官网
.babelrc和babel.config.js差不多，用后面那个替代前面那个就可以main.js按需引入（不用再引入样式文件），然后.vue组件里要使用就去复制相关的代码 就行
- 要自定义主题，在项目的入口文件中，直接引入
element-variables.scss样式文件（在这个文件自定义颜色啥的）
退出功能
- 因为现在的项目是
单页面，从退出到登录并没有进行页面的刷新，然后又因为你退出之后把vuex里的用户名和购物车数量都重置了，这时你再登录（只把用户名存进了vuex），而你本来应该有加购数的但购物车数量还是0（是因为页面其实并没有刷新所以没重载vue实例所以没获取加购数到vuex里所以显示0）。故你从登录来到首页时需要再次从axios获取购物车数量到vuex里。 - vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例
第12章 订单确认页面
- svg怎么用？？？？？？
第13章 订单结算
this.$route.query.orderNo- 动态参数传参：
/orders/${this.orderId}。${ }是es6新增的字符串方法
可以配合单反引号完成字符串拼接的功能 - 旋转180°
transform: rotate(180deg)
支付宝支付里的content是一个<form>，action里有一个地址，你提交表单后就可以跳转了
{width=81%}
微信扫码支付开发文档
- 类型介绍
- 开发指引
-
关闭eslint校验
{width=61%} -
商户后台系统先调用微信支付的统一下单接口，微信后台系统返回链接参数code_url，商户后台系统将code_url值生成二维码图片，用户使用微信客户端扫码后发起支付。注意：code_url有效期为2小时，过期后扫码不能再发起支付。
-
本项目调用支付接口，返回的就是这么一个链接参数，把它转为二维码即可
转二维码方式：
{width=81%} 第14章 订单列表
坑（错误的）
{width=71%}
{width=81%}
正确
{width=81%}
三种路由跳转方式
页面优化（Loading和NoData）
1.引入Loading组件 请求发出去后，没回来之前要显示loading
{height=31%}
2.引入NoData组件订单没记录时显示无数据
订单列表的分页功能
1.分页器
推荐ElementUI的pagination组件
2.加载更多
:loading为true时，按钮被禁用，false时才可以再次点击
{width=52%}
3.滚动加载
借助插件vue-infinite-scroll
cnpm install vue-infinite-scroll --save
{width=73%}
第15章 上线部署
vue.config配置介绍
publicPathoutputDirindexPathlintOnSave设置为false时可以关掉eslint校验productionSourceMap如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建（别人就看不到我们的源码了）devServer
路由按需加载 路由懒加载官方文档
方案1 Promise法
方案2 ES7的语法需要安装syntax-dynamic-import 插件
删除预加载–真正按需
图片优化
方案1：推荐网站：tinypng
.png格式图片对前端友好
方案2：CDN、把静态资源放到七牛云 服务器上
服务器部署准备工作
1.服务器安装：Nginx安装和配置
项目部署说明
- 登录服务器
ssh root@ip
如何连接不成功，请绑定密钥对，通过ssh -i 密钥路径root@ip访问； - 进入到服务器根目录
cd / - 下载软件安装包
a. rpm
b. apt-get可以用于运作deb包，例如在Ubuntu系统上对某个软件的管理：
安装：apt-get install
卸载：apt-get remove
更新：apt-get update
c. yum 可以用于运作rpm包,类似仓库。如对包的管理操作：
安装：yum install
卸载：yum remove
更新：yum update
2.Node环境搭建（就不需要编译了）
用wget命令下载 nodejs 这个包
d. wget + 下载链接
Nodejs: `wget https://npm.taobao.org/mirrors/node/v12.14.0/node-v12.14.0-linux-x64.tar.xz`
解压缩文件：
`tar -zxvf 压缩文件名.tar.gz`
`tar -xvf 压缩文件名.tar`
**nginx编译如果报错，需要安装编译器**
`yum install gcc gcc-c++ glibc -y`
`yum install pcre-devel zlib-devel openssl-devel –y`
**指定安装路径**
`./configure --prefix=/usr/local/bin/nginx`
4.配置环境变量（为了能把node、npm这些命令可以在全局使用）
ln -s /soft/node-v12.14.0/bin/node /usr/local/bin/node
ln -s /soft/node-v12.14.0/bin/npm /usr/local/bin/npm
项目部署
如何部署二级域名
下载ftp软件：FileZlla
- SFTP安装：参考百度云文档
