博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue——进阶篇
阅读量:361 次
发布时间:2019-03-04

本文共 5271 字,大约阅读时间需要 17 分钟。

Vue之进阶篇

author:木子六日

学习视频来源于

文章目录

1.环境

  • node得先装好;
  • 改镜像:npm config set registry http://registry.npm.taobao.org;
  • 安装webpack:npm install webpack -g;
  • 安装脚手架:npm install vue-cli -g,加了-g就是全局安装;
  • 创建项目:vue create 项目名(这个是cli3或4的语法,2不是这个语法),根据一系列提示选择插件即可,一般router和vuex还有babel都会要,ESLint不要,语法太严格,很恶心;
  • 我们可以在终端中输入vue ui使用可视化页面管理项目,热部署,调试方便;
  • 开发完成后:npm run build,将打包出来的dist文件夹上传至服务器即可;

2.Router

为了开发SPA,router是必不可少的。单页面的情况下就由前端来做页面的路由,注意在创建项目的时候一定要选择安装router插件;

在项目的src下会有一个router的文件夹,里面有一个index.js,就在此处进行路由配置,具体使用如下:

import Vue from 'vue'import VueRouter from 'vue-router'import Test1 from '../views/test1.vue'import Test2 from '../views/test2.vue'Vue.use(VueRouter)	//此处注册路由  const routes = [	{
path: '/', redirect: '/test1' }, {
path: '/test1', component: Test1 }, {
path: '/test2', component: Test2, //子路由写法 children:[ {
path: '', redirect: 'news' }, {
path: 'news', component: () => import('../components/Test2News.vue') }, {
path: 'sports', component: () => import('../components/Test2Sports.vue') } ] }, {
//动态路由 path: '/test3/:id', //路由懒加载,这种写法就是懒加载的写法,使得这个路由组件只有在被使用到时才会加载(这个组件会被单独打包为一个js) component: () => import('../views/test3.vue') }, {
path: '/profile', component: () => import('../components/Profile.vue') }]const router = new VueRouter({
routes, //不加mode的话,默认使用hash改变路由表,这样的话url间会出现#,将mode设置为history即可解决这个问题 mode:'history'})export default router

单页面如下:

三个组件如下:

test1

test2

test3

3.Vuex

vuex是为了集中管理一些vue的状态,简单来说我的理解就是一个公有变量池,方便各个组件之间使用这些公共资源,注意创建项目的时候要安装vuex插件;

在目录src下有文件夹store,里面有一个index.js,在里面配置Vuex相关,例子如下:

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({
//定义一些公共的变量 state: {
counter: 0 }, //修改state中的值,注意其中的方法必须是同步的 mutations: {
increment(state){
state.counter++ }, decrement(state){
state.counter-- }, incrementCount(state,count){
state.counter += count } }, //actions里面是进行异步操作的方法,等于是在mutations里的方法外面又套了一层 actions: {
aIncrement(context){
setTimeout(() => {
context.commit('increment') },1000) } }, //modules里面可以放很多的state modules: {
a: {
state:{
}, mutations:{
}, actions: {
} } }})

组件调用这些状态的方法如下:

我们可以在Chrome浏览器上安装插件vue-dev-tools来追踪这些状态。

4.axios

vue官方推荐的ajax库是axios。

因为本身有了vue就不需要用jQuery了,而且vue也只有一万多行,jQuery也有一万多行,单单为了一个ajax不值得;原生的ajax就更不可能用了,写起来太烦了,axios比较小巧,上手也比较简单,所以就用这个了。

进入项目目录,终端输入npm install axios --save,局部安装,如果目录node_modules里面有了axios的话就说明安装成功了,node_modules里面全是项目依赖的库。

简单实用如下:

import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store'import axios from 'axios'Vue.config.productionTip = falsenew Vue({
router, store, render: h => h(App)}).$mount('#app')//axios的使用方法axios({
url: 'http://123.207.32.32:8000/home/multidata'}).then(res => {
console.log(res)})//如果有参数的话axios({
url: 'http://123.207.32.32:8000/home/data', //如果是post请求的话,将params改为data params: {
type: 'pop', page: 3 }}).then(res => {
console.log(res)})//如果有并发请求axios.all([axios({
url: 'http://123.207.32.32:8000/home/multidata'}),axios({
url: 'http://123.207.32.32:8000/home/data', params: {
type: 'pop', page: 1 }})]).then(results => {
console.log(results)})//axios的全局配置axios.defaults.baseURL = 'http://123.207.32.32:8000'axios.defaults.timeout = 2000axios({
url: '/home/multidata'}).then(res => {
console.log(res)})//以上所有都是使用的全局的axios,但是一般我们都会用一个自己创建的实例const instance = axios.create({
baseURL: 'http://123.207.32.32:8000', timeout: 2000})instance({
url:'/home/multidata'}).then(res => {
console.log(res)})//试用一下封装好的axios模块import {
request} from './network/request.js'request({
url:'/home/multidata'}).then(res => {
console.log('######################') console.log(res)})

我们一般都会自己封装一下,方便后期维护:

//我们一般都会对axios进行一下封装,以后方便代码维护import axios from 'axios'export function request(config){
//Promise是ES6用于处理异步的一个模块 // return new Promise((resolve,reject) => {
// //1.创建axios的实例 // const instance = axios.create({
// baseURL: 'http://123.207.32.32:8000' // }) // //2.发送网络请求 // instance(config) // .then(res => {
// resolve(res) // }) // .catch(err => {
// reject(err) // }) // }) //由于axios实例本身就是继承了Promise,外部调用时可直接使用then或catch,所以上述步骤的Promise可省略 //1.创建axios实例 const instance = axios.create({
baseURL: 'http://123.207.32.32:8000' }) //2.axios的拦截器:可用于拦截请求或响应 //2.1 请求的拦截器,参数是两个函数,拦截成功的函数和拦截失败的函数 instance.interceptors.request.use(a => {
console.log('请求拦截') //注意一定要放行请求,不然服务器收不到 return a },b => {
console.log(b) }) //2.2 响应的拦截器,使用同请求的拦截 instance.interceptors.response.use(a => {
console.log('响应拦截') //注意一定要放行响应 return a },b => {
console.log(b) }) //3.发送网络请求 return instance(config)}

5.其他

  • 因为用cli比较方便,所以没有具体介绍webpack,也可以只用webpack建项目,然后自己安装loader和plugin,但是配置起来比较麻烦;
  • Element ui是很契合vue的一个样式库,

转载地址:http://izee.baihongyu.com/

你可能感兴趣的文章