vue的开发总结

时间 2020-01-09

标签 vue 开发总结繁體版

原文原文链接

https://github.com/bailicangdu/vue2-elm

1、router.go ;router.push和 router.replace的区别

1. router.go(n)

这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，相似window.history.go(n)html

2. router.push(location)

想要导航到不一样的URL，则使用router.push方法，这个方法会向history栈添加一个新的记录，因此，当用户点击后退按钮时，则回到以前的URL。vue

3. router.replace(location)

跟router.push很像，惟一的不一样就是，它不会向history添加新记录，而是跟它的方法名同样--替换掉当前的history记录。node

2、vue router常见问题总结

1. router和route的区别

$router为VueRouter实例，想要导航到不一样URL，则使用$rourer.push方法react

$route为当前router跳转对象里面获取name、path、query、params等webpack

2. params和query的区别

*用法上ios

query要用path来引入，params要用name来引入，接收参数都是相似的git

分别是this.$route.query.name和this.$route.params.namegithub

this.$router.push({    path:'/detail',    query:{        code:10011    }})
this.$router.push({    name:'detail',    params:{        code:10011    }})复制代码

*展现上
web

query更加相似于咱们ajax中get传参，params相似于post。说的简单一点，前者在浏览器地址栏中显示参数，后者则不显示ajax

3. router.replace()

*跳转登陆页

*携带当前页面路由，以在登陆完成登陆后返回当前页面

router.replace({    path:"/login",    query:{        redirect:router.currentRoute.fullPath    }})
复制代码

3、H5 localstorage本地存储数据的封装以及在vue中的使用

经过本地存储（Local Storage），web应用可以在用户浏览器中对数据进行本地的存储

1. 存储

localStorage.setItem('lastname','Gates');

2. 取本地存储数据

localStorage.getItem('lastname')

3. 删除"lastname"

localStorage.removeItem('lastname')

// H5 localstorage本地存储数据的封装以及在vue中的使用
var storage={    
    // 存储    
    set(key,value){        
        localStorage.setItem(key,JSON.stringify(value));    
    },    
    // 取出数据    
    get(key){        
        return JSON.parse(localStorage.getItem(key));    
    },    
    // 删除数据    
    remove(key){        
        localStorage.removeItem(key);    
}}
// 暴露给外部访问
export default storage

// ********而后某个页面须要本地存储，就须要用import引入：import storage from './storage.js'
import storage from './storage.js'
// 使用
storage.set('list',this.list)复制代码

4、Vue推荐VSCode开发必备的插件

Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl须要同时按着）

EsLint —— 语法纠错
view in browser —— 如何用浏览器预览运行html文件
Debugger for Chrome —— 映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个）

Auto Close Tag —— 自动闭合HTML/XML标签

Auto Rename Tag —— 自动完成另外一侧标签的同步修改

JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各类包含js代码文件的时间

Path Intellisense —— 自动路劲补全

HTML CSS Support —— 让 html 标签上写class 智能提示当前项目所支持的样式

React-native 快捷键显示-----react组件模板；例如：cccs
vue vscode snippets 快捷键显示------vue组件模板；例如：vba

5、使用vant开发饿了么笔记

1. 下载脚手架

2. 安装vant、在package中配置、引入vant组件库（按需加载）

安装

# 经过 npm 安装
npm i vant -S

# 经过 yarn 安装
yarn add vant
复制代码

按需加载

babel-plugin-import 是一款 babel 插件，它会在编译过程当中将 import 的写法自动转换为按需引入的方式

# 安装插件
npm i babel-plugin-import -D
// 在.babelrc 中添加配置
// 注意：webpack 1 无需设置 libraryDirectory
{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}复制代码

三、在手机上预览开发的网页的方法

1 、首先在项目的config目录下的index.js中修改host的ip地址修改为本身电脑的ip地址

查询ip地址：（1）打开cmd （2）输入ipconfig

二、须要从新启动项目 npm run serve ,而后在浏览器打开，在手机打开（注意：电脑和手机的WiFi须要连同个局域网）

4. tabBar的实现（使用路由router-view）

一、在App.vue文件中写以下代码

<template>  <div id="app">    <router-view />    <van-tabbar v-model="active" class="active_tab" safe-area-inset-bottom>      <van-tabbar-item        v-for="(item, index) in tabBarList"        :key="index"        @click="tab(index,item.name)"      >        <span :class="currIndex == index ? active : ''">{{ item.title }}</span>        <template slot="icon" slot-scope="props">          <img :src="props.active ? item.select : item.noSelct" />        </template>      </van-tabbar-item>    </van-tabbar>  </div></template>
<script>import Vue from "vue";import { Tabbar, TabbarItem } from "vant";Vue.use(Tabbar).use(TabbarItem);
export default {  data() {    return {      currIndex:0,      active:0,      tabBarList: [        {          name:'home',          path: "/home",          select: require("./assets/img/home-select.png"),          noSelct: require("./assets/img/home-no-select.png"),          title: "外卖"        },        {          name:'life',          path: "/life",          select: require("./assets/img/home-select.png"),          noSelct: require("./assets/img/home-no-select.png"),          title: "生活"        },        {          name:'order',          path: "/order",          select: require("./assets/img/home-select.png"),          noSelct: require("./assets/img/home-no-select.png"),          title: "订单"        },        {          name:'myseft',          path: "/myself",          select: require("./assets/img/home-select.png"),          noSelct:require( "./assets/img/home-no-select.png"),          title: "个人"        }      ]    };  },  methods:{    tab(index,val){//点击跳转到相应的路由      this.currIndex=index;      this.$router.push(val)    }  }};</script>
<style>#app { color: #2c3e50;}.active_tab img {//图片的大小 width: 26px; height: 26px;}
.van-tabbar-item--active {//选中字体的颜色  color: #3190e8;}</style>复制代码

二、router目录下的index.js中引入路由，注册路由

import Vue from 'vue'import Router from 'vue-router'import Home from '@/components/home'import Life from '@/components/Life'import Order from '@/components/order'import Myseft from '@/components/myself'
Vue.use(Router)
export default new Router({  routes: [    { path:'/',redirect:'/home'},    {      path: '/home',      name: 'Home',      component: Home    },    {      path: '/life',      name: 'Life',      component: Life    },    {      path: '/order',      name: 'Order',      component: Order    },    {      path: '/myseft',      name: 'Myseft',      component: Myseft    },  ]})复制代码

6、使用node.js开发后台

1. 安装express、body-parser cookie-parser

新建server目录，在此目录下新建model.js、server.js和user.js

npm install express -S;
npm install body-parser -S;
npm install cookie-parser -S;
npm install mongoose -S;

复制代码

二、在package.json中配置

为了告诉开发环境的服务器去代理任何开发环境中未知的请求到咱们本身的api服务器，添加一个proxy到packge.json的字段

"proxy": "http://localhost:8888"复制代码

在server.js的代码

const express=require('express');
const bodyParser=require('body-parser');
const cookieParser=require('cookie-parser')
const app=express();
const Router=express.Router();
app.use(bodyParser())
app.use(cookieParser())
app.use('/user',require('./user'));
app.listen(8888)复制代码

在user.js的代码

const express=require('express');const Router=express.Router();
const model=require('./model');//拿表const Business=model.getModel('business');//拿到user表，使用getModel方法
Router.get('/list',(req,res)=>{    res.json({businessName:'华为公司',address:'地址',id:1,shopdesc:'比较出名的公司'})})
module.exports=Router;复制代码

在model.js中见表

const mongoose=require('mongoose');const DB_URL='mongodb://127.0.0.1:27017/boss';mongoose.connect(DB_URL)
const models={    business:{        'businessName':{type:String,require:true},        'address':{type:String,require:true},        'id':{type:String,require:true},        'shopdesc':{type:String,require:true}    }}
for(let m in models){    mongoose.model(m,new mongoose.Schema(models[m]))}
module.exports={    getModel:function(name){        return mongoose.model(name)    }}复制代码

服务器就开启成功，接口就有了/lsit

7、axios的封装和api的管理

1. 安装axios，引入axios

npm install axios -S;//安装命令
import axios from 'axios';//引入

复制代码