当前位置: 首页 > 工具软件 > jQuery.msgbox > 使用案例 >

vue-cli 项目中引入jquery、sass、md5、ElementUI、vue-cookie

楮法
2023-12-01

1,新增 sass 模块

  • 安装:npm install sass-loader node-sass --save-dev
  • .vue文件的style标签改写为:
<style scoped lang="scss"></style>

2,新增 jQuery 模块

  • 安装:cnpm install jquery --save
  • webpack有providePlugin插件,可以自动引入模块。所以需要在项目工程的build文件夹下webpack.base.config.js中添加以下配置
    (1)开头加入 const webpack = require('webpack')
    (2)在最后一个大括号内 加入代码
plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    'window.jQuery': 'jquery'
  })
]
  • eslint认为没有声明,需要在eslintrc.js中加入globals配置
globals: {
  '$': false,
  'jquery': false
}

3,新增 md5 密码加密模块

  • 安装:npm install --save js-md5
  • 在 main.js 输入以下代码:
import md5 from 'js-md5'
Vue.prototype.$md5 = md5
  • 在其他 .vue 文件中使用md5:
let password = this.$md5('111')

4,新增 ElementUI 框架

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 上部分为引入ElementUI的css样式
// 若出现问题,可以在index.html文件中引入静态element-ui的静态css文件
Vue.use(ElementUI)

// 注:修改ElementUI主题色网站:https://elementui.github.io/theme-preview/#/zh-CN
  • 在外部 .js 文件中使用 ElementUI 的弹窗功能
import ElementUI from 'element-ui'
let $msgbox = ElementUI.MessageBox
let $alert = ElementUI.MessageBox.alert
let $confirm = ElementUI.MessageBox.confirm
let $prompt = ElementUI.MessageBox.prompt
let $message = ElementUI.Message
// 调用,例:$message.error('1111')

5,新增 vue-cookie 框架

  • 安装:npm install vue-cookie --save
  • main.js文件配置如下:
import VueCookie from 'vue-cookie'
Vue.use(VueCookie)
  • 使用vue-cookie:
this.$cookie.set('userName', '用户名') // 设置 cookie
this.$cookie.get('userName') // 读取 cookie
  • 外部 .js 文件 使用 cookie:
import $cookie from 'vue-cookie'
$cookie.set('userName', 'aaa111') // 设置 cookie
console.log($cookie.get('userName')) // 读取 cookie

6,axios
中文文档:https://www.kancloud.cn/yunye/axios/234845

6.1 安装:npm install axios --save
6.2 新建 fetch.js文件,代码如下

import axios from 'axios'
import router from '@/router'
// elementui
import ElementUI from 'element-ui'
let $msgbox = ElementUI.MessageBox
let $alert = ElementUI.MessageBox.alert
let $confirm = ElementUI.MessageBox.confirm
let $prompt = ElementUI.MessageBox.prompt
let $message = ElementUI.Message

// 创建axios实例
const service = axios.create({
  baseURL: '/api', // 请求地址
  timeout: 5000
})

// request 拦截器
service.interceptors.request.use(config => {
  // Do something before request is sent
  return config
}, error => {
  console.log(error)
  Promise.reject(error)
})

// response 拦截器
service.interceptors.response.use(
  // response => response
  response => {
    const code = response.data.code
    console.log('返回数据' + JSON.stringify(response.data))

    // 验证错误码
    if (code === 0) {
      return response.data
    }
  },
  error => {
    console.log('err' + error) // for debug
    $message({
      message: '错误:' + error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

export default service

6.3 编写接口

import fetch from '@/util/fetch'
export function getData() {
	let data = {
		no: '18600000000',
		value: '222'
	}
	return fetch({
		method: 'post',
		url: '/login',
		data
	})
}

6.4 在组件中调用接口

import { getData } from '接口地址'
getData().then(res => {
	console.log(res)
})

6,npm install --save 与 npm install --save-dev区别
以npm安装msbuild为例
1,npm install msbuild:
(1)会把msbuild安装到node_modules目录中
(2)不会修改 pack.json
(3)之后运行 npm install命令时,不会自动安装msbuild

2,npm install msbuild --save:
(1)会把msbuild包安装到node_modules目录中
(2)会在package.json的dependencies属性下添加msbuild
(3)之后运行npm install 命令时,会自动安装msbuild到node_modules目录中
(4)之后运行npm install --production 或者注明NODE_ENV变量值为production时,会自动安装msbuild到node_modules目录中

3,npm install msbuild --save-dev:
(1)会把msbuild包安装到node_modules目录中
(2)会在package.json的devDependencies属性下添加msbuild
(3)之后运行npm install命令时,会自动安装msbuild到node_modules目录中
(4)之后运行npm install --production或者注明NODE_ENV变量值为production时,不会自动安装msbuild到node_modules目录中

4,使用原则:
运行时需要用到的包使用–save,否则使用–save-dev。

 类似资料: