vue模板搭建

最新推荐文章于 2024-06-11 01:02:06 发布
最新推荐文章于 2024-06-11 01:02:06 发布
阅读量316 收藏
点赞数
分类专栏： vue成长之路
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/c_liufeng/article/details/89228108
版权

1.项目目录

2.项目部分组件

—-router/router.js

 **
 * 路由引入
 * const * => () => import('src/view/...')
 * */

const LoginPage = () => import('@/view/LoginPage')

/**
 * 路由注册
 * '//注释信息'
 * {
 *     path: '',
 *     name: '',
 *     componrnt: '',
 *     meta: {
 *         title: ''
 *     }
 * }
 * */
const routes = [
  {
    path: '/',
    redirect: 'LoginPage'
  },
  // 申请列表
  {
    path: '/LoginPage',
    name: 'LoginPage',
    component: LoginPage,
    meta: {
      title: '登录模块'
    }
  }
]
/**
 * 导出
 * */
export default routes 
 * 路由引入
 * const * => () => import('src/view/...')
 * */

const LoginPage = () => import('@/view/LoginPage')

/**
 * 路由注册
 * '//注释信息'
 * {
 *     path: '',
 *     name: '',
 *     componrnt: '',
 *     meta: {
 *         title: ''
 *     }
 * }
 * */
const routes = [
  {
    path: '/',
    redirect: 'LoginPage'
  },
  // 申请列表
  {
    path: '/LoginPage',
    name: 'LoginPage',
    component: LoginPage,
    meta: {
      title: '登录模块'
    }
  }
]
/**
 * 导出
 * */
export default routes

—-router/index.js

 import Vue from 'vue'
import Router from 'vue-router'
import routes from './router'
/**
 * 注册
 * */
Vue.use(Router)                                                                                                                         /**
 * 实例化
 * */
const router = new Router({
  routes
})                                                                                                                                                  /**
 * 路由导航
 * */
router.beforeEach((to, from, next) => {
  next()
})                                                                                                                                               /**
 * 导出
 * */
export default router 
import Router from 'vue-router'
import routes from './router'
/**
 * 注册
 * */
Vue.use(Router)                                                                                                                         /**
 * 实例化
 * */
const router = new Router({
  routes
})                                                                                                                                                  /**
 * 路由导航
 * */
router.beforeEach((to, from, next) => {
  next()
})                                                                                                                                               /**
 * 导出
 * */
export default router

—-main.js

 import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
/**
 * 注册使用axios/qs
 * */
import axios from 'axios'
import qs from 'qs'
Vue.prototype.$axios = axios
Vue.prototype.$qs = qs                                                           Vue.config.productionTip = false                                                                                  /* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
}) 
import App from './App'
import router from './router'
import store from './store'
/**
 * 注册使用axios/qs
 * */
import axios from 'axios'
import qs from 'qs'
Vue.prototype.$axios = axios
Vue.prototype.$qs = qs                                                           Vue.config.productionTip = false                                                                                  /* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

—-store/actions.js(store下另几个格式一样)

 /**
 * 引入
 * */                                                                                                                                            /**
 * 创建actions
 * */
const actions = {}                                                                                                                  /**
 * 导出
 * */
export default actions 
 * 引入
 * */                                                                                                                                            /**
 * 创建actions
 * */
const actions = {}                                                                                                                  /**
 * 导出
 * */
export default actions

—-store/index.js

 import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'                                                                             Vue.use(Vuex)                                                                                                            export default new Vuex.Store({
  state,
  mutations,
  actions
}) 
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'                                                                             Vue.use(Vuex)                                                                                                            export default new Vuex.Store({
  state,
  mutations,
  actions
})

—-api/http.js(封装axios)

import axios from 'axios'
import qs from 'qs'
// 格式化
axios.defaults.transformRequest = [data => qs.stringify(data)]                                       // process.env.NODE_ENV获取当前开发环境
switch (process.env.NODE_ENV) {
  // 生产环境
  case 'development':
    axios.defaults.baseURL = ''
    break
  // 打包（发布）环境
  case 'production':
    axios.defaults.baseURL = ''
    break
}                                                                                                                                             // request拦截器
axios.interceptors.request.use(config => {
  return config
}, error => {
  return error
})                                                                                                                                              // response 拦截器
axios.interceptors.response.use(response => {
  return response
}, error => {
  return error
})                                                                                                                                         // 判断状态码
function checkStatus (response) {
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response.data || response
  }
  if (response.status === 404) {
    console.log('网络异常')
  }
}                                                                                                                                             function checkCode (res) {
  if (res.status === 500) {
    console.log(`${res.status}${res.msg}`)
  }
  return res
}        
                                                                                                                                       export default {
  // get请求方法封装
  get (url, params) {
    return axios.get(url, {params: params})
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },   
                                                                                                                                                   // post请求方法封装
  post (url, data) {
    return axios.post(url, data)
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },      
                                                                                                                                               // delete请求方法封装
  delete (url, params) {
    return axios.delete(url, {params: params})
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },    
                                                                                                                                             // put请求方法封装
  put (url, data) {
    return axios.put(url, data)
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },   
                                                                                                                                                   // patch方法封装
  patch (url, data) {
    return axios.patch(url, data)
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  }
} 
import qs from 'qs'
// 格式化
axios.defaults.transformRequest = [data => qs.stringify(data)]                                       // process.env.NODE_ENV获取当前开发环境
switch (process.env.NODE_ENV) {
  // 生产环境
  case 'development':
    axios.defaults.baseURL = ''
    break
  // 打包（发布）环境
  case 'production':
    axios.defaults.baseURL = ''
    break
}                                                                                                                                             // request拦截器
axios.interceptors.request.use(config => {
  return config
}, error => {
  return error
})                                                                                                                                              // response 拦截器
axios.interceptors.response.use(response => {
  return response
}, error => {
  return error
})                                                                                                                                         // 判断状态码
function checkStatus (response) {
  if (response && (response.status === 200 || response.status === 304 || response.status === 400)) {
    return response.data || response
  }
  if (response.status === 404) {
    console.log('网络异常')
  }
}                                                                                                                                             function checkCode (res) {
  if (res.status === 500) {
    console.log(`${res.status}${res.msg}`)
  }
  return res
}        
                                                                                                                                       export default {
  // get请求方法封装
  get (url, params) {
    return axios.get(url, {params: params})
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },   
                                                                                                                                                   // post请求方法封装
  post (url, data) {
    return axios.post(url, data)
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },      
                                                                                                                                               // delete请求方法封装
  delete (url, params) {
    return axios.delete(url, {params: params})
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },    
                                                                                                                                             // put请求方法封装
  put (url, data) {
    return axios.put(url, data)
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  },   
                                                                                                                                                   // patch方法封装
  patch (url, data) {
    return axios.patch(url, data)
      .then((response) => {
        return checkStatus(response)
      }).catch((error) => {
        return checkCode(JSON.parse(JSON.stringify(error)).response)
      })
  }
}
夜丶陌颜
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue模板网站
weixin_46806380的博客
01-26 7665
vue模板网站
vue的模板代码
qq_41966009的博客
03-28 430
1.含for循环+轮播图+axios绑定。
vue搭建的非常好用的网页模板
05-27
vue网页模板
【VUE】vue后台常用模板
热门推荐
LuviaWu的博客
04-11 9万+
推荐几个基于vue2.0开发的后台管理好用的模板，让需要的人快速获取合适的模板
Vue主界面精美模板分享_vue网站模板
最新发布
2401_85123458的博客
06-11 701
这里是网址图像联网会显示，圆角头像（可以自己更换）这里点击按钮事件自己添加。
推荐6个实用的Vue模板
m0_45407251的博客
07-27 1万+
推荐6个实用的Vue模板
能不能推荐个 vue 后台管理系统模板？
SiKi学院的博客
07-10 5228
​ 下面是我整理的vue2和vue3的一些后台管理系统模板，希望对你有帮助~ ​
Vue 模板
qq030128的博客
04-01 607
Vue模板语法
welink项目Vue模板
12-16
总之，“Welink项目Vue模板”是一个为Welink平台定制的高效开发工具，它结合了Vue.js的优势，提供了完善的项目结构和功能，让开发者能够专注于业务逻辑，而非基础架构的搭建。通过深入理解和充分利用这个模板，你...
vue环境搭建
01-17
Vue CLI 是基于Webpack的脚手架工具，它简化了Vue项目的初始化和配置过程，提供了快速搭建项目模板的能力。 要搭建Vue环境，首先需要确保计算机上已经安装了Node.js，因为Vue CLI是基于Node.js的。接着，为了加速...
vue搭建后台管理系统模板
02-12
"vue搭建后台管理系统模板"是基于Vue.js的后台管理系统的基础框架，旨在帮助开发者快速启动项目，避免从零开始配置复杂的构建工具，如Webpack。 Webpack 是一个强大的模块打包器，它将应用程序视为由多个模块组成的...
vue环境搭建简单教程
08-28
本文介绍了 Vue 环境搭建的简单教程，包括 Node.js 的安装、npm 的使用、cnpm 的安装、Vue-cli 的安装、项目模板的创建、依赖项的安装和项目的启动等内容。希望本文能够帮助初学者快速搭建 Vue 开发环境。
什么是Vue模板？如何使用Vue模板？
wzxue1984的博客
07-25 1287
Vue模板语法简单易懂，允许您在模板中使用Vue指令和表达式来实现动态数据渲染和交互。使用Vue模板，您可以将数据和行为与界面进行关联，实现灵活且动态的用户界面。计算属性和方法：除了简单的数据绑定外，可以在模板中使用计算属性和方法。计算属性是基于Vue实例的响应式数据进行计算得出的属性，方法则是在Vue实例中定义的函数。插值用于将数据动态地展示在模板中，双向数据绑定用于将表单元素的值与Vue实例的数据进行双向绑定。使用指令：Vue提供了一系列指令，用于在模板中实现各种功能。定义模板：在Vue实例中，使用。
Vue基础之模板语法介绍
m0_73647713的博客
09-18 958
上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。
前端_Vue_9.模板引用、组件基础
三千幻想乡
12-28 1204
虽然Vue的声明性渲染模型为你抽象了大部分对DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素。要实现这一点，我们可以使用特殊的 ref attribute： ref 是一个特殊的attribute，和 v-for 章节中提到的 key 类似。它允许我们在一个特定的DOM元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个input元素上，或在一个元素上初始化一个第三方库。挂载结束后引用都会暴露在 this.$refs 之上： 注意，你只可以在组件
2024，排名前 15 的 Vue 后台管理模板，太厉害了
m0_59117112的博客
03-20 2686
主要特点：基于Bootstrap 4160 多个自定义元素响应式设计高度可定制的侧边栏菜单。
vue项目模板
qq_44041944的博客
11-08 7758
vue商城项目一、新建项目二、实现登入功能2.1Element-ui进行登入页面的布局 一、新建项目 vue ui新建一个项目，然后 添加插件：vue-cli-plugin-element， 安装依赖：axios，router，vuex 二、实现登入功能 1、http是无状态的， 2、我们会使用cookie来记录在客户端的状态， 3、会使用session来记录在服务端的状态， 4、并使用token来维持状态。token原理分析如下图 2.1Element-ui进行登入页面的布局 登入页面的布局结构
Vue主界面精美模板分享
罗铠威的博客
05-31 3736
本篇博客主要提供vue组件之主页面组件源码，需要的朋友请自取 这里是网址图像联网会显示，圆角头像（可以自己更换） 这里点击按钮事件自己添加
vue漂亮的企业网站模板
weixin_44253369的博客
05-14 4万+
vue漂亮的企业网站模板 公司最近更新一版网站，换成vue做的，静态模板，没有后台，pc端已经自适用手机端，宣传够用了，废话少说，直接上图，拿去.qq:568149471 部署步骤 前期安装nodejs，vue 执行 npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install cnpm run dev 如果部署服务器出现404错误，修改 处理vue部署404错误 server { listen 80; server_
vue框架搭建个人博客网站模板
09-17
Vue框架是一种流行的前端框架，它可以用来创建交互式的用户界面。搭建个人博客网站模板，可以...通过以上步骤，就可以使用Vue框架搭建一个个人博客网站模板。可以根据自己的需求进行扩展和定制，实现更多的功能和效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

夜丶陌颜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值