分类：Vue项目

2021
10-15

使用vue项目配置多个代理的注意点

在Vue项目的开发过程中,为了本地调试方便，我们通常会在vue.config.js中配置devServer来在本地启动一个服务器，在这个选项中，我们会配置proxy属性来将指向到本地的请求（例如：/api/action）代理到后端的开发服务器上（例如：http://xxx.xxx.xxx/api/action）devServer:{port:8081,proxy:{'/api/action':{target:'http://192.168.200.106:81',changeOr... 继续阅读 >

2021
05-23

SpringBoot+VUE实现前后端分离的实战记录

一，前端VUE项目这里使用VUEUI创建一个VUE项目命令行输入vueui进入手动配置项目选中这三个点击下一步->点击创建项目用IDEA打开刚才创建的项目IDEA中的安装vue插件并重启IDEA控制台中输入vueaddaxios安装axios新建一个Show.vue在index,js的routes中配置它的路由编写Show,vue向后端请求数据并展示<template><div><table><tr><td>ID</td><td>姓名</td>... 继续阅读 >

2020
12-02

基于vue项目设置resolves.alias: '@'路径并适配webstorm

在webpack的配置项中添加下面代码functionresolve(dir){returnpath.join(__dirname,dir)}webpackConfig={resolve:{alias:{'@':resolve('src')}}}然后再设置一下下，在你的IDE中按住CTRL就能根据路径跳转到对应文件了描述：ctrl+alt+s搜索webpack然后选择\node_modules\@vue\cli-service\webpack.config.js文件点击OK以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自学编... 继续阅读 >

2020
11-17

解决vue项目中出现Invalid Host header的问题

在vue-cli版本为2.x的情况下修改webpack.dev.conf.js中的devServer对象加入disableHostCheck:truedevServer:{disableHostCheck:true,}vue-cli版本3.0的情况下修改vue.config.js的配置module.exports={devServer:{disableHostCheck:true}}补充知识：vue中使用wangeditor富文本编辑器1.先下载编辑器cnpminstallwangeditor--save2.用法：2.1、html用来放编辑器<divid="editor"><pv-model="info">请输入内容</p>//... 继续阅读 >

2020
11-13

vue项目实现减少app.js和vender.js的体积操作

配置webpack中externals来减少打包后vendor.js的体积在日常的项目开发中，我们会用到各种第三方库来提高效率，但随之带来的问题就是打包后的vendor.js体积过大，导致加载时空白页时间过长，给用户的体验太差。为此我们需要减少vendor.js的体积，从本质上来解决这种问题。webpack的外部扩展(externals)可以有效的解决。externals配置选项提供了「从输出的bundle中排除依赖」的方法。相反，所创建的bundle依赖于那些存在于用户... 继续阅读 >

2020
10-23

解决新建一个vue项目过程中遇到的问题

我就废话不多说了，大家还是直接看代码吧~/usr/local/bin/node/usr/local/lib/node_modules/npm/bin/npm-cli.jsrundev--scripts-prepend-node-path=auto>mytodolists@1.0.0dev/Users/chenqiurui/WebstormProjects/myVue>webpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js0%compiling10%buildingmodules1/1modules0active10%buildingmodules1/2modules1active…r/client/index.... 继续阅读 >

2020
10-10

解决Can't find variable: SockJS vue项目的问题

用的vue-cli(webpack-simple模板)，在开发环境运行（npmrundev），一直都没有问题，突然在ios的safari中调试，出现报错：Can'tfindvariable:SockJS这是为什么呢？原来这是webpack(我的版本：3.6.0)的报错，webpack的热加载是采用websocket来通知浏览器实现的，SockJS是一个必须的库。这个问题属于意外吧，googel的话有很多方式来解决。最简单：将webpack.config.js中的：devtool:'#eval-source-map'改为：devtool:'inline-s... 继续阅读 >

2020
10-08

基于脚手架创建Vue项目实现步骤详解

第一步准备工作1.下载安装Node.js验证是否安装的方法，在命令行输入node-v2.安装Vue在命令行输入npminstall-g@vue/cli查看Vue版本号npmvue--version如果Vue版本太低，先卸载Vue低版本npmuninstallvue-cli-g第二步创建Vue项目1.打开要创建路径2-1.vueCLI3版本输入vuecreatetest创建名为test的项目接下来会问你一系列的问题Pleasepickapreset:(Usearrowkeys)//选择使用什么样的工具，两个选项：... 继续阅读 >

2020
10-08

完美解决通过IP地址访问VUE项目的问题

第一步1.将config里面的host设置成0.0.0.0host:'0.0.0.0',2.修改package.json"scripts":{"start":"cross-envNODE_ENV=developmentwebpack-dev-server--inline--progress--configbuild/webpack.dev.conf.js--host0.0.0.0",}第一步和第二步都有ip，其实第二步优先级高，这里第二步的host可以不设置，vue默认执行第一步的设置3.查看开发机的ip地址，并告诉给其他小伙伴，还有端口号补充知识：vue项目通过本地ip实现真机... 继续阅读 >

2020
09-27

VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法

1.安装一个插件，识别vue文件2.新建代码片段文件?>首选项?>用户代码片段?>点击新建代码片段?取名vue.json确定3.粘贴入自己写的.vue模板{"Printtoconsole":{"prefix":"vue","body":["<!--$1-->","<template>","<divclass='$2'>$5</div>","</template>","","<script>","","exportdefault{","components:{},","data(){","return{","","}","},","computed:{},","watch:{},","me... 继续阅读 >

2020
09-24

浅谈Visual Studio 2019 Vue项目的目录结构

VisualStudio2019Vue项目创建成功后可看到如下结构VisualStudio2019配置vue项目具体文件结构如下图模版使用入口文件：public/index.html  和src/main.js总结到此这篇关于VisualStudio2019Vue项目目录结构的文章就介绍到这了,更多相关visualstudio2019vue项目内容请搜索自学编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学编程网！... 继续阅读 >

2020
09-24

node创建Vue项目步骤详解

vue的安装Vue.js不支持IE8及以下版本。因为Vue.js使用了ECMAScript5特性，IE8显然不能模拟。Vue.js支持所有兼容ECMAScript5的浏览器。在用Vue.js构建大型应用时，推荐使用npm安装，npm能很好的和webpack等打包工具配合使用。首先Vue的安装依赖于node.js，要保证你的计算机上已经安装过node.js。如何查看node是否安装或者node版本呢？进入cmd，输入命令node-v，回车查看。node最好使用新一些的版本，否则后续安装会提示node版本过... 继续阅读 >