四时宝库

程序员的知识宝库

2024年08月04日

Vue全家桶-使用总结（vue全家桶-使用总结怎么写）

在网上看到这么一句话：

武林至尊，宝刀React，号令天下，莫敢不从，Vue不出，谁与争锋

本人选择的是vue，之前老师说过，精通一个就行啦

Vue全家桶指的是：Vue+Vue-router+Vuex+axios

Vue脚手架工具Vue CLI

我一般是npm安装的：

npm install -g @vue/cli  //安装
npm update -g @vue/cli  //升级

vue create 命令有一些可选项，你可以通过运行以下命令进行探索：

vue create --help
用法：create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目


选项：

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

你也可以通过 vue ui 命令以图形化的界面创建和管理项目：

vue ui


文件结构：

build/          // 项目构建(webpack)相关代码 
    build.js       // 生产环境构建代码
    check-versions.js // 检查node&npm等版本
    utils.js          // 构建配置公用工具
    vue-loader.conf.js // vue加载器
    webpack.base.conf.js // webpack基础环境配置
    webpack.dev.conf.js //  webpack开发环境配置
    webpack.prod.conf.js // webpack生产环境配置
config/         // 项目开发环境配置相关代码   
    dev.env.js  // 开发环境变量（看词明意）
    index.js //项目一些配置变量
    prod.env.js // 生产环境变量
    test.env.js                  // 测试环境变量
    
dist/      //npm run build打包后生成的文件夹
node_modules/
    ...     // 项目依赖的模块 
src/            // 源码目录       
    assets/         // 资源目录 
        logo.png
    components/         // vue公共组件
        Head.vue
        Footer.vue
    pages (或views)/    //视图
        login/
            Index.vue
        list/
            Foods.vue
            
    router/             // 前端路由
        index.js// 路由配置文件
    store/                          // vuex的状态管理
    App.vue// 页面入口文件（根组件）
    main.js// 程序入口文件（入口js文件）    
static // 静态文件，比如一些图片，json数据等
    .gitkeep    //这个里面的gitkeep是这个目录为空，也可以把这个目录提交的git仓库里面，因为通常一个空目录是不能提交git仓库里面的
    
.babelrc// ES6语法编译配置
.editorconfig// 定义代码格式
.gitignore// git上传需要忽略的文件格式
index.html// 入口页面
package.json// 项目基本信息
README.md// 项目说明

完成之后，我们就可以安装Vue-router，Vuex，axios啦

Vue-router路由管理

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',//定义路由路径
      name: 'HelloWorld',//定义路由名
      component: () => import('@/components/HelloWorld')//直接写文件路径
    },
    {
      path: '/home',
      name: 'Home',
      component: () => import('@/views/home/home')
    },
    {
      path: '/params/:newsId/:userName',
      name: 'Index',
      component: () => import('@/views/index/index')
    }
  ]
})

需要在main.js文件引入，并使用

import router from './router' 

new Vue({
  el: '#app',
  router,//引用router页面跳转
  components: { App },
  template: '<App/>'
})

动态路由

{
      path: '/params/:newsId/:userName',
      name: 'Index',
      component: () => import('@/views/index/index')
    }
this.$router.push('/home/888/333')//跳转
//接受
this.$route.params.newsId
this.$route.params.userName

params传参，url不显示参数

this.$router.push({ name: 'user', params: { userId: '123' }})//传参
this.$router.params.userId //接受

query传参，url显示参数

this.$router.push({ name: 'user', query: { userId: '123' }})//传参
this.$router.query.userId //接受

路由守卫，你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
  // ...
})

每个守卫方法接收三个参数：

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。next(): 进行管道中的下一个钩子。


Vue-router就讲到这吧，详细的可以在相关网站查询


Vuex状态管理

npm install vuex --save//安装

安装 Vuex 之后，让我们来创建一个 store。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0 ,
    { id: 1, text: '...', done: true },
     { id: 2, text: '...', done: false }
  },
  getters: {//有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
  mutations: {//更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：
    increment (state) {
      state.count++
    }
  },
    actions: {//Action 提交的是 mutation，而不是直接变更状态。
    increment (context) {
      context.commit('increment')
    }
  }

})

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

axios接口请求

 npm install axios   //下载

需要封装一下，这是我自己封装的request.js

import axios from "axios";//axios请求
import store from '@/store'	//引入store管理
import { Message,MessageBox } from 'element-ui'	//引入element-ui的库文件
import { baseUrl } from '@/config/env';//公共域名
import qs from 'qs';//引用qs

export function getToken() {//获得token
  return "15518080162"
}
const service = axios.create({
    baseURL: baseUrl,  // api的base_url
    timeout: 5000, // 请求超时时间
    headers:{'Content-Type':'application/x-www-form-urlencoded'} //传参类型
});
service.interceptors.request.use(config => {
    // 在请求发送之前做些什么
    if (getToken()) {
      config.headers['token'] = getToken()// 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
    }
    if(config.method == "post"){        //qs使用
        config.data = qs.stringify(config.data);
        // console.log(config)
    }
    return config
  }, error => {
    // 请求错误怎么办
    console.log(error) // for debug
    Promise.reject(error)
  })
  // respone拦截器
  service.interceptors.response.use(
   response => {
    const res = response.data
   /**
    * 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
    * 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
    */
    if (res.code == 0){//0正常
      return res
    } else if (res.code == 1002){//1002警告
      Message({
        message:res.msg,
        type:"warning"
      })
      return res
    } else {
         if (res.code === 1001) {//1001登录过期
        // to re-login
        MessageBox.confirm('登录失效，请重新登录', '确定前往登录吗？', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
        //登录失效执行什么
        store.commit("delToken")//删除token
        })
      }else{//其他报错
        Message({
          message:res.msg,
          type: 'error'
        });
      }
      return Promise.reject(new Error(res.message || 'Error'))
    }
  },
  error => {//请求错误
    console.log('err' + error) // for debug
    return Promise.reject(error)
  })
 
export default service;

config/env.js


let baseUrl = ''
const env = process.env
if (env.NODE_ENV === 'development') { 
  baseUrl = `http://fafatu.vip`// 开发环境地址
} else if (env.NODE_ENV === 'production') {
  baseUrl = `http://fafatu.vip`// 生产环境地址
} else if (env.NODE_ENV === 'test') {
  baseUrl = `` // 测试环境地址
}
export {
  baseUrl,
  env
}

api/user.js

import request from '@/utils/request'

export function login(data) {// 登录
  return request({
    url: '/clientshangjialogin/login',
    method: 'post',
    data
  })
}

页面使用

import { login } from "@/api/user";
//请求
login({phone:"15518080162",pass:"123456",type:2}).then(response => {
            console.log(response);
            if(response.code==0){
              this.$message({
                message:response.msg,
                type: 'success'
              });
            }
      }).catch(function(error) {
         this.$message({
                  message:error,
                  type: "error"
         });
      });

就到这结束啦，只是总结啦一些常用的功能

标签：vue2.js 

作者:sishi88 , 分类:技术教程 , 浏览:5 , 评论:0

发表评论:

控制面板
您好，欢迎到访网站！
  查看权限
网站分类
最新留言
    友情链接