时间戳

首页 > 技术文章 > 前端学习九（vue-cli、vue自定义属性、js封装和引用、路由组件等在实际项目中的使用）

前端学习九（vue-cli、vue自定义属性、js封装和引用、路由组件等在实际项目中的使用）

whitewall 2021-11-27 17:27 原文

一、定义

vue-cli是一个基于vue.js进行快速开发的完整系统
1、通过@vue/cli 实现的交互式的项目脚手架
2、丰富的官方插件集合
3、一套完全图形化的创建和管理vue.js项目的用户界面

二、环境准备

前提，有安装过nodejs
1、安装vue 　　  https://cn.vuejs.org/v2/guide/installation.html

npm install vue

2、安装vue-cli     https://cli.vuejs.org/zh/guide/installation.html

npm install -g @vue/cli

3、创建项目 　　https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
可以通过 命令以图形化界面创建和管理项目

vue ui

视频课程配置是：手动--勾选Router，不勾选Linter/Formatter，其他默认--默认创建--不保存预设
4、可以在界面启动、编译、安装插件（element等）和依赖（axios等）

三、生成的项目目录说明

1、node_modules
存放的项目依赖
2、public 公共文件
项目所有内容都会渲染到index.html
3、src
　　(1)、assets　　　　　　 静态文件，图片视频等
　　(2)、components 　　　 组件
　　(3)、router 　　　　　　 路由配置
　　(4)、views 　　　　　　 视图组件（这个是之前学习的定义路由组件）
　　(5)、plugins 　　　　　  存放安装的插件位置（安装了插件采用这个文件夹生成）
　　(6)、App.vue文件 　　   暂时不知道有啥用，虽然在main.js函数中被使用
　　(7)、main.js文件 　　     这里应该是运行入口，最终渲染到public目录下的index.html
4、package.json 　　 项目依赖版本信息（项目打包命令等）
5、README.md 　　 默认有安装依赖包、启动项目、编译项目等信息

四、模块导入导出

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口，在一个文件或模块中，export可以有多个，export default仅有一个

1、export
　　（1）导出

export var lastName = 'Jackson';
export function multiply(x, y) {
    return x * y;
};
var lastName = 'Jackson';
function multiply(x, y) {
    return x * y;
};

export {lastName, multiply};

　　（2）导入

// 可以使用as变更变量名
import { lastName as surname,multiply } from './profile.js';

2、export default
　　（1）导出

var lastName = 'Jackson';
export default lastName;
function multiply(x, y) {
    return x * y;
};
export default multiply;

　　（2）导入

// import可以用任意名称指向export-default.js输出的方法
import customName from './export-default';

 五、Vue自定义属性

上面有导入导出，实际上是在js文件中使用的，如果我想在vue文件中使用怎么办？

1、先在引用文件中将引用的对象赋值给Vue自定义属性

// 将引用的对象赋值给Vue自定义属性req
Vue.prototype.$req = req

2、然后vue文件中使用，这里的loginApi是req中的一个函数

const r = await this.$req.loginApi(this.form)

 其实也可以vue文件中的script标签中引用req，但是多个vue文件要使用时，每个文件都要先import。

所以还不如直接用上面的方法，将目标存入Vue自定义属性

六、封装的请求文件req.js和main.js

1、封装的请求文件req.js

import axios from "axios";

// 创建请求对象
const http = axios.create({
    baseURL: 'http://api.keyou.site:8000',
    timeout: 1000,
    validateStatus: function (status) {
        return true
    }
})

// 请求拦截器
http.interceptors.request.use(
    function (config) {
        const token = window.sessionStorage.getItem('token')
        if (token) {
            config.headers.Authorization = 'JWT ' + token
        }
        return config
    },
    function (error) {
        return Promise.reject(error)
    }
)

const req = {
    // 登录
    loginApi(data) {
        return http.post('/user/login/', data)
    },

    // 注册
    registerApi(data) {
        return http.post('/user/register/', data)
    },

    // 获取项目
    getProjects(index) {
        return http.get('/projects/', { params: { id: index } })
    }
}

// export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
// 1、export与export default均可用于导出常量、函数、文件、模块等
// 2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用
// 3、在一个文件或模块中，export、import可以有多个(用花括号)，export default仅有一个(只接一个对象，不用花括号)
// 4、通过export方式导出，在导入时要加{ }，export default则不需要

export default req
// export {req}
View Code

2、main.js （将req封装的内容注入到vue）

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'
import req from './api/req'

// 将引用的对象赋值给Vue自定义属性req
Vue.prototype.$req = req

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

// $mount方法是用来挂载我们的扩展的
View Code

七、路由文件index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
import Projects from '@/views/Projects'
import Interface from '@/views/Interface'
import Cases from '@/views/Cases'
import EditCase from '@/views/EditCase'

Vue.use(VueRouter)

const routes = [
  {
    path: "/",
    redirect: "/login"
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    redirect:"/project",
    children: [
      {
        path: '/project',
        name: 'project',
        component: Projects
      },
      {
        path: '/interface',
        name: 'interface',
        component: Interface
      },
      {
        path: '/cases',
        name: 'cases',
        component: Cases
      },
      {
        path: '/cases/edit',
        name: 'editcase',
        component: EditCase
      },
    ]
  },
  {
    path: '/login',
    name: 'Login',
    component: Login
  }
]

const router = new VueRouter({
  routes
})

// 导航守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login' || window.sessionStorage.getItem('token')) {
    // 这里还可以鉴别token是否有效
    next()
  } else {
    next('/login')
  }
})

export default router
View Code

 

推荐阅读