cli3专题

安装cli3并创建项目

安装cli3并创建项目

1.设置淘宝镜像，加快下载速度  npm config set registry http://registry.npm.taobao.org 2.安装cnpm，cnpm安装下载速度比npm快，推荐使用  npm install -g cnpm --registry=https://registry.npm.taobao.org 3.安装cli  安装cli时最好使用：npm insta
阅读更多...
vue-cli3项目，在页面上输出当时打包的时间

vue-cli3项目，在页面上输出当时打包的时间

最近在用vue3项目写移动端，会遇到奇奇怪怪的问题，但是很多情况都是部分用户手机的缓存问题，一般为了判断客户端是否最新，都会在页面上输出一些当时版本修改的字符串来判断。 我目前想到的是写一个打包时间。以下是实现关键代码 ./public/index.html <script>window.versionTime = parseInt('<%=new Date().getTime()%>'
阅读更多...
vue-cli3，history模式，在nginx上部署

vue-cli3，history模式，在nginx上部署

nginx部署上会有很多问题，不建议一步到位，本次主要配置的是vue路由history模式的部署。 若出现问题，先保证使用hash模式正常先。 然后在location 里面加上如下代码 try_files $uri $uri/ /index.html; 我的最终效果： location / {root /usr/share/nginx/web/xxx.com;try_files
阅读更多...
vue-cli3 ， elementui ，typescript ，使用monaco-editor

vue-cli3 ， elementui ，typescript ，使用monaco-editor

npm install monaco-editor -S 封装了一个组件   // \src\components\MonacoEditor.vue<template><div ref="container" class="app-monaco"></div></template><script lang="ts">import { Component, Prop, Vue, Watc
阅读更多...
vue-cli2，vue-cli3，vite 生产环境去掉console.log

vue-cli2，vue-cli3，vite 生产环境去掉console.log

console.log一般都是在开发环境下使用的，在生产环境下需要去除 ，如果手动删除未免也太累了，我们可以用插件对于具体环境全局处理。  vue-cli2 项目build 下面webpack.prod.config.js 文件中: plugins: [new webpack.DefinePlugin({'process.env': env}),new UglifyJsPlugin(
阅读更多...
vue-cli3多环境打包配置

vue-cli3多环境打包配置

最近下载了vue-cli3,研究了下vue-cli3下多环境的配置。 首先，安装vue-cli3。 npm install -g @vue/cli 安装好之后的项目是这样的，见下图： 相比较vue-cli2的项目，缺少了build和config目录，另外static目录也没了，多了个public目录。 配置文件需要自己写一个vue.config.js,可以参考官方文档文档写，网址 https:/
阅读更多...
Vue-cli3集成视频流媒体播放器EasyPlayer.JS报EasyPlayer.swf Not Found错误如何解决？

Vue-cli3集成视频流媒体播放器EasyPlayer.JS报EasyPlayer.swf Not Found错误如何解决？

在Vue-cli3项目引入网页视频流媒体播放器EasyPlayer.JS一文中，我们解决了videojs报错的问题，除了videojs报错之外，还有一个问题，我们本文就来说一下。 Vue-cli3多页面项目集成EasyPlayer.JS报EasyPlayer.swf Not Found错误 提出问题 Vue-cli3多页面项目集成EasyPlayer.JS打包后，可以看到页面一播放RTMP正
阅读更多...
Vue-cli3项目引入网页视频流媒体播放器EasyPlayer.JS报videojs not definde错误如何解决？

Vue-cli3项目引入网页视频流媒体播放器EasyPlayer.JS报videojs not definde错误如何解决？

视频流媒体播放器EasyPlayer几乎涵盖了开发者所需的全部平台，尤其是在web端的EasyPlayer.js，极大地方便了开发者在解决B/S型业务开发时遇到的播放器接入的问题，比如：不懂前端的js代码、没有公网服务器放置这些js脚本和网页、微信对接入IP播放地址有限制等，不论是测试，还是被集成，都很方便。 近期我们为了测试EasyPlayer.js不同的可能性，将EasyPlayer.j
阅读更多...
Vue配置多页面，多入口【vue-cli3 配置登陆页面】

Vue配置多页面，多入口【vue-cli3 配置登陆页面】

很久之前就想去配置一个非单页面的登陆页面，一直到今天才完成 我将给出最简单的代码，完成最基本的配置。需要更强的功能自己去加上 效果如下 第一步：创建登陆页面的文件 1-1：login.html <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-C
阅读更多...
vue 不同环境打包指令的配置（vue-cli2、vue-cli3、vite）

vue 不同环境打包指令的配置（vue-cli2、vue-cli3、vite）

一个项目可能会有开发版本、上线版本、测试版本等等多个版本，不同的环境会有不同请求api接口，就需更改一些基本配置，这时候为不同环境配置不同的打包指令就很必要。 一、vue-cli2 1、安装 cross-env，它可以处理 windows 和其他 Unix 系统在设置环境变量的写法上不一致的问题。 npm i --save-dev cross-env 2、配置不同环境下的文件和参数，在 c
阅读更多...
记一次vue-cli3下filemanager-webpack-plugin的报错和解决

记一次vue-cli3下filemanager-webpack-plugin的报错和解决

//2022-01-05 更新 1）插件出新版本了，需要注意一些配置项字段差异。 2）有朋友指出了一个更好的方法。可以参见评论区 前言 附上一篇filemanager-webpack-plugin插件的使用方法：vue-cli@3.0 直接打包成zip压缩文件 因为对之前项目进行再次开发时，遇到了太多因维护引起的问题（满满的心智负担，导致San值严重下降。。( ′Д`)）。 所以想尝试一
阅读更多...
vue-cli3安装使用

vue-cli3安装使用

Vue-cli 3安装及使用 vue-cli安装vue-cli创建项目自定义脚手架vue-cli3.0添加插件方法全局变量的使用vue-cli3.0独立运行.vue文件vue项目管理器vue-cli3.0配置基础的路径 vue-cli安装 使用下面的命令安装vue-cli3 npm install -g @vue/cli# ORyarn global add @vue/cl
阅读更多...
npm插件开发(基于vue-cli3.x)

npm插件开发(基于vue-cli3.x)

更新于：2019-11-07 基于vue-cli3.x的npm插件开发 创建项目调整目录配置项目以支持新的目录结构重新配置入口，修改配置中的 pages 选项 编写组件导出组件将packages中的所有组件导出 在项目中引入组件配置编译package.js 中新增一条编译为库的命令执行编译库命令配置 package.json 文件中发布到 npm 的字段 发布包名类似，拒绝发布使用作用域添加
阅读更多...
vue-cli3 使用 svg-sprite-loader 的坑

vue-cli3 使用 svg-sprite-loader 的坑

vue-cli3 使用 svg-sprite-loader 的坑 chainWebpack: config => {config.module.rules.delete("svg"); //重点:删除默认配置中处理svg,//const svgRule = config.module.rule('svg')//svgRule.uses.clear() config.mod
阅读更多...
vue项目（vue-cli3搭建的）每次启动端口都会增加1的问题

vue项目（vue-cli3搭建的）每次启动端口都会增加1的问题

最近发现我的项目（vue-cli3搭建）每次重新执行 npm run serve 启动端口都会自增1，查了网上的原因才发现原来端口被占用了，原来的服务没有真正的被关闭，解决方法： 执行 netstat -aon|findstr “8080” 查看端口是否被占用 如果被占用说明服务没有真正被关闭 或： 执行 netstat -aon|findstr “9999” 查看端口是否被占用 如果被占
阅读更多...
VUE CLI3项目搭建 ESLint配置

VUE CLI3项目搭建 ESLint配置

VUE项目框架配置 一、工具准备 Node.js安装 安装方法：点击查看WebStorm安装 下载地址：点击查看 二、环境准备 镜像准备 1.查看代理：npm get registry 2.设置淘宝镜像 2.1临时使用. npm --registry https://registry.npm.taobao.org install express 2.2持久使用. npm config
阅读更多...
vue-cli3 安装prettier进行代码自动格式化

vue-cli3 安装prettier进行代码自动格式化

1、安装prettier npm i --save-dev prettier 2、在文件根目录下新建.prettierrc.js，配置项为： module.exports = {// 代码结尾是否加分号semi: false,// 是否使用单引号singleQuote: true,// 对象大括号内两边是否加空格 { a:0 }bracketSpacing: true,// 单个参数的箭头
阅读更多...
vue cli3 微信获取地理位置 逆地址解析

vue cli3 微信获取地理位置 逆地址解析

一、index.html 引入js http://res.wx.qq.com/open/js/jweixin-1.2.0.js 二、通过config接口注入权限验证配置，通过wx.getLocation获得经纬度（后台返回签名信息） mapFun() {var that = this,url = window.location.href,appId = that.appId;that.$ht
阅读更多...
vue cli3 百度地图定位

vue cli3 百度地图定位

一、index.html   引入js <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的key"></script> 二、vue.config.js中添加 BMap module.exports = {configureWebpack: {externals: {"BMap": "BM
阅读更多...
vue-cli3 svg-sprite-loader不显示icon

vue-cli3 svg-sprite-loader不显示icon

按照网上的教程，一步步下来，icon死活不显示，后来改了下；终于能正常显示了。 后来发现在保存的时候，vscode格式化工具把 :xlink:href前面的：给去掉了。。。??? 主要是改了下面的代码： // 在IconSvg.vue 加了v-bind(:)<use :xlink:href="iconName"></use> 下面是各个文件 vue.config.js c
阅读更多...
Vue3各种方式项目搭建npm、cnpm、pnpm、cli3\vite、VSCode软件安装汉化中文课件教程

Vue3各种方式项目搭建npm、cnpm、pnpm、cli3\vite、VSCode软件安装汉化中文课件教程

@TOC 第03节 VUE3环境搭建 [教学内容] (一)环境搭建 A、传统安装 1、下载源码 如果仅仅只是在项目或者某个文件中简单的使用vue，就可以直接在html中引入如下链接 <script src="https://unpkg.com/vue@next"></script> 可以复制上面的地址到浏览器打开源代码，并复制全部源代码，保存为本地文件js文件，加入到项目中就可以
阅读更多...
vue-cli3 的 [Vue warn]: You are using the runtime-only build of Vue where the template compiler 的问题解决

vue-cli3 的 [Vue warn]: You are using the runtime-only build of Vue where the template compiler 的问题解决

最近使用vue-cli3的脚手架生成项目，发现从配置完后vue-router的出现一个错误， [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render funct
阅读更多...
vue-cli3 建项vue目

vue-cli3 建项vue目

一.安装vue-cli3 1.卸载原来的 npm uninstall vue-cli -g 2.安装新的 npm install @vue/cli -g 或 npm install -g @vue/cli 3.用这个命令来检查其版本是否正确 .vue -V 二、.在新文件夹下创建项目 vue create new-travel 1.自己切换到自己到目录下，新建项目，vue create 项目名;
阅读更多...
VUE CLI3 路径别名配置

VUE CLI3 路径别名配置

module.exports = {chainWebpack: config => {config.resolve.alias.set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components')).set('_c', resolve('src/components'))}}
阅读更多...
VUE CLI3 less 全局变量引用

VUE CLI3 less 全局变量引用

首先展示两个在网上广为流传的方法，我用了没有效果。。。当然估计很多人还是可以成功了 方法一 1、添加依赖   style-resources-loader 2、vue.config.js中添加 module.exports = {pluginOptions: {'style-resources-loader': {preProcessor: 'less',patterns: [],},},
阅读更多...
Vue/cli2 || /cli3部署上线清理浏览器缓存

Vue/cli2 || /cli3部署上线清理浏览器缓存

问题描述：项目(vue /cli2 || vue /cli3) 部署上线用浏览器打开后依旧是上一个版本 问题原因：浏览器的缓存机制（分为强缓存和协商缓存） 强缓存：不在客户端存储资源，始终去原始服务器获取资源 协商缓存：向后端发起请求，看服务器资源是否更新，如果没有更新就返回304，如果更新了就返回200 no-cache 和 no-store 都是 HTTP 协议头 Cache-Control
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2