[vue-i18n] Value of key 'el.datepicker.weeks.sun' is not a string! 怎样解决这个问题?

图片说明

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
vue-loader安装后在.vue里的<style></style>里面写样式就报错?

提问:请问下,vue-loader也安装了为何在.vue的style标签了 还是不能写样式呢?webpack4,使用webpack-dev-server命令打包时就报错.应该如何解决? 我已经尝试卸载vue-loader重新安装,删除node-modules重新跑环境,但并没有解决掉.难到是某个加载器的版本的问题吗? main.js ``` import Vue from 'vue'; import app from './App.vue'; import { Header } from 'mint-ui'; Vue.component(Header.name, Header); var vm=new Vue({ el:'#app', render:c=>c(app) }); ``` App.vue ``` <template> <div class="box"> <!--header--> <mt-header fixed title="固定在顶部"></mt-header> <!--body--> <!--foot--> <h1>这是 App 组件</h1> </div> </template> <script> </script> <style lang="sass" scoped> .box{ padding-top:40px; } </style> ``` package.json ``` "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-component": "^0.10.1", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.1", "babel-preset-stage-0": "^6.24.1", "css-loader": "^0.28.7", "file-loader": "^1.1.5", "html-webpack-plugin": "^2.30.1", "less": "^2.7.3", "less-loader": "^4.0.5", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "style-loader": "^0.19.0", "url-loader": "^0.6.2", "vue-loader": "^13.3.0", "vue-template-compiler": "^2.5.2", "webpack": "^3.8.1", "webpack-dev-server": "^2.9.3" }, "dependencies": { "bootstrap": "^3.3.7", "mint-ui": "^2.2.9", "vue": "^2.5.2", "vue-router": "^3.0.1" } } ``` 错误提示: ``` ERROR in ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-7ba5bd90","scoped": true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modules/vue-loader/lib/selector .js?type=styles&index=0!./src/App.vue Module build failed: .box{ ^ Invalid CSS after ".box{": expected "}", was "{" in F:\vuetest\day7\src\App.vue (line 19, column 6) @ ./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":" data-v-7ba5bd90","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js?indentedSyntax!./node_modul es/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-331 13:3-17:5 14:22-339 @ ./src/App.vue @ ./src/main.js @ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./src/main.js

做vue项目时使用vue-aplayer报错

配置完vue-aplayer,运行npm run start,一直报错依赖找不到 * hls.js in ./node_modules/vue-aplayer/dist/vue-aplayer.min.js ![图片说明](https://img-ask.csdn.net/upload/201911/19/1574150431_952151.png)![图片说明](https://img-ask.csdn.net/upload/201911/19/1574150439_268288.png) 配置是按照[https://blog.csdn.net/yusina_/article/details/83690647](https://blog.csdn.net/yusina_/article/details/83690647 "")这个帖子配置的 新手自己写的第一个项目,卡一下午了,求教(真诚脸)

react-router如何像vue-router通过this.$router.push的方式编程实现路由跳转

最近在研究react,遇到一个编程路由跳转问题,其实我就是想实现,如果像vue-router的方式通过this.$router.push({name: '', ''});类似的方式实现跳转到不同的组件,网上找了好多方法,都不行,不知道错在哪里,求大神指点一下。 我的版本: ![图片说明](https://img-ask.csdn.net/upload/201901/18/1547780563_148060.png) ![图片说明](https://img-ask.csdn.net/upload/201901/18/1547780665_882261.png) ``` import React, { Component } from 'react'; // import logo from './logo.svg'; import './App.css'; import './style/common/base.css'; import './style/common/reset.css'; import Index from './pages/index/index.jsx'; import List from './pages/list/List.jsx'; import Detail from './pages/detail/Detail.jsx'; import Form from './pages/form/form.jsx'; import { Route, HashRouter, Switch, withRouter } from 'react-router-dom'; class App extends Component { constructor (props) { super(props); this.state = { msg: { name: 'zhangan', age: '212', arr: [1, 2, 3, '21'], obj: { hight: '160cm', width: '89kg' } } } // this.routerUrl = this.routerUrl.bind(this); } childFun (state, val) { console.log('子组件往父组件传递的值!'); console.log(state); console.log(val); } // 路由跳转,编程导航 routerUrl (url, params) { this.props.history.push({ pathname:"/index", query:{ name:"inbox", myas:"哈哈" } }); } render() { return ( <div className="App"> <div className="router"> <button onClick={this.routerUrl.bind(this)}>index</button> <button onClick={this.routerUrl.bind(this)}>detail</button> <button onClick={this.routerUrl.bind(this)}>list</button> <button onClick={this.routerUrl.bind(this)}>form</button> </div> <div className="content"> <HashRouter> <Switch> <Route exact path="/" component={Index}/> <Route exact path="/list" component={List}/> <Route exact path="/detail" component={Detail}/> <Route exact path="/form" component={Form}/> </Switch> </HashRouter> {/* <Index /> <Detail /> <List /> <Form msg={this.state.msg} clickFun={this.childFun.bind(this)}/> */} </div> </div> ); } componentWillMount () { console.log(this); } } export default App; ```

Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 11.x

``` error in ./src/components/ChartCard.vue?vue&type=style&index=0&id=d2662de4&lang=scss&scoped=true& Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Error: Missing binding C:\Users\xzit1\Desktop\temp-springboot\frontinterface\ant-design-vue-jeecg\node_modules\node-sass\vendor\win32-x64-67\binding.node Node Sass could not find a binding for your current environment: Windows 64-bit with Node.js 11.x Found bindings for the following environments: - Windows 64-bit with Node.js 11.x This usually happens because your environment has changed since running `npm install`. Run `npm rebuild node-sass` to download the binding for your current environment. at module.exports (C:\Users\xzit1\Desktop\temp-springboot\frontinterface\ant-design-vue-jeecg\node_modules\node-sass\lib\binding.js:15:13) at Object.<anonymous> (C:\Users\xzit1\Desktop\temp-springboot\frontinterface\ant-design-vue-jeecg\node_modules\node-sass\lib\index.js:14:35) at Module._compile (internal/modules/cjs/loader.js:723:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:734:10) at Module.load (internal/modules/cjs/loader.js:620:32) at tryModuleLoad (internal/modules/cjs/loader.js:560:12) at Function.Module._load (internal/modules/cjs/loader.js:552:3) ```

为什么我全局安装vue-cli的时候总是报错呢?

用了很多安装命令都安装不上, npm install vue-cli -g npm install -g vue-cli 很多..... 报的错都一样 ![图片说明](https://img-ask.csdn.net/upload/201906/02/1559480690_333242.png) ![图片说明](https://img-ask.csdn.net/upload/201906/02/1559480708_336731.png)

npm run dev啟動項目時報錯 `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`

uotation@1.0.0 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the quotation@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. ``` //webpack.dev.conf.js 'use strict' const utils = require('./utils') const webpack = require('webpack') const config = require('../config') const merge = require('webpack-merge') const path = require('path') const baseWebpackConfig = require('./webpack.base.conf') const CopyWebpackPlugin = require('copy-webpack-plugin') const HtmlWebpackPlugin = require('html-webpack-plugin') const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') const portfinder = require('portfinder') const HOST = process.env.HOST const PORT = process.env.PORT && Number(process.env.PORT) const devWebpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) }, // cheap-module-eval-source-map is faster for development devtool: config.dev.devtool, // these devServer options should be customized in /config/index.js devServer: { clientLogLevel: 'warning', historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], }, hot: true, contentBase: false, // since we use CopyWebpackPlugin. compress: true, host: HOST || config.dev.host, port: PORT || config.dev.port, open: config.dev.autoOpenBrowser, overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false, publicPath: config.dev.assetsPublicPath, proxy: config.dev.proxyTable, quiet: true, // necessary for FriendlyErrorsPlugin watchOptions: { poll: config.dev.poll, } }, plugins: [ new webpack.DefinePlugin({ 'process.env': require('../config/dev.env') }), new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. new webpack.NoEmitOnErrorsPlugin(), // https://github.com/ampedandwired/html-webpack-plugin new HtmlWebpackPlugin({ filename: 'index.html', template: 'index.html', inject: true }), // copy custom static assets new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), to: config.dev.assetsSubDirectory, ignore: ['.*'] } ]) ] }) module.exports = new Promise((resolve, reject) => { portfinder.basePort = process.env.PORT || config.dev.port portfinder.getPort((err, port) => { if (err) { reject(err) } else { // publish the new Port, necessary for e2e tests process.env.PORT = port // add port to devServer config devWebpackConfig.devServer.port = port // Add FriendlyErrorsPlugin devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ compilationSuccessInfo: { messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], }, onErrors: config.dev.notifyOnErrors ? utils.createNotifierCallback() : undefined })) resolve(devWebpackConfig) } }) }) ``` ``` //webpack.base.conf.js 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const vueLoaderConfig = require('./vue-loader.conf') function resolve (dir) { return path.join(__dirname, '..', dir) } module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, filename: '[name].js', publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath }, resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, { test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('media/[name].[hash:7].[ext]') } }, { test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('fonts/[name].[hash:7].[ext]') } } ] }, node: { // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). setImmediate: false, // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty' } } ```

vue-cli3.0的项目如何实现.vue文件跳转到.html文件

将html文件放在public文件夹下,如何可以实现views下的vue文件点击跳转到该html文件里 ![图片说明](https://img-ask.csdn.net/upload/202003/25/1585131579_196059.png)

vue-element-extends 引入程序,但是项目中始终报错 key of null

在main.js中如下引入,![图片说明](https://img-ask.csdn.net/upload/201905/20/1558337864_80071.png) 在页面中直接调用可更改表格![图片说明](https://img-ask.csdn.net/upload/201905/20/1558337975_581713.png) 但是在最后的页面中,并没有相对应表格出现,而且控制台报错!![图片说明](https://img-ask.csdn.net/upload/201905/20/1558338091_767575.png),完全不知道怎么回事,求大神解答!

vue-element-admin 如何在本地跑通?

下载的 vue-element-admin 在VScode上跑出错。 在安装npm时报如下错误, 尝试了网上的添加环境变量仍未解决,求大佬帮忙!!! npm ERR! code ENOGIT npm ERR! Error while executing: npm ERR! undefined ls-remote -h -t ssh://git@github.com/sohee-lee7/Squire.git npm ERR! npm ERR! undefined npm ERR! No git binary found in $PATH npm ERR! npm ERR! Failed using git. npm ERR! Please check if you have git installed and in your PATH. npm ERR! A complete log of this run can be found in: npm ERR! D:\soft\NodeJS\node_cache\_logs\2019-02-13T07_44_02_375Z-debug.log

vue-video-player 报错 ,请问怎么解决

vendor.fec61cdf0ab67b1c1d30.1557884654290.js:50 VIDEOJS: WARN: player.hls is deprecated. Use player.tech_.hls instead ``` import 'videojs-contrib-hls' import { videoPlayer } from 'vue-video-player'; <div class="video-container"> <div class="container"> <div class="player"> <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" @play="onPlayerPlay($event)" @pause="onPlayerPause($event)" @touchEnd="handleVideo" > </video-player> </div> </div> </div> 代码部分 ```

vue-cli 3.0 打包如何去掉console.log,vue.config.js怎么配置,在线等

```configureWebpack:{ optimization: { minimizer: [ new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true,//console drop_debugger: false, pure_funcs: ['console.log']//移除console } } }) ] } } ```

关于vue项目报错:this relative module was not found

``` This relative module was not found: * ./vue-temp/vue-editor-bridge in ./node_modules/_babel-loader@7.1.5@babel-loader/lib!./node_modules/_vue-loader@13.7.3@vue-loader/lib/selector.js?type=script&index=0!./src/views/useCarDetail.vue ``` 有没有大佬知道是什么原因

vue在写webApp时可不可以用vue-socket.io实现长链接,实现实时刷新数据???急啊。。。。

vue在写webApp时可不可以用vue-socket.io实现长链接,实现实时刷新数据???急啊。。。。

vue-amap 图片覆盖物点击事件无效

我在项目中使用了vue-amap 在地图中添加了图片覆盖物 现在我需要给图片覆盖物添加点击事件 我是按照官方文档来写的 但是不生效 而且官方文档的点击事件也不生效 ``` <el-amap class="amap-box" :vid="'amap-vue'" :amap-manager='amapManager' :zoom='18' :center="mapCenter" :showIndoorMap="indoorMap" :mapStyle="mapStyle" :doubleClickZoom="false"> <el-amap-ground-image :key=groundimage.bounds v-for="groundimage in groundimages" :url="groundimage.url" :bounds="groundimage.bounds" :events="groundimage.events" clickable="true"></el-amap-ground-image> <!-- <el-amap-circle :key=circle.radius v-for="circle in circles" :center='circle.center' :radius="circle.radius" :strokeColor='circle.strokeColor' :fillColor='circle.fillColor' :fill-opacity="circle.fillOpacity" :events="circle.events"></el-amap-circle> --> </el-amap> ``` ``` groundimages: [// { url: require("../assets/images/ldm.png"), bounds: [ [114.895931,40.793634],[114.896158,40.793625] //22 28 ], clickable:true, events: { click(){ alert('1232131231') } } }, ], ```

vue-validator表单验证,一直报错无法解决,请高手给指点一下?

**错误信息是** [Web浏览器] "Uncaught ReferenceError: module is not defined" https://cdn.bootcss.com/vue-validator/3.0.0-alpha.2/vue-validator.common.min.js (1) [Web浏览器] "TypeError: Cannot read property 'required' of undefined" /HelloHBuilder/js/vue.min.js (6) 下面是源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.bootcss.com/vue-validator/3.0.0-alpha.2/vue-validator.min.js" type="text/javascript" charset="utf-8"></script> <script src="https://cdn.bootcss.com/vue-validator/3.0.0-alpha.2/vue-validator.common.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <validator name="validation"> <form novalidate> ID: <input type="text" id="sname" v-validate:sname="['required']"><br /> <div> <span v-if="$validation.sname.required">必填</span> </div> </form> </validator> </div> <script type="text/javascript"> new Vue({ el: '#app' }); </script> </body> </html>

在使用vue-preview缩略图时src图太大了,怎么调小?

最近在学习vue的一个移动商城项目,但是视频已经是两年前的了,许多地方都搞不明白。在学习使用vue-preview缩略图时,我的src图片和msrc图片差不多大,我不明白这是为什么,还要如何才能让他达到理想的缩略图效果? 代码如下: ``` <template> <div class="photoinfo-container"> <h3>{{ photoinfo.title }}</h3> <p class="subtitle"> <span>发表时间:{{ photoinfo.add_time | dateFormat }}</span> <span>点击:{{ photoinfo.click }}次</span> </p> <hr> <!-- 缩略图区域 --> <div class="thumbs"> <vue-preview :slides="slide1" @close="handleClose" tag="img" height="100px"></vue-preview> </div> <!-- 文字内容区域 --> <div class="content" v-html="photoinfo.content" ></div> <!-- 放置一个现成的 评论子组件 --> <cmt-box :id="id"></cmt-box> </div> </template> <script> // 1. 导入评论子组件 import comment from "../subcomponents/comment.vue"; export default { data() { return { id: this.$route.params.id, // 从路由中获取到的 图片Id photoinfo: {}, // 图片详情 slide1: [], }; }, created() { this.getPhotoInfo(); this.getThumbs(); }, methods: { getPhotoInfo() { // 获取图片的详情 this.$http.get("api/getimageInfo/" + this.id).then(result => { if (result.body.status === 0) { this.photoinfo = result.body.message[0]; } }); }, getThumbs() { // 获取缩略图 this.$http.get("api/getthumimages/" + this.id) .then(result => { if (result.body.status === 0) { // 循环每个图片数据,补全图片的宽和高 result.body.message.forEach(item => { item.w = 600; item.h = 400; item.msrc = item.src; }); // 把完整的数据保存到 slide1 中 this.slide1 = result.body.message; } }) .catch(error => { console.log(error); Toast({ message: "获取缩略图图片失败..." }); }); }, handleClose () { console.log('close event') } }, components: { // 注册 评论子组件 "cmt-box": comment } }; </script> <style lang="scss" scoped> .photoinfo-container { padding: 3px; h3 { color: #26a2ff; font-size: 15px; text-align: center; margin: 15px 0; } .subtitle { display: flex; justify-content: space-between; font-size: 13px; } .content { font-size: 13px; line-height: 30px; } .thumbs{ img{ margin: 10px; box-shadow: 0 0 8px #999; } } } </style> ``` 我的效果图: ![图片说明](https://img-ask.csdn.net/upload/201912/10/1575947687_671886.png) ![图片说明](https://img-ask.csdn.net/upload/201912/10/1575947799_485086.png) 应达到的效果图:![图片说明](https://img-ask.csdn.net/upload/201912/10/1575948099_260601.png)

vue-video-player报错

我按着这个网址的写法去做[(点击查看)](https://blog.csdn.net/fei565789229/article/details/78925395 "")到最后增加hls支持的时候报错:![图片说明](https://img-ask.csdn.net/upload/201805/11/1526025338_637131.jpg)如果不加这个hls支持的话,又一直显示此视频无法查看,在没加这个hls的时候如果用mp4格式的是可以播放,请问大神,这是什么原因呢?该怎么解决?请大神来解答一下下咯。。。。。

vue-awesome-swiper 手势缩放无效

问题描述: 想在vue项目中使用vue-awesome-swiper实现相册查看功能,测试的时候发现使用写死的图片src 时手势缩放没有问题,但是图片src集合换到从后台获取到再赋值的,手势缩放就不起作用了,不知道是什么原因。 用的vue template, 后台获取到的数据已经渲染到dom中,手机上测试切换没有问题,双击放大也可以,就是手势缩放或者双击放大后图片不能拖拽移动查看(用写死的图片src是可以的)。 vue项目依赖或版本: ``` "devDependencies": { "axios": "^0.15.3", "babel-plugin-component": "^0.10.1", "babel-plugin-transform-object-rest-spread": "^6.26.0", "bootstrap-sass": "^3.3.7", "cross-env": "^3.2.3", "jquery": "^3.1.1", "laravel-mix": "^0.12.1", "less": "^2.7.3", "less-loader": "^4.0.5", "lodash": "^4.17.4", "postcss-px2rem": "^0.3.0", "vue-lazyload": "^1.2.6" }, "dependencies": { "fastclick": "^1.0.6", "leancloud-realtime": "^4.0.0-alpha.3", "leancloud-realtime-plugin-typed-messages": "^3.0.0", "leancloud-storage": "^3.4.2", "mint-ui": "^2.2.11", "moment": "^2.19.1", "vee-validate": "^2.0.0", "vue": "^2.5.13", "vue-awesome-swiper": "^2.6.7", "vue-resource": "^1.3.4", "vue-router": "^3.0.1", "vuex": "^3.0.1" } ``` 问题出现的环境背景及自己尝试过哪些方法: 试过使用另一个图片预览插件 [PhotoSwipe](http://photoswipe.com/ ""):PhotoSwipe,这个插件体验感比较好,但是插件需要预先知道图片的宽高,这个目前还没有时间研究。 相关代码: ``` <style> .viewImg .swiper-slide img { width: 100%; } </style> <template> <div class="viewImg" > <a class="btn-close f-r"><img src="/images/icon-close.png" @click="closeViewer" alt="关闭" title="关闭"></a> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide v-for="img in images" :key="img.id"> <div class="swiper-zoom-container"> <img :data-src="img.smallSizeUrl" class="swiper-lazy"> </div> </swiper-slide> <div class="swiper-button-prev" slot="button-prev"></div> <div class="swiper-button-next" slot="button-next"></div> </swiper> </div> </template> <script> import 'swiper/dist/css/swiper.css' ; import { swiper, swiperSlide } from 'vue-awesome-swiper' export default { components: { swiper, swiperSlide }, data() { return {swiperOption: { allowTouchMove: true, width: window.innerWidth, notNextTick: false, observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true,//修改swiper的父元素时,自动初始化swiper loadPrevNext: true, lazy: { loadPrevNext: true, }, lazyLoading : true, lazyLoadingInPrevNext: true, // 设置为true允许将延迟加载应用到最接近的slide的图片(前一个和后一个slide)。 zoom: true, grabCursor: true, // 设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状。(根据浏览器形状有所不同) pagination: { el: '.swiper-pagination' }, navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' } } } }, //定义这个sweiper对象 computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted () { //这边就可以使用swiper这个对象去使用swiper官网中的那些方法 // this.swiper.slideTo(0, 1, false); }, props: { images: { required: true } }, methods:{ closeViewer: function(){ this.viewImg = false; } } } </script> ``` 我期待的结果是什么?实际看到的错误信息又是什么: 需要实现流畅的相册查看功能,支持预加载、流畅切换以及手机中手势缩放查看。 [vue-awesome-swiper 的demo](https://surmon-china.github.io/vue-awesome-swiper/ "")里可以看到都可以满足目前的主要需求,但是我在项目中出现了以上问题,求助。

Vue-cli 的热更新无效问题

我使用vue init webpack-simple ProjectName创建了一个简单的Vue-cli工程,但是无法实现热更新。每次一点点改动就需要重新编译运行才能看到效果,十分困扰。 我的webpack配置如下: ``` const path = require('path') const webpack = require('webpack'); console.log(path.resolve(__dirname, './src/main.js')) module.exports = { //热部署 entry:[ path.resolve(__dirname, './src/main.js'), 'webpack-dev-server/client?http://localhost:8080/', ], output: { path: path.resolve(__dirname, './dist'), publicPath: './dist/', filename: 'build.js' }, module: { rules: [ { test: /\.css$/, use: [ 'vue-style-loader', 'css-loader' ], }, { test: /\.vue$/, loader: 'vue-loader', options: { loaders: { } // other vue-loader options go here } }, { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|svg)$/, loader: 'file-loader', options: { name: '[name].[ext]?[hash]' } } ] }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' }, extensions: ['*', '.js', '.vue', '.json'] }, devServer: { //这里可以配置端口号 // port:8080, // host: 'localhost', //重定向404 historyApiFallback: true, noInfo: true, //编译出错的时候,在浏览器页面上显示错误 overlay: true, hot:true, inline:true, //该目录不填默认是项目目录 // contentBase: path.resolve(__dirname), }, performance: { hints: false }, devtool: '#eval-source-map', //配置webpack插件 plugins:[ //热加载插件 new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), ] } if (process.env.NODE_ENV === 'production') { module.exports.devtool = '#source-map' // http://vue-loader.vuejs.org/en/workflow/production.html module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ sourceMap: true, compress: { warnings: false } }), new webpack.LoaderOptionsPlugin({ minimize: true }) ]) } ``` package.json如下: ``` { "name": "srms", "description": "A Vue.js project", "version": "1.0.0", "author": "Snile <826245622@qq.com>", "license": "", "private": true, "scripts": { "clean": "rd /s /q dist", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules", "dev": "npm run build && cross-env NODE_ENV=development webpack-dev-server --open --inline --hot" }, "dependencies": { "vue": "^2.5.11", "vue-router": "^3.0.2" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "vue-loader": "^14.2.3", "vue-template-compiler": "^2.4.4", "webpack": "^3.12.0", "webpack-dev-server": "^2.9.1" } } ``` 该配置似乎能检测到文件的变化,每次改动后,控制台都会输出: client:77 [WDS] Hot Module Replacement enabled. 2client:80 [WDS] App updated. Recompiling... client:223 [WDS] App hot update...

在中国程序员是青春饭吗?

今年,我也32了 ,为了不给大家误导,咨询了猎头、圈内好友,以及年过35岁的几位老程序员……舍了老脸去揭人家伤疤……希望能给大家以帮助,记得帮我点赞哦。 目录: 你以为的人生 一次又一次的伤害 猎头界的真相 如何应对互联网行业的「中年危机」 一、你以为的人生 刚入行时,拿着傲人的工资,想着好好干,以为我们的人生是这样的: 等真到了那一天,你会发现,你的人生很可能是这样的: ...

程序员请照顾好自己,周末病魔差点一套带走我。

程序员在一个周末的时间,得了重病,差点当场去世,还好及时挽救回来了。

和黑客斗争的 6 天!

互联网公司工作,很难避免不和黑客们打交道,我呆过的两家互联网公司,几乎每月每天每分钟都有黑客在公司网站上扫描。有的是寻找 Sql 注入的缺口,有的是寻找线上服务器可能存在的漏洞,大部分都...

搜狗输入法也在挑战国人的智商!

故事总是一个接着一个到来...上周写完《鲁大师已经彻底沦为一款垃圾流氓软件!》这篇文章之后,鲁大师的市场工作人员就找到了我,希望把这篇文章删除掉。经过一番沟通我先把这篇文章从公号中删除了...

总结了 150 余个神奇网站,你不来瞅瞅吗?

原博客再更新,可能就没了,之后将持续更新本篇博客。

副业收入是我做程序媛的3倍,工作外的B面人生是怎样的?

提到“程序员”,多数人脑海里首先想到的大约是:为人木讷、薪水超高、工作枯燥…… 然而,当离开工作岗位,撕去层层标签,脱下“程序员”这身外套,有的人生动又有趣,马上展现出了完全不同的A/B面人生! 不论是简单的爱好,还是正经的副业,他们都干得同样出色。偶尔,还能和程序员的特质结合,产生奇妙的“化学反应”。 @Charlotte:平日素颜示人,周末美妆博主 大家都以为程序媛也个个不修边幅,但我们也许...

MySQL数据库面试题(2020最新版)

文章目录数据库基础知识为什么要使用数据库什么是SQL?什么是MySQL?数据库三大范式是什么mysql有关权限的表都有哪几个MySQL的binlog有有几种录入格式?分别有什么区别?数据类型mysql有哪些数据类型引擎MySQL存储引擎MyISAM与InnoDB区别MyISAM索引与InnoDB索引的区别?InnoDB引擎的4大特性存储引擎选择索引什么是索引?索引有哪些优缺点?索引使用场景(重点)...

如果你是老板,你会不会踢了这样的员工?

有个好朋友ZS,是技术总监,昨天问我:“有一个老下属,跟了我很多年,做事勤勤恳恳,主动性也很好。但随着公司的发展,他的进步速度,跟不上团队的步伐了,有点...

我入职阿里后,才知道原来简历这么写

私下里,有不少读者问我:“二哥,如何才能写出一份专业的技术简历呢?我总感觉自己写的简历太烂了,所以投了无数份,都石沉大海了。”说实话,我自己好多年没有写过简历了,但我认识的一个同行,他在阿里,给我说了一些他当年写简历的方法论,我感觉太牛逼了,实在是忍不住,就分享了出来,希望能够帮助到你。 01、简历的本质 作为简历的撰写者,你必须要搞清楚一点,简历的本质是什么,它就是为了来销售你的价值主张的。往深...

优雅的替换if-else语句

场景 日常开发,if-else语句写的不少吧??当逻辑分支非常多的时候,if-else套了一层又一层,虽然业务功能倒是实现了,但是看起来是真的很不优雅,尤其是对于我这种有强迫症的程序"猿",看到这么多if-else,脑袋瓜子就嗡嗡的,总想着解锁新姿势:干掉过多的if-else!!!本文将介绍三板斧手段: 优先判断条件,条件不满足的,逻辑及时中断返回; 采用策略模式+工厂模式; 结合注解,锦...

离职半年了,老东家又发 offer,回不回?

有小伙伴问松哥这个问题,他在上海某公司,在离职了几个月后,前公司的领导联系到他,希望他能够返聘回去,他很纠结要不要回去? 俗话说好马不吃回头草,但是这个小伙伴既然感到纠结了,我觉得至少说明了两个问题:1.曾经的公司还不错;2.现在的日子也不是很如意。否则应该就不会纠结了。 老实说,松哥之前也有过类似的经历,今天就来和小伙伴们聊聊回头草到底吃不吃。 首先一个基本观点,就是离职了也没必要和老东家弄的苦...

2020阿里全球数学大赛:3万名高手、4道题、2天2夜未交卷

阿里巴巴全球数学竞赛( Alibaba Global Mathematics Competition)由马云发起,由中国科学技术协会、阿里巴巴基金会、阿里巴巴达摩院共同举办。大赛不设报名门槛,全世界爱好数学的人都可参与,不论是否出身数学专业、是否投身数学研究。 2020年阿里巴巴达摩院邀请北京大学、剑桥大学、浙江大学等高校的顶尖数学教师组建了出题组。中科院院士、美国艺术与科学院院士、北京国际数学...

男生更看重女生的身材脸蛋,还是思想?

往往,我们看不进去大段大段的逻辑。深刻的哲理,往往短而精悍,一阵见血。问:产品经理挺漂亮的,有点心动,但不知道合不合得来。男生更看重女生的身材脸蛋,还是...

程序员为什么千万不要瞎努力?

本文作者用对比非常鲜明的两个开发团队的故事,讲解了敏捷开发之道 —— 如果你的团队缺乏统一标准的环境,那么即使勤劳努力,不仅会极其耗时而且成果甚微,使用...

为什么程序员做外包会被瞧不起?

二哥,有个事想询问下您的意见,您觉得应届生值得去外包吗?公司虽然挺大的,中xx,但待遇感觉挺低,马上要报到,挺纠结的。

当HR压你价,说你只值7K,你该怎么回答?

当HR压你价,说你只值7K时,你可以流畅地回答,记住,是流畅,不能犹豫。 礼貌地说:“7K是吗?了解了。嗯~其实我对贵司的面试官印象很好。只不过,现在我的手头上已经有一份11K的offer。来面试,主要也是自己对贵司挺有兴趣的,所以过来看看……”(未完) 这段话主要是陪HR互诈的同时,从公司兴趣,公司职员印象上,都给予对方正面的肯定,既能提升HR的好感度,又能让谈判气氛融洽,为后面的发挥留足空间。...

面试:第十六章:Java中级开发(16k)

HashMap底层实现原理,红黑树,B+树,B树的结构原理 Spring的AOP和IOC是什么?它们常见的使用场景有哪些?Spring事务,事务的属性,传播行为,数据库隔离级别 Spring和SpringMVC,MyBatis以及SpringBoot的注解分别有哪些?SpringMVC的工作原理,SpringBoot框架的优点,MyBatis框架的优点 SpringCould组件有哪些,他们...

面试阿里p7,被按在地上摩擦,鬼知道我经历了什么?

面试阿里p7被问到的问题(当时我只知道第一个):@Conditional是做什么的?@Conditional多个条件是什么逻辑关系?条件判断在什么时候执...

面试了一个 31 岁程序员,让我有所触动,30岁以上的程序员该何去何从?

最近面试了一个31岁8年经验的程序猿,让我有点感慨,大龄程序猿该何去何从。

大三实习生,字节跳动面经分享,已拿Offer

说实话,自己的算法,我一个不会,太难了吧

程序员垃圾简历长什么样?

已经连续五年参加大厂校招、社招的技术面试工作,简历看的不下于万份 这篇文章会用实例告诉你,什么是差的程序员简历! 疫情快要结束了,各个公司也都开始春招了,作为即将红遍大江南北的新晋UP主,那当然要为小伙伴们做点事(手动狗头)。 就在公众号里公开征简历,义务帮大家看,并一一点评。《启舰:春招在即,义务帮大家看看简历吧》 一石激起千层浪,三天收到两百多封简历。 花光了两个星期的所有空闲时...

《Oracle Java SE编程自学与面试指南》最佳学习路线图2020年最新版(进大厂必备)

正确选择比瞎努力更重要!

《Oracle Java SE编程自学与面试指南》最佳学习路线图(2020最新版)

正确选择比瞎努力更重要!

都前后端分离了,咱就别做页面跳转了!统统 JSON 交互

文章目录1. 无状态登录1.1 什么是有状态1.2 什么是无状态1.3 如何实现无状态1.4 各自优缺点2. 登录交互2.1 前后端分离的数据交互2.2 登录成功2.3 登录失败3. 未认证处理方案4. 注销登录 这是本系列的第四篇,有小伙伴找不到之前文章,松哥给大家列一个索引出来: 挖一个大坑,Spring Security 开搞! 松哥手把手带你入门 Spring Security,别再问密...

字节跳动面试官竟然问了我JDBC?

轻松等回家通知

面试官:你连SSO都不懂,就别来面试了

大厂竟然要考我SSO,卧槽。

阿里面试官让我用Zk(Zookeeper)实现分布式锁

他可能没想到,我当场手写出来了

终于,月薪过5万了!

来看几个问题想不想月薪超过5万?想不想进入公司架构组?想不想成为项目组的负责人?想不想成为spring的高手,超越99%的对手?那么本文内容是你必须要掌握的。本文主要详解bean的生命...

自从喜欢上了B站这12个UP主,我越来越觉得自己是个废柴了!

不怕告诉你,我自从喜欢上了这12个UP主,哔哩哔哩成为了我手机上最耗电的软件,几乎每天都会看,可是吧,看的越多,我就越觉得自己是个废柴,唉,老天不公啊,不信你看看…… 间接性踌躇满志,持续性混吃等死,都是因为你们……但是,自己的学习力在慢慢变强,这是不容忽视的,推荐给你们! 都说B站是个宝,可是有人不会挖啊,没事,今天咱挖好的送你一箩筐,首先啊,我在B站上最喜欢看这个家伙的视频了,为啥 ,咱撇...

代码注释如此沙雕,会玩还是你们程序员!

某站后端代码被“开源”,同时刷遍全网的,还有代码里的那些神注释。 我们这才知道,原来程序员个个都是段子手;这么多年来,我们也走过了他们的无数套路… 首先,产品经理,是永远永远吐槽不完的!网友的评论也非常扎心,说看这些代码就像在阅读程序员的日记,每一页都写满了对产品经理的恨。 然后,也要发出直击灵魂的质问:你是尊贵的付费大会员吗? 这不禁让人想起之前某音乐app的穷逼Vip,果然,穷逼在哪里都是...

立即提问