个人网站开发日志 -- 前端篇 - 项目配置

最新推荐文章于 2022-12-04 23:03:04 发布

MellesJ

最新推荐文章于 2022-12-04 23:03:04 发布

阅读量665

点赞数

分类专栏：前端开发文章标签： vue

本文链接：https://blog.csdn.net/weixin_43336415/article/details/100543000

版权

本文记录了使用vue-cli搭建的项目中配置vue-router、vuex和mock的过程。首先，详细介绍了如何安装并配置vue-router，包括创建router文件夹和在main.js中引入。接着，讲解了vuex的引入与store文件夹结构，同样在main.js中进行挂载。最后，阐述了mock的使用，创建mock文件夹和index.js，根据NODE_ENV的值来决定是否启用mock，以便前端独立开发，并将其命令添加到package.json的scripts中以简化操作。

摘要由CSDN通过智能技术生成

项目是由 vue-cli 手脚架搭建的，但似乎是由于使用了基础预设的内容很多东西都没有，如 vue-router、vuex，之后便花了很多时间配置好了项目基本需要的一些 npm 包。

vue-router

安装

npm install vue-router --save

引入项目，在 src 文件夹下创建 router 文件夹作为路由相关配置的文件夹，创建 index.js 与 routers.js 文件

// index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routers' // routers 文件撰写具体的路由信息
import iView from 'iview'

Vue.use(VueRouter) // 写在 main.js 里面也可以
const router = new VueRouter({
   
  routes: routes,
  mode: 'history' // 默认 vue-router 的 url 是一串 hash，启用 history 模式来使得 url 不是 hash，就是正常的 yoursite.com/user/id 这种
})

// 路由前置守卫
router.beforeEach((to, from, next) => {
   
  iView.LoadingBar.start()