vue的開發總結

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

1、router.go ;router.push和 router.replace的區別

1. router.go(n)

這個方法的參數是一個整數，意思是在history記錄中向前或者後退多少步，相似window.history.go(n)

2. router.push(location)

想要導航到不一樣的URL，則使用router.push方法，這個方法會向history棧添加一個新的記錄，因此，當用戶點擊後退按鈕時，則回到以前的URL。

3.  router.replace(location)

跟router.push很像，惟一的不一樣就是，它不會向history添加新記錄，而是跟它的方法名同樣--替換掉當前的history記錄。

2、vue router常見問題總結

1. router和route的區別

$router爲VueRouter實例，想要導航到不一樣URL，則使用$rourer.push方法

$route爲當前router跳轉對象裏面獲取name、path、query、params等

2. params和query的區別

*用法上

query要用path來引入，params要用name來引入，接收參數都是相似的

分別是this.$route.query.name和this.$route.params.name

this.$router.push({    path:'/detail',    query:{        code:10011    }})
this.$router.push({    name:'detail',    params:{        code:10011    }})複製代碼

*展現上

query更加相似於咱們ajax中get傳參，params相似於post。說的簡單一點，前者在瀏覽器地址欄中顯示參數，後者則不顯示

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';//引入

複製代碼