- 博客(15)
- 收藏
- 关注
RSS订阅原创 Chrome浏览器中安装vue插件(vue-devtools)
1.下载GitHub https://github.com/vuejs/vue-devtools2.解压把压缩文件解压到对应目录，进入该目录3.命令npm或yarn都可以npm//安装依赖npm install//打包npm run buildyarn//安装依赖yarn install//打包yarn run build注：有时npm会失败会报错，可以尝试yarn。4.修改文件打开…\vue-devtools-dev\packages\shell-chrome找
2020-06-23 18:02:33
664
原创 Vue中 localStorage的使用方法
1.保存localStorage.setItem('accessToken', 'Bearer ' + response.data.result.accessToken)2.获取localStorage.getItem('accessToken')3.更改localStorage.setItem('accessToken', '更改后' + response.data.result.accessToken)4.删除 localStorage.removeItem('accessToken
2020-06-23 14:56:23
3090
原创 Vue使用router-link的传参和取值
例：A组件跳转到B组件A组件<router-link :to="{ path: '/project' , query: { info: 123 } } "> 跳转</router-link>B组件//打印接收到的数据console.log(this.$route.query.info)
2020-06-22 18:01:16
723
原创 Vue使用bus总线进行组件通信
新建bus.js文件在utils文件夹下新建bus.js文件import Vue from 'vue'const bus = new Vue()export default bus 组件间传值先在两个需要通信的组件中引用bus.jsimport bus from '@/utils/bus'发送消息//第一个参数为标志变量，第二个参数为通信的值bus.$emit('message', 'hello');接收消息//第一个参数为标志变量，第二个参数中的e为通信的值bus.$o
2020-06-22 17:22:21
256
原创 Vue引用图片（require引用和设置background）
require图片let menuPath = "assets/img/menu.png";//重新拼接 require(`@/${图片变量路径}`)<img class="menu" :src="require(`@/${menuPath}`)"/>设置backgroundImage<img :src="require('assets/img/button.png')"><div :style="{backgroundImage:'url('+r
2020-06-22 16:46:04
3398
原创 解决Vue打包之后不显示、访问资源失败的问题
修改vue.config.js文件vueConfig.publicPath = './'注意：改成’./'之后，有些时候开发环境会访问资源失败。所以最好在代码中加个判断，在开发环境时把publicPath设置成 ’ / '，生产环境时设置成 ’ ./ '。...
2020-06-22 16:30:23
1358
原创 Vue中public和assets的异同
相同点两个目录都可以用来放置静态资源。不同点public目录用来放不会变动的文件。public下的文件不经过webpack处理，打包后会被直接复制到dist文件夹。（需要使用绝对路径来引用这些文件）assets目录用来放可能会变动的文件。assets下的文件会被webpack解析为模块依赖。（需要使用相对路径来引用对应文件）建议将一些外部第三方的文件放在public中，自己的文件放在assets中。图片引用时，放在public和assets都可以，需要注意的是：在动态绑定中，assets路径
2020-06-22 16:20:04
1605
原创 Koa声明、调用一个自定义的中间件
1.新建文件getUser.js，定义一个方法function getUser() { console.log('Username: Tom')}//导出中间件module.exports = function() { return async function(ctx, next) { getUser(); await next(); }}2.在入口文件（app.js）引入并使用const Koa = require('koa')c
2020-06-17 13:50:09
248
原创 Vue路由history模式刷新404的解决方法
前言在history模式下，开发环境中各页面的访问都正常。但是在生产环境只能访问首页（刷新404），其他页面的访问和刷新全都是404。而在hash模式下开发环境和生产环境路由跳转均无问题。后端配置：1.Nginxlocation / { try_files $uri $uri/ /index.html; #检测文件存在性,重定向到首页目录,防止404。}2.Koa使用中间件//解决vue-router的history模式下，页面刷新后not found的问题const histo
2020-06-17 11:36:48
1116
原创 Nginx部署Vue项目
1.Vue打包npm run build生成一个dist文件夹。2.复制文件将dist目录整个复制到Nginx根目录的html文件夹下3.修改Nginx配置编辑conf目录下的nginx.conf文件listen 80;#默认端口server_name localhost; location / { root html/dist; index index.html index.htm; try_files $uri $uri/ @router
2020-06-16 15:57:53
1024
原创 Nginx的安装与使用
1.下载官网：http://nginx.org/en/download.html建议选择稳定版Stable version，当前为nginx/Windows-1.18.0下载后解压到指定的文件夹即可。2.启动(1)双击解压文件夹中的nginx.exe。(2)打开cmd控制台，切换到对应目录。输入命令：nginx.exe(3)打开cmd控制台，切换到对应目录。输入命令：start nginx注：建议使用第三种方法，第二种会使你的cmd窗口一直处于执行中，不能进行其他命令操作。3.
2020-06-16 15:40:40
84
原创 Vue打包完部署到服务器运行(express、koa)
当Vue项目完成后，就需要打包文件，然后部署到服务器上。Vue打包完成后会在项目的根目录下生成一个dist文件夹，里面存放了所需的文件，将其部署到服务器上并进行相应配置，即可通过浏览器访问。express框架1.安装express和express-generatornpm install express --savenpm install express-generator -g (此处为全局安装)2.创建express项目express expressServer // expressS
2020-06-07 00:41:27
1071
原创 Vue跨域问题的解决方法（前后端&express、koa）
在刚接触Vue时，经常会遇到跨域的问题，本文提供两种解决方法。问题背景跨域是什么：跨域资源共享(CORS) 是一种机制，它使用额外的HTTP头来告诉浏览器 让运行在一个 origin (domain) 上的Web应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器不同的域、协议或端口请求一个资源时，资源会发起一个跨域 HTTP 请求。出于安全原因，浏览器限制从脚本内发起的跨源HTTP请求。 例如，XMLHttpRequest和Fetch API遵循同源策略。 这意味着使
2020-06-06 16:21:45
474
原创 Vue学习笔记：Vue安装与项目新建
1.安装node.js官方网址：https://nodejs.org/en/完成后，打开命令行，输入node -v和npm -v。查看当前node.js和npm的版本号。2.设置node.js的全局安装路径和缓存路径先在node安装目录下创建node_global和node_cache文件夹设置环境变量：用户变量设置：用户变量的PATH设为：D：\nodejs\node_global系统变量设置：添加变量NODE_PATH,设为：D：\nodejs\node_modules打开命令行，输入命
2020-06-06 15:15:46
82
原创 查看vue版本号
常见误区：vue -V或vue --version查询的是vue-cli的版本,也就是vue脚手架的版本。正确方式1：在cmd控制台内，输入npm list vue就可以查看vue版本号。正确方式2：进入项目,先找到package.json文件，再找到"dependencies"就可以看到安装的vue版本。例：“dependencies”: {“core-js”: “^2.6.5”...
2020-05-07 10:08:40
2215
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人