Vue CLI

推荐插件： babel-plugin-transform-remove-console Install： npm install babel-plugin-transform-remove-console --save-dev 通过 .babelrc （推荐） vue-cli3.0/babel.config.js中定义 plugins：[] // without options 这个就可以 { "plugins": ["transform-remove-console"] } // with options { "plugins": [ ["transform-remove-console", { "exclude": [ "error", "warn"] }] ] } module.exports = { 'presets': [ '@vue/app' ], 'plugins': [ [ 'component', { 'libraryName': 'element-ui', 'styleLibraryName': 'theme-chalk' } ], transform-remove-console ] } 如果只想在发布阶段生效，开发阶段不生效，需要判断： // 项目开发阶段用到的babel插件 const prodPlugins = [] if (process.env

富文本编辑器里大佬们都说tinymce NB！ 插件安装 inymce官方提供了一个vue的组件tinymce-vue 如果有注册或购买过服务的话，直接通过组件配置api-key直接使用，懒的注册或者购买的直接下载tinymce 安装tinymce npm install tinymce -S 安装tinymce-vue npm install @tinymce/tinymce-vue -S package.json "@tinymce/tinymce-vue": "^2.1.0", "tinymce": "^5.0.11", 下载中文语言包 tinymce提供了很多的语言包，这里我们下载中文语言包 地址： https://www.tiny.cloud/get-tiny/language-packages/ 下载完后放到静态文件public目录下 1、在public目录下新建tinymce，将上面下载的语言包解压到该目录 2、在node_modules里面找到tinymce,将skins目录复制到public/tinymce里面 tinymce使用 封装成组件 <template> <div class="tinymce-box"> <editor v-model="myValue" :init="init" :disabled="disabled" @onClick=

1.vue-cli创建工程的两种方法 全局安装vue-cli工具的命令：npm install -g @vue/cli，-g表示全局安装。 创建vue工程：首先需要进入到创建工程的目录 创建vue工程命令：vue create 项目名（小写字母、可以有横线和下划线） 回车后，会出现vue-cli的一些选项，如果使用default就会创建默认的工程，第二个则是手动 当我们选择了默认的cli配置后等待安装 2.TodoList开发 2.1 Vuex简介 使用vuex，首先定义一个store这样的js文件，在文件中引入vuex state: 组件的状态（需要管理的或者组件公用的） mutations: 定义改变状态的方法集，用来操作state里面的数据（只能通过mutation更Store数据，不可以直接操作Store中的数据） actions: action 提交的是 mutation，而不是直接变更状态。可以包含任意异步操作 getters: getters相当于store的计算属性 import { createStore } from 'vuex' export default createStore ( { state : { todoList : [ ] } , mutations : { } , actions : { } , getters : { } } )

一 问题 通过 v-for 循环，无法看到页面图片。 <template> <div v-for="img in imgs"> <img width="100%" height="100%" ;src="img"> </div> </template> <script> export default { name:"Home.vue", data(){ return { imgs:[ '../img/1.jpg', '../img/2.jpg', '../img/3.jpg' ] } } } </script> 二 视频 https://www.bilibili.com/video/BV1YE411A746?p=54 三 说明 开发一个 vue 项目，标准步骤： 1 用 vue-cli 拉取一个项目骨架。 2 安装依赖。 3 使用 npm run dev 进入开发者模式。 此时在开发模式中，各种修改都能看到实时效果，这些内容实际上是由 vue-cli 进行打包并发布到 node.js 上的。最后开发完成以后，要上生产，这些资源是需要我们手动部署在生产的服务器上的。哪些资源是需要我们手动部署的，需要通过npm run build 命令来构建资源。 4 使用 npm run build 命令来构建资源。 会产生一个 dist 文件夹。里面包含静态资源。 在开发环境下，要想使用静态资源

node -v npm install -g @vue/cli-init 全局安装脚手架 vue -V vue init webpack projectName FR:徐海涛（hunk Xu) 来源： oschina 链接： https://my.oschina.net/u/4309507/blog/4559446

本文首发于 vivo互联网技术 微信公众号 链接： https://mp.weixin.qq.com/s/Rl8XLUX7isjXNUmbw0-wow 作者：ZhuPing 现如今 Vue 作为主流的前端框架之一，其健全的配套工具，活跃的开源社区，让广发码农热衷追捧。Vue CLI 作为其官方的开发构建工具，目前已更新迭代到 4.x 版本，其内部集成了日常开发用到的打包压缩等功能，简化了常规自己动手配置 webpack 的烦恼。另外提供的插件功能更是满足了使用者定制化的需求场景，那么本文就来讲下如何去开发一个插件。 假设我们团队现在需要去开发一套 UI 组件库，由于团队内每个人的编码习惯不一样，可能会出现单一组件命名、目录结构等不统一的问题，对于团队统一对外呈现的组件库来说，这当然不是一件好事。那有什么办法可以去约束团队成员统一风格呢？这里我们就可以开发一个组件插件来解决这些烦恼，那么我们来看下如何来开发这个组件插件呢？ 一、命名规范 为了让一个 CLI 插件能够被其他开发者使用，官方介绍了必须遵循 vue-cli-plugin-<name> 的命名约定，所以这里我们命名为 vue-cli-plugin-next-component。 mkdir vue-cli-plugin-next-component && cd $_ 对于官方自己的插件，都是以 @vue/cli-plugin

This is a step by step Vue.JS and Firebase tutorial, In this tutorial we are going to explain how to integrate Cloud Firestore database in Vue application using the VueFire package. The Cloud Firestore helps storing and syncing data in realtime across all connected devices. We will use the VueFire package to take advantage of Firebase. It makes our development work, even simpler by providing direct access to Firebase objects. The Vuefire offers logical solutions to create real-time bindings between a Firebase RTDB or a Firebase Cloud Firestore and your Vue application. It always keeps your

自我介绍 对工程化的理解 vue-cli3的理解，与之前的版本有哪些不同，好处有哪些 vue-router的history和哈希方式 webpack相关 ES6新特性 文字在一个盒子水平居中的方式哪几种 解决异步的方式有哪些 Promise链式调用 实现一下a.b.c这样的调用方式 css预处理用过吗 如果给你一个数字，比如12473，怎样输出他的中文读法，（一万两千四百七十三） 平时怎么学习前端 看过那些书 今后的学习规划 大概是这些 。。。 来源： oschina 链接： https://my.oschina.net/u/4406332/blog/4513887

方法1、如果你用的 vue-cli 3.0 ,可以使用 环境变量。具体的自己去看文档。 方法2、简单办法就是： 后端肯定是有个具体的域名地址给你的 http://xxxx.com/ let host = "后端的地址" getImageList() { getImageList().then(response => { // 这里 data ，你遍历一下。 response.data = response.data.map((item,index)=>{ item.src = host + item.src return item }) this.imageList=response.data; }); }, 数据库存放的相对路径加域名地址，就是图片完整路径了；如果图片存webapi项目下，就是webapi的IP端口号，或者域名；如果是单独的图片服务器，那就是图片服务器的域名； 来源： oschina 链接： https://my.oschina.net/u/4368807/blog/4297866

1.根目录下创建.env文件，里面可以用key=value的形式设置全局变量 2.全局变量的名字也就是key必须以VUE_APP_*的格式命名，也就是以VUE_APP_作为开头，例如VUE_APP_RESOURCE_URL。 3.如果要配置根据不同环境引入静态资源的url不同，则需要在根目录下创建两个以.env.开头的文件，示例 开发环境.env.dev文件 生产环境.env.prod 4.在package.json中配置命令 5.这样就可以在index.html中使用全局变量 采坑：（因为配置的全局变量也是在网上找的，不知道用途，所以就造成了以下错误~） VUE_CLI_BABEL_TRANSPILE_MODULES = false/true 在.env.dev中使用了这个变量之后，执行命令npm run dev，引入的elementUI部分组件一直报错，好像是按需加载的模式 删掉之后神奇的没有报错了，不知道什么原因，希望有大佬帮忙解答，感谢！！！ 来源： oschina 链接： https://my.oschina.net/u/3850274/blog/4290519