vue:
主要终端操作
1.下脚手架：vue create 项目名
选择顺序：2- -1，4，5，6- -2- -1
2.起服务：npm run serve
3.下包 ： npm i axios -D -----ajax
npm i swiper -D ------轮播图
清空脚手架
1.App.vue文件中只留这些
<template>
<div id="app">
<router-view></router-view>//用于稍后配路由的视图
</div>
</template>
<style lang="scss">
//必要添加的样式
<style>
*{
padding: 0;
margin: 0;
list-style: none
}
body,html,#app{
width: 100%;
height: 100%;
}
</style>
1.view文件夹清空，准备写入所需要的路由文件
2.router => index.js文件中删除以下代码，准备再此文件配路由
import Home from '../views/Home.vue'
{
path: '/',
name: 'home',
component: Home
},
{
path:"/login",
component:()=>import('../liews/Login/Login')
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
3.删除 components=>HelloWorld.vue 文件，准备写入插件
4.store=>index.js 文件不动，准备写入vuex操作
3.路由配置
在views文件中创建需要的路由配置文件（.vue格式的文件）
例如：
文件内容基本格式
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
3.在router=>index.js文件中配置路由
import index from "../views/index/index.vue"//引入文件
（2）在const routes =[]中配置
{ path:"/index", //路由位置
component:index,//引入的组件文件
redirect:"/index/head",//重定向
Children:[] //下一级路由，格式同上
}
在文件需要的地方引路由
（1）<router-view></router-view>//路由页面展示部分
（2） <router-link to="/index/head">首页</router-link>
<router-link to="/index/ding">订单</router-link>
<router-link to="/index/my">我的</router-link>//切换路由部分
点击切换的样式
.router-link-active {
color: #fff;//点击字体颜色改变为白色
}
4.简单样式（css）【注：在除了App.vue外其余vue文件的style标签加scoped属性】【scss样式加lang=”scss”】
三段式
.index{
width:100%;
height:100%;
display:flex;
flex-direction:column;
header{
width:100%;
height:50px;
}
main{
flex:1;
width:100%;
overflow:true
}
footer{
width:100%;
height:50px;
}
}
吸顶
position:sticky;
left:0;
top:0; ==>需要吸顶的部分距离顶部位置的负值
横滚
overflow-x: scroll; ==>横向加滚动条
5.数据的模拟与引入（建议直接自己模拟.json文件）
1.在src文件夹内新建mock文件夹创建data.json模拟.json数据
2.引数据
（1）需要引用数据的文件
<script>
import axios from "axios";
export default {
data() {
return {
data: [],
};
},
mounted() {
axios.get("/getdata").then(res => {
this.data= res.data;
});
});
}
};
</script>
1.在最外层（与src文件夹平级）创建vue.config.js文件
const data = require("./src/mock/data.json")
module.exports = {
devServer:{
before(app){
app.get("/getdata",(req,res)=>{
res.send(data)
})
}
}
}
6.标签内的方法
1.循环
<li v-for="(item,index) in data" :key="index">{{item}}</li>
2.受控组件
<input v-model="message">
3.点击事件
<template>
<p @click="">点击</p>
</template>
<script>
export default {
methods:{
clickBtn(){
console.log(“点击”) }
}
}
</script>
7.组件
1.在components文件夹中创建.vue格式的文件
2.在引入组件的文件中写入（例如要引入dldom插件）
<template>
<div class="head">
<div class="list">
<dldom
v-for="(item,index) in data"
:key="index"
:img="item.img" //传到插件中的数据格式
:name="item.name"
:tit="item.title"
:id="item.id"
:num="item.num"
:price="item.price"
></dldom>
</div>
</div>
</template>
<script>
import dldom from "../../../components/dldom.vue";
export default {
data() {
return {
data: [],
};
},
components: {
dldom
}
</script>
3.在插件中
（1）获取传过来的数据
<script>
export default {
props:["img","name","tit","id","num","price"],
}
</script>
（2）直接使用数据
八、跳详情
1.添加点击事件
2.script里写
methods:{
goDetail(){
this.$router.push("/detail?id="+this.id)
}
}
3.再vue.config.js文件中写（obj是在数据里筛选出点击的单个数据）
app.get("/getdetail",(req,res)=>{
let obj = data.dldom.find(item=>item.id==req.query.id)
res.send(obj)
})
3.detail.vue文件中（this.obj是刚创建的）
mounted(){
axios.get("/getdetail",{
params:{
id:this.$route.query.id
}
}).then(res=>{
this.obj=res.data
})
}
九、Vuex
1.this.$store.commit("addnum",this.obj)
“addnum”是vuex的方法名 this.obj是传到后台的数据
2.在store文件中的index.js 文件中
state: {
shopcarList:[] //创建数据
}
mutations: {
addnum(state,obj){//obj是传过来的数据
state.shopcarList.push(obj)
}
}
3.使用vuex的数据 取到数据后直接使用
computed:{
shopcarList(){
return this.$store.state.shopcarList //shopcarList是取过来的数据
}
}
1.轮播图
1.下包 npm i swiper -D
2.引组件
import Swiper from "swiper";
import "swiper/css/swiper.css";
3.写功能 在渲染数据的axios里写
mounted() {
axios.get("/getdata").then(res => {
this.swiperList1 = res.data.swiperList1;
this.$nextTick(() => {
new Swiper(".swiper-container", {
loop: true, //无缝轮播开启
autoplay: true //自动轮播
});
});
});
}
4.轮播标签
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item,index) in swiperList1" :key="index">
<img :src="item.img" alt />
</div>
</div>
</div>
2.点击返回
this.$router.back()
