Vue2.0使用小结

近期第一次使用 vue 快速开发了一款前端项目, 开发效率与便捷性大幅提升, 体验了一把 vue 的艺术之道, 在此总结下目前所接触到的 vue 基础使用知识, 后续会补充遇到的知识点和问题以及解决方案.

简介: Vue 是典型MVVM框架，拥有双向绑定的能力与完整的组件化方案，利用 virtual Dom 提供了函数式的 UI 编程方式，可以后端渲染。 中文文档 vue.js

一. 开发环境搭建:

1. 下载nodejs并安装: Node.js 中文网

2. 设置淘宝镜像站:

npm install -g cnpm --registry=https://registry.npm.taobao.org

3. 更新npm版本:

cnpm install npm -g

4. 全局安装脚手架 vue-cli

cnpm install --global vue-cli

 

二. 创建项目

# 使用webpack初始化新项目
vue init webpack my-project

# 进入项目目录
cd my-project

# 安装所有依赖库
cnpm install

# 运行调试, 此时会自动打开默认浏览器,启动本地项目
npm run dev

 

三. 项目开发相关

 

1. 网络请求

vue1.0时代 推荐的网络请求库 vue-resource

vue2.0 时代 推荐的网络请求库 axios

 

由于我本人使用的是vue2.0, 下面介绍 axios 使用中应注意的问题.

 

(1) 指定请求头 RequestHeader

默认情况下, axios post 传参时不指定请求头 RequestHeader，默认使用的Content-Type是 text/plain;charset=UTF-8，, 而我们后台接口通常采用form表单类型接收, 此时会认为参数非法无法获取, 报 302错误, 如下图:

 

解决方案: 设置Content-type, 同时使用 FormData 传参

import axios from 'axios'

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

let data = new FormData()
data.append('key', key)

axios.post(`/api/****`, data).then(response => response.data)

(2) 跨域问题

如果我们是使用 vue-cli 脚手架构建的项目, 在 /config/index.js 文件中配置代理:

 

target 字段改为自己的后台接口 ip 和端口

后台接口需要设置header

2. 路由 vue-router中文文档

如果我们是使用 vue-cli 脚手架构建的项目, 路由默认配置在 /src/router/index.js 文件中, 并已经配置到 main.js 中

 

路由的跳转有 3种 情况

(1) 固定地址 /menu/regist

(2) 动态路径 /user/:userId

// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})

 

(3) 传递参数 /register?plan=private

// 带查询参数
router.push({ path: 'register', query: { plan: 'private' }})

 

常见问题: (不定期补充)

Vue 2.0 API 变化

 

如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

 

vue-cli 生成的模板中有一个@，是什么意思？

 

常用组件库: (不定期补充)

PC端UI组件 Element

移动端UI组件 VUX - 移动端Vue组件库

高德地图插件 vue-amap

移动端滚动插件 better-scroll

 

福利: 本文已同步到我的个人技术网站 IT干货-sufaith 该网站包括Python, Linux, Nodejs, 前端开发等模块, 专注于程序开发中的技术、经验总结与分享, 欢迎访问.