vuex五种基本对象 state：存储状态（变量）getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用$sotre.getters.fun()mutations：修改状态，并且是同步的。在组件中使用$store.commit(,params)。这个和我们组件中的自定义事件类似。actions：异步操作。在组件中使用是$store.dispath()modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。npm ...
问题描述：使用vue-cli创建的项目，开发地址是localhost:8080，由于后台开发不同的模块，导致每个模块请求的ip和端口号不一致例如：http://192.168.10.22:8081 或者 http://192.168.10.30:9999等 解决问题：在vue.config.js中配置不同的端口号 module.exports = {publicPath: process.env.NODE_ENV === production ? ./ : /,devServer: {open: true,proxy: {/monitor: { // 配...
把项目脚手架升级为cli3.X了以后，模板简洁了很多，运行起来也更加快速。但是也随之而来是某些兼容问题。比如我们要在项目钟使用px2rem来计算设计稿的时候，我们不能像以前老的脚手架那样操作了。那我们应该来如何设置呢？ 首先，我们应该用NPM来安装postcss-px2rem npm i postcss-plugin-px2rem --save -dev 然后我们需要在vue.config.js中创建一个配置。由于在vue-cli3.X中。去掉了build和config文件夹。所有的配置都放到了vue....
1.需求：点击商场跳转到商业体列表解决方案： 元页面： a标签中添加跳转函数 <a class="orderBtn1 sIRicon2" href="javascript:void(0);" rel="external nofollow" @click="toMallInfo(M000989)"><i class="sIRicon"></i>商场</a>toMallInfo: function(mallCode){this.$router.push({path: /propertyInfo/mall/mallList,// name: mallList,query: {mallCode: M000989}})},将将跳转的url添加到 $router中。 path 中的url 最前面加 /...
nginx 是一个代理的服务器。出现的问题：写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404，并且从其他页面跳转可以看到但是刷新页面就404。解决方法：在文件中的nginx.conf文件中修改，代码如下 server {listen YYYY; //自己设置的端口号server_name 192.168.XXX.XXX; //在黑窗口下ipconifg后出现的IPv4地址复制location /{root E:/website_wap/dist/; //项目打包后的路径index index.html...
首先先发一下我的项目路径1. 首先要下载 sass-resources-loader npm install sass-resources-loader --save-dev 2.然后再文件夹build/utils里面的更改scss: generateLoaders(sass)scss: generateLoaders(sass).concat({loader: sass-resources-loader,options: {resources: path.resolve(__dirname, ../src/style/blog.scss)}} )3.文件已经导入成功了. 还有最后一步, 重启服务, npm run dev. (更改了utils,要重启服务,否则会报错...
当 <style> 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。 vue组件编译后，会将 template 中的每个元素加入 [data-v-xxxx] 属性来确保 style scoped 仅本组件的元素而不会污染全局。 比如： <style scoped>.example {color: red;} </style><template><div class="example">hi</div> </template>转换结果： <style>.example[data-v-f3f3eg9] {color: red; } </style><template><div class="example" data-v-f3f3eg9>h...
前言 今天被这个关于m3u8视频播放不了搞了一下午，这个项目所有的视频流都是m3u8格式的，后台给我们返回的都是m3u8格式的视频流，解决了好长时间，看了好多博客，只有这个博客给我点启发，去解决这个问题，请查看。会使用两种方法来解决这个问题 第一种方法1.在vue中安装下面这些插件 cnpm install video.js --save ccnp install videojs-contrib-hls --save网上有说video.js版本太高不能使用，不能使用7以上的版本，用5版本的，最...
事故还原:今天在用layui的日期控件的时候发现一个问题,就是form表单中的日期选择之后,如果后面的输入框再输入值,这个日期就会自动清空,导致没办法提交,研究之后发现是vue的model绑定和layui冲突产生的,事实上是vue无法动态绑定layui中获取到的日期值,我们把那个v-model去掉就好,但是去掉的话就没办法动态绑定后台数据. 下面是html+vuejs+layui lyui通过use方法获取到input的ID实现日期选择,但是vue的model绑定和layui是有冲突的. 对...
前两天项目上线，用vue-cli npm run build命令打包，打包完成后我擦吓了一跳，15M。本来暂时不打算优化的，但是每次看着部署包这么大，想想还是先优化一下，让包好看点，免得以后出现心理阴影！在把 map文件干掉后，发现webpack这打包的速度，也忒感人了。在进行不自动生成 map文件设置时，有看到webpack自带的productionGzip功能，索性就一次性一起鼓捣鼓捣。 下面是瞎鼓捣历程，差点就鼓捣不出来了。1、在项目 根目录config/inde...
在日常开发中，我们前端必不可少的需要像后端请求数据。 但是一般前后端分离，所以域名、端口等肯定不尽相同，这样就不可避免的会遇到浏览器的同源策略限制。 在一般情况下，后端都会设置请求跨域允许的来源、方法等。 但是也保不准后端疏忽而忘记这个问题。 那为了不影响我们的开发，前端只能被动的去找后端解决跨域问题。 其实，我们前端也可以解决跨域问题，那就是使用代理。 举个例子： 我请求的地址是这个：http://192.168.12...
大家可否遇到过 npm run build 打包后，项目在线上运行时，资源文件 (图片、图标)不显示 的问题， 接下来，我给大家分享一下我的解决方案~ 1.检查打包后dist中的css文件打开此文件后你会头晕，因为都是打包压缩过的css代码，不过没关系 ，关键字搜索url 检查该url路径是否匹配正确 对比后惊人发现！！！因此在url路径前添加../../就OK了， 但是 很麻烦，每次打包后都要进行二次加工吗？ 并不是！！！ 2.自动添加 ../../ 的方法 打...
第一步、cdn引入各种包 index.html中cdn的方式引入vue、vuex、axios、element-ui、vue-router等包，如下图：第二步、在使用vue等包的地方，注释掉import引入 在所有使用vue的地方注释掉引入的vue等包，但是Vue.use(axios)、Vue.use(VueRoter)、Vue.use(vuex)等依然要使用，除了Vue.use(ElementUI), 如果加上这句话，还是会打包element-ui到vendor.js文件中 在main.js在store文件加中的index.js在api/request.js文件中在router/inde...
vue-cli输入命令：npm run build 即可打包vue.js的项目 打包出来后项目中就会多了一个文件夹dist，下图为我们打包过后的项目我们直接运行打包后的文件夹中的index.html文件，会看到网页一片空白，f12调试，全是css，js路径引用错误的问题。 解决：到config文件夹中打开index.js文件。 文件里面有两个assetsPublicPath属性，更改第一个，也就是更改build里面的assetsPublicPath属性：assetsPublicPath属性作用是指定编译发布的根...
前言 这篇博文不会教你怎么安装vue，但会告知安装过程中可能遇到的5个问题 5个报错 ①：若使用vue -V查询是否安装vue时提示没有找到指令，可能是你没有安装vue-cli脚手架（vue-cli可快速创建vue项目） ②：vue安装淘宝镜像时报错，提示无效的配置，必须是完整合法的http地址，原因是我在url前面加了1个空格，这里不要有空格 注：安装淘宝镜像后，需要用到npm的地方都可以用cnpm替换，但建议安装模块和插件用cnpm，打包和启...