1 创建前后端

创建前端项目 vue create <项目名称>

创建后端项目

全局：cnpm install express-generator -g 
局部：express --view=ejs <项目名称> 
启动项目：http://localhost:3000/

2 切换路由并改变图标

添加点击事件，如果是当前路由切换，则不跳转，否则跳转

如何判断图标切换？
获取当前路由，看与哪个图标一直，则为true，则图片为选中时的
 <img :src="$route.path.includes(i.path) ? i.selected : i.active" alt= />

3 使用阿里巴巴矢量图标修改大小

使用font-size可修改图标大小

<div class="kefu">
      <i class="iconfont icon-kefu"></i>
</div>
    
.kefu i {
  font-size: 36px;
  color: white;
}

4 头部切换插件ly-tab

1、下载插件 npm install ly-tab -S 
2、main.js文件中引入插件 
import LyTab from 'ly-tab' 
Vue.use(LyTab)
3、    
<ly-tab v-model="selectedId" :items="items" :options="options"></ly-tab>

data() {
    return {
      selectedId: 0,
      //选项
      items: [
        { label: "首页" },
        { label: "推荐" },
        { label: "Android" },
        { label: "前端" },
        { label: "后端" },
        { label: "iOS" },
        { label: "产品" },
        { label: "人工智能" },
        { label: "设计" },
      ],
      //选中状态
      options: {
      //选中的颜色
        activeColor: "#b0352f",
      },
    };
  },

5 ::v-deep

深度选择器来修改外用第三方组件的样式

6 swiper插件

1、安装npm i vue-awesome-swiper@3.1.3 -5
2、引入
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
3、使用
 <swiper :options="swiperOption">
  <swiper-slide v-for="(item, index) in swiperList" :key="index">
    <img :src="item.imgUrl" alt="" />
  </swiper-slide>
</swiper>

7 滑动插件

 1、 npm i better-scroll -S
 2、引入
 import BetterScroll from 'better-scroll'

有节点的时候才能用，当dom加载完再执行 methos中

  注意
  better-sroll默认取消click事件
  解决：
  new BetterScroll(this.$refs.left,{click:true});
  
  better-sroll默认取消scroll事件
  probeType：默认为0
  建议为2
  new BetterScroll(this.$refs.left,{click:true，probeType:2});

8 获取数据后，父组件向子组件传递数据

父组件：使用‘：’

 <Swiper v-if="item.type == 'swiperList'" :swiperList="item.data"></Swiper>

子组件接收：swiperiList则为接收的数据，可在标签中使用

 props: {
  swiperList: Array,
},

 <swiper-slide v-for="(item, index) in swiperList" :key="index">
      <img :src="item.imgUrl" alt="" />
 </swiper-slide>

9 flex:1 把弹性容器剩余的空间占满

flex:1是flex-grow(放大比例), flex-shrink(缩小比例), flex-basis。
当一个容器设置`display:flex`变成一个`flex`容器后，
如果容器没有被占满，换言之有剩余空间，则`flex-grow`起作用。
相反，若空间不足，则`flex-shrink`起作用。
在计算放大或缩小比例时，要根据`flex-basis`的值来计算比例。

flex: 1, 对应的是`1 1 0%`, 相当于可扩大，可缩小(0为不可缩小）,flex-basis`为`0%`

10 本地存储逻辑

if (!localStorage.getItem("searchList")) {
        //没有
        localStorage.setItem("searchList", "[]");
      } else {
        //之前有
        this.searchArr = JSON.parse(localStorage.getItem("searchList"));
      }
      //增加数据
      this.searchArr.unshift(this.searchVal);
      //ES6去重
      let newArr = new Set(this.searchArr);
      //给本地存储赋值
      localStorage.setItem("searchList",
      JSON.stringify(Array.from(newArr)));
      
//删      
localStorage.removeItem("searchList");

11 mint-ui

1、下载 nom install mint-ui -S
2、引入
//main.js全局引入mint-ui
import MintUI from "mint-ui";
import "mint-ui/lib/style.css";
Vue.use(MintUI);
3、使用（在需要使用的组件中）
<span @click="deleteSto">清空历史记录</span>


import { MessageBox } from "mint-ui";
 methods: {
    deleteSto() {
      MessageBox({
        title: "提示",
        message: "确定执行此操作?",
        showCancelButton: true,
      });
    },
  },

12 图片懒加载

当滑到页面后图片才加载

//引入
import { Lazyload } from 'mint-ui';
Vue.use(Lazyload);
//使用
<ul>
  <li v-for="item in list">
    <img v-lazy="item">
  </li>
</ul>


//样式
image[lazy=loading] {
  width: 40px;
  height: 300px;
  margin: auto;
}

13 sass

Sass(Syntactically Awesome Stylesheets)是一个 CSS 预处理器，是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

下载
npm install sass-loader --save-dev 
npm install node-sass --save-dev
使用
<style scoped lang="scss">

14 路由传值

显式：query，在push后地址有有带值，到另一个界面获取query值：this.$route.query.id

  this.$router.push({ name: "detail", query: { id: id } });

15 前后端传值

前端

async getData() {
      let id = this.$route.query.id;
      let res = await http.$axios({
        url: "/api/goods/id",
        //向后端传参
        params: { id },
        data:'a'
      });
      //接受后端传回来的值
      this.goods = res;
      //   console.log(res);
    },

后端

router.get("/api/goods/id", function (req, res, next) {
// 接收前端传的值
 let id = req.query.id;
 let b=req.body
 connection.query(
   "select * from goods_list where id=" + id + "",
   function (error, results) {
     if (error) throw error;
     res.json({
       code: 0,
       data: results[0],
     });
   }
 );
});

16 like模糊匹配

'select * from goods_list where name like "%'+变量名+'%"',

17 keep live 内置组件

缓存组件提高性能只要使用会多两个声明周期：activated每次进入都会被执行 deactivated

18 短信验证

cloud.tencent.com/?fromSource…

下载npm i qcloudsms_js
引入var QcloudSms = require("qcloudsms_js");

18 后端添加MySQL数据

！！！！加引号

 inserData(option) {
    let userTel = option.userTel;
    let userPwd = option.userPwd || "666666";
    let i = "1.jpg";
    let j = "1";
    let h = "2";
    return `insert into user (tel,pwd,imgUrl,nickName,token) values ('${userTel}','${userPwd}','${i}','${j}','${h}'y)`;
  },
};

全栈项目——商城