Vue CLI | 易学教程

sockjs.js?9be2:1606 GET http://192.168.1.101:8080/sockjs-node/info?t=1583642185049 net::ERR_CONNE...

阅读更多关于 sockjs.js?9be2:1606 GET http://192.168.1.101:8080/sockjs-node/info?t=1583642185049 net::ERR_CONNE...

在使用vue-cli脚手架创建项目的时候，在 cnpm create app 命令后，项目创建成功后通过 npm run serve 命令运行以后，控制台报错， sockjs.js?9be2:1606 GET http://192.168.16.105:8080/sockjs-node/info?t=1574662800493 net::ERR_CONNECTION_TIMED_OUT 错误分析： sockjs-node 是一个JavaScript库，提供跨浏览器JavaScript的API，创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。在项目运行以后，network会一直调用这个接口。如果没有使用，那么就一直会报这个异常。解决办法： 1）找到 /node_modules/sockjs-client/dist/sockjs.js 2）在1605行，注释掉 self.xhr.send(payload); 这一行，然后就可以解决了 try { // self.xhr.send(payload); } catch ( e ) { self . emit ( 'finish' , 0 , '' ) ; self . _cleanup ( false ) ; } } ; 来源： oschina 链接： https://my.oschina.net/u/4287847/blog

vue-cli3及以上版本安装及创建项目

阅读更多关于 vue-cli3及以上版本安装及创建项目

如果你已经安装了vue-cli2，你需要先卸载：npm uninstall -g vue-cli 安装 npm install -g @vue/cli 创建项目创建名为myVue的项目： vue create myVue 你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。启动项目 cd myVue npm run serve 启动成功，结束！来源： oschina 链接： https://my.oschina.net/u/4276902/blog/4280468

Vue技术栈开发实战_汇总贴

阅读更多关于 Vue技术栈开发实战_汇总贴

课程地址： https://ke.segmentfault.com/ls/1650000016221751 1.Vue技术栈开发实战-使用vue-cli3创建项目来源： oschina 链接： https://my.oschina.net/u/4282691/blog/4282305

springboot+vue项目大型实战（一）后端开发

阅读更多关于 springboot+vue项目大型实战（一）后端开发

数据库创建表 SET NAMES utf8mb4 ; SET FOREIGN_KEY_CHECKS = 0 ; -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- Table structure for book -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- DROP TABLE IF EXISTS `book` ; CREATE TABLE `book` ( `id` int ( 10 ) NOT NULL , `name` varchar ( 20 ) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `author` varchar ( 20 ) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `publish` varchar ( 20 ) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL , `pages` int ( 10 ) NULL DEFAULT NULL , `price` float ( 10 , 2 ) NULL DEFAULT NULL ,

vue cli 微信分享相关设置

阅读更多关于 vue cli 微信分享相关设置

vue cli 微信分享相关设置 1.npm install weixin-js-sdk --save 2.在src文件夹下新建文件夹mixin 3.在mixin文件夹中新建share.js share.js代码： import wx from 'weixin-js-sdk'; export default { methods: { // 设置隐藏/显示右上角菜单 setIfShowOptionMenu(flag){ wx.ready(function() { if(flag){ // 显示右上角菜单 wx.showOptionMenu(); }else{ // 隐藏右上角菜单 wx.hideOptionMenu(); } }); }, // 设置分享config shareConfig(config) { console.log(config); wx.config({ debug: config.debug, appId: config.appId, // 必填，公众号的唯一标识 timestamp: config.timestamp, // 必填，生成签名的时间戳 nonceStr: config.nonceStr, // 必填，生成签名的随机串 signature: config.signature, // 必填，签名 jsApiList: config

vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】

阅读更多关于 vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇2】

项目搭建时间：2020-06-29 本章节：讲述基于vue/cli，项目的基础搭建。本主题讲述了： 1、跨域配置 2、axios请求封装 3、eslint配置 4、环境dev,test，pro（开发，测试，线上）， run自动调用对应的接口（proxy多代理配置） vue+element-ui JYAdmin 后台管理系统模板-集成方案从零到一的手写搭建全过程。该项目不仅是一个持续完善、高效简洁的后台管理系统模板，还是一套企业级后台系统开发集成方案，致力于打造一个与时俱进、高效易懂、高复用、易维护扩展的应用方案。 1、安装axios cnpm i axios --save 　　 2、axios封装，调用以及api资源管理 @/serve/axiosResquest.js(axios封装) import axios from 'axios'; axios.interceptors.response.use( response => { return response }, error => { if (error && error.response) { const ERR_CODE_LIST = { //常见错误码列表 [400]: "请求错误", [401]: "登录失效或在其他地方已登录", [403]: "拒绝访问", [404]: "请求地址出错",

Vue 在ie下的兼容

阅读更多关于 Vue 在ie下的兼容

https://www.jianshu.com/p/35c85b10cade 说到底还是es6闹得，ie浏览器不支持es6 实际碰到的问题分两步才解决 1. 直接打开是空白页：让ie支持vue 解决方式：安装 "babel-polyfill" 即可。命令：cnpm install --save-dev babel-polyfill //我用的是淘宝镜像，所以是cnpm，如果你没有安装使用npm 即可。在入口main.js文件引入：import 'babel-polyfill' 最后一步，在build文件夹下找到webpack.base.conf.js. 将第10行的内容替换一下即可。 https://blog.csdn.net/weixin_44093149/article/details/99569736 使用vue-cli3创建的项目，在谷歌浏览器运行没有问题，但在火狐浏览器、ie浏览器和edge浏览器上运行都会报错（就测试了这几个浏览器，其它的没测），具体报错内容如下： // 火狐浏览器报错如下 "载入页面时与 ws://localhost:8080/sockjs-node/631/u0rsdsy0/websocket 的连接中断" // ie浏览器报以下错误 SCRIPT5022: SecurityError sockjs.js ( 1683,3 ) //

Vue Hello World

阅读更多关于 Vue Hello World

1 Vue介绍伟大的项目是从Hello World而来的，Hello World尽管没有什么实际性的作用，但是在于意义重大。（哈哈哈哈）好了不废话了入正题。 Vue是一套用于构建用户界面的渐进式JS框架，与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完成能够为复杂的单网页应用提供驱动。 2 Hello World 最简单的Hello World是通过 <script> 引入 vue.js ：  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script src="https://cdn.jsdelivr.net/npm/vue"></script> 开发环境包含了有帮助的命令行警告，而生产环境版本进行了压缩，优化了尺寸以及速度。下一步直接创建一个html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device

vue-cli ——解决多次复用含有Echarts图表组件的问题

阅读更多关于 vue-cli ——解决多次复用含有Echarts图表组件的问题

　　在vue项目里，组件复用是一件很开心的事，可以节省很多时间去排版，达到事半功倍效果，但是昨晚在vue-cli项目里组件复用时发现基于Echarts图表的组件不能够复用，昨晚捯饬了很久，终于还是解决了这个问题，在此记录，加深自己理解。　　具体来说，问题如下：开发了一个基于Echarts的图表组件，现在我想在一个界面内多次使用这个组件，但是我发现Echarts是通过找id来创建canvas的，这样调用同一个基于Echarts的组件时，这个id就会重复，导致第二个图表不能显示出来。如下图所示，按理说左下方应该也有左上方所示的基于Echarts的图表组件，但是并没有加载出来。参考核心代码：参考结果：解决办法(昨晚捯饬了好久才思索到这个方法)：具体来说，就是在组件内动态生成id，然后将这个id赋值给DOM，再使用Echarts初始化即可。问题的关键就在于如何在组件内动态生成id，这个是最关键的，思索了好久发现了一个很笨的方法（哈哈，能解决问题就行.....）：先是获取系统当前时间，利用getTime()函数返回从1970年1月1日至今的毫秒数，然后将这个毫秒数赋值给id，再将这个id再赋值给DOM即可。这样，在组件复用时，由于创建vue实例的时间必定有所差别，不同的毫秒数形成了不同的id名，这样我们就可以在同一界面复用这个基于Echarts的组件了。参考核心代码：参考结果：

vue开发之代码规范eslint

阅读更多关于 vue开发之代码规范eslint

ESLint 不管是多人合作还是个人项目，代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。准备工作一、VSCode ESLint插件 ESLint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示。二、基于vue-cli创建项目具体步骤如下：创建项目创建的时候把Linter/Formatter选上(默认已选上) 下一步选择ESLint with error prevention only 下一步选择Lint on save (在编辑保存之后根据对代码格式进行检测) 下一步选择In dedicated config files(将eslint的配置抽离到独立的文件中) 剩下的步骤默认下一步，即可完成项目的创建配置项所有的配置文件都在 .eslintrc.js 中，默认情况下使用了plugin:vue/essential来校验代码，当然，你也可以选择最严格的plugin:vue/recommended来校验代码。 module . exports = { extends : [ 'plugin:vue/recommended' , 'eslint:recommended' ] //你可以修改为 extends: ['plugin:vue/essential', 'eslint:recommended'

订阅 Vue CLI