vue学习笔记

您所在的位置：网站首页 › vue中给数组添加数据的push用法 › vue学习笔记

vue学习笔记

#vue学习笔记| 来源: 网络整理| 查看: 265

webpack 1. npm install init 项目初始化构建项目 3.npm install [email protected] --save-dev npm install [email protected] --save-dev npm i [email protected] -D npm i [email protected] -D npm i [email protected] -D npm i [email protected] [email protected] -D npm i [email protected] [email protected] -D npm i [email protected] -D npm install [email protected] -D //抽离css样式 npm i [email protected] -D npm install [email protected] -D npm install [email protected] [email protected] -D npm i [email protected] [email protected] -D npm install style- resources-loader -D npm install vue-cli-plugin-style-resources-loader -D npm install [email protected] [email protected] --save //vue.config.js 全局样式配置 module.exports={ //配置代理跨域 devServer: { open: true, port: 8001, proxy: { //键值对 '/api': { target: 'http://localhost:3000', //真实请求地址 changeOrigin: true,//是否允许跨域 secure: false, pathRewrite: { '^/api':'' //路由重配置 } } } }, pluginOptions:{ 'style-resources-loader':{ preProcessor:'less', patterns:[require('path').resolve(__dirname,'./src/assets/css/text.less')] } } } //全局样式 yarn npm install -g yarn yarn / yarn install 等同于npm install 批量安装依赖 yarn add xxx 等同于 npm install xxx —save 安装指定包到指定位置 yarn remove xxx 等同于 npm uninstall xxx —save 卸载指定包 yarn add xxx —dev 等同于 npm install xxx —save-dev yarn upgrade 等同于 npm update 升级全部包 yarn global add xxx 等同于 npm install xxx -g 全局安装指定包 add = install nprogress

npm install --save nprogress

//引入进度条 import nprogress from 'nprogress'; //引入样式 import " nprogress/nprogress.css"; //start 进度条开始 //done() 进度条结束 //可以在请求和响应拦截里用 axios

对axios 二次封装在comment 建$http.js

import axios from 'axios'

利用axios 对象的方法create, 去创建一个axios 实例

//$http 就是axios 只不过稍微配置了一下 const $http = axios.create({ //配置对象 //基础路径，发送请求的时候，路径当中会出现api 接口当中：路径都带有 /api baseURL:"/api", //代表请求超时的时间5s timeout:5000, }) //请求拦截器在发送请求之前，请求拦截器可以检测到，可以在请求发送出去之前做一些事情 $http.interceptors.request.use(config => { //config:配置对象，对象里面有个很重要的，header请求头 return config; }, error => { return Promise.reject(error); if(token == ''){ this.$router.push('/login') } else if(token !== ''){ return config } }) //响应拦截 $http.interceptors.response.use(response => { //成功的回调函数，服务器相应数据回来以后，响应拦截器可以检测到，可以做一些事情 return response; }, error => { return Promise.reject(error); }) export default $http 3. http.js 1. ```javascript import axious from 'axios' const $http = axious.create({ BaseURL: '', timeout: 3000 }); $http.all = (arr) => { return axious.all(arr) } $http.interceptors.request.use(config => { return config; }, error => { return Promise.reject(error); }) $http.interceptors.response.use(response => { return response; }, error => { return Promise.reject(error); }) export default $http

//main.js import $http from './common/http' Vue.prototype.$http =$http //请求github mounted(){ this.$http('https://api.github.com/users/hk1255748479') .then( res=>{ console.log(res.data); } } //请求后端 import $http from "../common/http"; export default function(config){ return $http.get('/api/users) }

"axios": "^0.27.2",

请求头后端给前端前端要存起来

import axious from 'axios' const $http = axious.create({ BaseURL ： ''//生产要加 timeout：3000 })； $http.all=(arr)=>{ return axious.all(arr) } //请求拦截器 $http.interceptors.request.use(config=>{ //发送请求之前做 console.log(config); letuserTocken = localStorage.getItem('user_token'); if(!userToken){ $http.get('/api/users/get/token') .then( res=>{ if(res&& res.data && res.data.code == 100){ localStorage.setItem('user_token',res.data.data) } } ) } config.headers['User-Token']='kfkfkkfkf' return confing; },error =>{ return Promise.reject(error); }) //响应拦截 $http.interceptors.response.use(response =>{ return response; },error =>{ return Promise.reject(error); }) export default $http

main.js

import $http from './common/http' Vue.propertype.$http = $http import $http from '../common/http' export default function(){ return $http.get('./api/users'); } express express 后端框架 npm install -g express-generator express demo - e cd demo npm install npm start 3000 users.js 请求方式GEt 请求路径 /user/get/token router.get('/get/token',function(req,res,next){ res.send({ code:100,//给响应拦截用 data:'AAAtttttttt'//伪造 }) }) index.js router.beforeEach((to,from,next)=>{ let userInfo = localStorage.getItem('user'); if(!) }) 全局组件

不写单独的导入建一个js 文件将组件导入在导出

import ScrollTop from './ScrollTop.vue' export default { install:function(Vue){ //全局组件 Vue.component('scroll-top',ScrollTop); Vue.prototype.proName = 'AAA'; //全局方法 Vue.prototype.foo = function(){ console.log('this is foo function') } } } 在mian.js 里面导入滚动至头部 .scroll-top { position: fixed; right: 10px; bottom: 10px; width: 50px; height: 50px; background-color: red; color: white }

style里面引用样式 @import URL

# mockjs 完整 1. mock 文件夹 1. demo.js ```javascript let userList ={ state:200, msg:'ok', data:[{ 'rows|10':[{ 'id|+1':1, uname:'@cname', 'uage|20-40':20, 'role|1':['前端','后端','测试'] }] }] } export default { 'get|/user/list':userList }

index.js

main.js

import axios from 'axios'; require('./mock') Vue.prototype.$http=axios;

vue 文件

mounted(){ this.$http('/user/list') .then( res=>{ console.log(res.data); } ) }

vue-element-admin

css background-postionsvertical-align伪元素伪类外边距合并，加浮动脱标logo 加h1 acsss 三大特性层叠性继承性优先性元素选择器(标签选择器)继承权重 0rem vue-router 命名路由 1、作用：可以简化路由跳转

1.简化跳转

##简化后直接通过名字跳转跳转 ## 简化写法配合传递参数

【本文地址】

vue学习笔记

vue学习笔记

今日新闻

推荐新闻