分类：Vue-CLI

2021
10-12

vue-cli配置使用Vuex的全过程记录

目录前言安装使用模块化管理vuex状态持久化总结前言    在vue开发用我们常常会用到一些全局的数据，比如用户信息、用户权限、一些状态等等。我们传统的数据都是单向的，所以我们得一层一层的传递，这样我们遇到一个多组件共享一个数据的时候，单向的这个数据就很难以维护，比如一个组件嵌套很多层但是，数据改变方法就得一层一层的传递。这时候我们就可以引入了vuex。    vuex是... 继续阅读 >

2021
07-22

vue-cli4.5.x快速搭建项目

一、安装vue-clinpmi@vue/cli-g二、创建项目vue-cli会创建一个完整的项目文件夹,内部包含src等,我们仅需要cd进打算放置这个项目文件的文件夹内执行如下代码即可;1.生成项目文件;终端输入:vuecreateprojectname2.选择生成配置方式此处选择最下面一项进行手动配置(你要是喜欢用eslint就直接选vue3那项就好)3.插件选择选择你需要的插件,上下箭头移动,空格切换选取状态选错或漏选?没事,构建完毕后你依然可以通过VueUI来修改... 继续阅读 >

2021
03-19

基于Vue-cli的一套代码支持多个项目

应用场景在toB端业务中，同样的产品，客户多多少少会要求一些定制化。从皮肤，图片，到一些小的功能的差异。前端总是冲在最前面需要改的。如果改动不大的话，拉个分支有增加了维护的成本，分支拉多了，如果主干有一个问题相当于copy了n份，那个滋味简直不要太酸爽。那么，是否可以一套代码支持多个项目呢？前段时间，接了一个需求，技术选型是VUE，用vue-cli搭建的。一套代码需要支持10几家客户，每家的皮肤，功能都有一些小的差异... 继续阅读 >

2021
03-02

vue-cli中实现响应式布局的方法

我们在进行前端开发中必然会遇到PC与移动端的适配，面对这样的问题有些公司会准备两个页面，移动是移动，PC是PC，而响应式布局就是根据用户不同的机型展示不同的页面，废话不多说，直接贴代码首先我们这个功能是借助vuex实现的，没下载的小伙伴可以先下一个yarnaddvuex既然是响应式布局就要准备两套css，一个是PC端的css，一个是移动端的css，我们暂且将PC端的样式称为computer，移动端的样式称为mobile我们首先要做的就是当前屏... 继续阅读 >

2021
02-21

vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件

需求背景简介最近打算使用vue并结合前端工程化体系重构之前的一个Demo，其中有一个功能是使用bootstrap的datepicker插件选择查询日期。在网上找到了一个基于vue扩展的datepicker插件：vue-bootstrap-datepicker。这篇博客主要介绍在使用vue-cli3创建的项目中如何使用该插件。项目地址：https://gitlab.com/JiaoXN/vuecli3usedatetimepicker.git安装插件及其依赖项这个插件有两个版本：一个是基于bootstrap3.x开发的，一个是基于b... 继续阅读 >

2020
12-10

详解vue-cli项目在IE浏览器打开报错解决方法

首先要知道VUE官网已表明仅支持IE8以上版本（不包括IE8），css弹性布局flex各浏览器支持如下:假如项目用到弹性布局，则项目仅支持IE10以上版本。另外兼容其他低版本的，请另寻它法。网上说的本人试了都是没用的，下面是亲自试验的解决方法。1.问题：ie浏览器打开vue2.0项目空白,控制台报错vuexrequiresaPromisepolyfillinthisbrowser;解决方法：安装babel-polyfillnpminstallbabel-polyfill--save-dev关于网上说的ba... 继续阅读 >

2020
11-19

如何使用 vue-cli 创建模板项目

场景吾辈曾经只是个Java后端开发人员，原本对前端的了解大致只有HTML/CSS/JavaScript/JQuery级别，后来接触到了nodejs。不仅是工作之需，吾辈个人而言也非常想要了解现代前端技术。然而天可怜见，吾辈刚入门nodejs并没有发现什么，但发现想要构建一个项目，需要用到前端工具链实在太多了。配置文件的数量甚至远远超过后端。所以为了快速开发，入门之后遇到问题再去解决，吾辈选择了使用nodejs+npm+vuejs+webpack+v... 继续阅读 >

2020
11-17

解决vue-cli输入命令vue ui没效果的问题

最近用vue-cli脚手架很顺口，特别是UI控制台，在这里，创建项目和搭建本地环境，连接服务端变得很容易，页面ui也是一流要怎么启动呢？在终端输入命令行vueui，启动UI控制台，然后往浏览器输入终端报出的链接输入命令行vueui，终端会报启动信息，这本来很正常。可是呢，今天不知道啥回事，输入vueui，终端没反应我查看了vue的帮助信息，敢情是根本没有‘vueui'这一命令行！怎么回事？vue版本怎么倒退了！于是重新安装vue-cli... 继续阅读 >

2020
11-06

Vant 在vue-cli 4.x中按需加载操作

在vue-cli4.x中使用vant出现的问题,在这里记录一下一.如果使用按需加载,需要下载babel-plugin-import转换一下,下载babel-plugin-importcnpminstallbabel-plugin-import-D**二.在根目录中找到babel.config.js文件,添加字段**"plugins":[["import",{"libraryName":"vant","style":true}]]最终我的配置是这样的module.exports={presets:['@vue/cli-plugin-babel/preset',],"plugins":[["import... 继续阅读 >

2020
10-30

解决Vue-cli无法编译es6的问题

最近使用vue-cli创建项目的时候，遇到es6无法转换成es5的情况，项目在ios9下无法正常运行，在webpack.base.conf.js里面修改babel的配置项，添加src目录也没用，于是百度，谷歌找方法，最后自己想了想是不是没有配置.babelrc文件，于是在项目根目录创建.babelrc文件，同时在文件中编写{"presets":["env"],"plugins":["transform-runtime"]}于是es6语法成功编译成es5，开心。补充知识：vuecli2、cli3编译（打包）后... 继续阅读 >

2020
10-24

vue-cli —— 如何局部修改Element样式

最近在做vue项目时用到了Element，发现这玩意儿用起来很舒服，很新颖，上手也很快，而且效果足够酷炫。但是后面发现一个很大的问题，那就是Element的样式有限，这极大地限制了项目的应用广度，所以我们有必要对Element内部的CSS进行一定的覆盖，来改变其样式。在修改Element样式时，遇到了一些问题，这里简单做一些记录，便于以后查阅。我在用el-switch做开关切换时，使用默认样式：代码如下：效果：现在我想把蓝色字... 继续阅读 >

2020
10-10

vue-cli 关闭热更新操作

vue手脚架在使用过程中，更改代码会自动更新页面，非常的方便，但是有些情况向关闭掉这热更新功能，我使用的是vue-admin-template模板来开发的，所以更改也是基于这个模板的。在build文件夹下有个webpack.dev.conf.js文件。然后添加一个配置项：inline:false即可关闭热更新操作。补充知识：vue多页面热更新缓慢原因以及解决方法热更新慢的原因多页面就是多入口，会生成多个html文件，之前我基本都是单页面，因为是单入口没有... 继续阅读 >

2020
10-10

vue-cli脚手架的.babelrc文件用法说明

虽然es6还没被浏览器全部支持，但是使用es6是大势所趋，所以babel应运而生将es6代码转换成浏览器能够识别的代码什么是.babelrc文件呢？熟悉linux的同学一定知道，rc结尾的文件通常代表运行时自动加载的文件，配置等等，类似bashrc,zshrc这个文件是用来设置转码的规则和插件vue-cli脚手架的.babelrc文件{//此项指明，转码的规则"presets":[//env项是借助插件babel-preset-env，下面这个配置说的是babel对es6,es7,es8进行转码... 继续阅读 >

2020
10-10

VUE : vue-cli中去掉路由中的井号#操作

vue-cli项目中，如果想去掉url地址栏中的“#”我们可以用路由的history模式，这种模式充分利用history.pushStateAPI来完成URL跳转而无须重新加载页面。只需要在路由表中，加入一行代码即可。补充知识：vue打包部署去掉#注意事项示例基于vuecli2.0脚手架生成的项目1.vue项目中config文件下index.js中打包配置：build:{//Templateforindex.htmlindex:path.resolve(__dirname,'../dist/index.html'),//Pathsasse... 继续阅读 >

2020
10-10

Vue-cli打包后如何本地查看的操作

Vue-cli打包成dist后默认是必须在http服务器环境下才能正常运行。可以在本地启动一个http-server服务查看，操作步骤如下：全局安装http-server：npminstall-ghttp-server进入dist根目录下cddist再输入指令：serve输出serve:Runningonport5000,即服务已经启动，端口号为5000。以其他的端口号启动：serve-p8090补充知识：vuecli3.0打包并在本地查看时页面空白问题根据以下命令对项目进行打包：npmrunbuild命令执行完出... 继续阅读 >

2020
10-10

vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作

更改build/utils.js文件中ExtractTextPlugin插件的options配置：if(options.extract){returnExtractTextPlugin.extract({use:loaders,publicPath:'../../',//注意配置这一部分，根据目录结构自由调整fallback:'vue-style-loader'})}else{return['vue-style-loader'].concat(loaders)}补充知识：webpack打包运行vue项目后找不到.ttf及.woff文件，或者路径报错webpack.base.config文件中,有的人可能在util... 继续阅读 >