Vue CLI | 易学教程

vue小技巧

阅读更多关于 vue小技巧

vue create 和 vue init的区别 vue init <template> <dir> 可以根据模版创建项目，可供选择的模版有 browserify browserify-simple simple webpack webpack-simple 使用 vue init webpack-simple demo 可以创建一个webpack打包的项目使用 vue create <dir> 可以创建出vue-cli官方打包的项目插件的写法定义、安装调用 Mixin的使用定义使用不使用Vuex ，手写state的写法构造state数据编写state插件引入state 使用state filters写法定义注册来源： oschina 链接： https://my.oschina.net/lilugirl2005/blog/3219467

【chrome插件教程】使用vue开发chrome插件

阅读更多关于【chrome插件教程】使用vue开发chrome插件

3 月，跳不动了？>>> 第一步：建立清单manifest.json文件（具体配置根据自己的来） { "manifest_version": 2, "name":"京东图书排名榜", "description":"获取京东图书排名插件", "version":"1.0.0", "permissions":[ "https://www.jd.com/" ], "icons":{ "16": "img/icon.png", "48": "img/icon.png", "128": "img/icon.png" }, "browser_action":{ "default_icon":"img/icon.png", "default_popup":"popup.html", "default_title":"京东编程图书排名" }, "homepage_url": "https://www.jd.com/" } 第二步：用vue-cli3建立一个新的vue项目第三步：把清单和清单配置中的文件复制到新项目的public目录下。第四步：配置vue项目的indexPath选项值为popup.html 第五步：开发项目，然后打包，把生成的文件拖拉到 chrome://extensions/ 界面去。这样就ok了。来源： oschina 链接： https://my.oschina.net

vue-cli 如何打包上线的方法示例

阅读更多关于 vue-cli 如何打包上线的方法示例

vue-cli 如何打包上线的方法示例以vue创建的官方例子为例子，我们在开发环境的时候会 npm run dev ，生成而想要打包成一份很简单，只需要 npm run build 这个命令这两种命令的配置文件在config的index.js 一种是build 一种是dev ，而我们想要在本地查看打包后的成果，需要在assetsPublicPath 改变它的路径，具体为什么，可以看index.html引入的文件路径之后只需要放在服务器上运行就好了。 *常用技巧 1.如果在config -> index.js 中的 build 代码中的 productionSourceMap的值设为false ，打包后文件体积可以减少百分之八十 2.如果设置build文件夹下的webpack.prod.conf.js中HtmlWebpackPlugin插件配置参数添加hash: true，即会使打包生成的index.html中的js和css路径带有？+随机字符串，也就是版本控制以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。您可能感兴趣的文章: 详解vue项目打包后通过百度的BAE发布到网上的流程 vue.js项目打包上线的图文教程 vue 打包后的文件部署到express服务器上的方法浅谈vue项目如何打包扔向服务器文章同步发布： https:/

这里简单罗列vue,config.js一些配置项【vue3】

阅读更多关于这里简单罗列vue,config.js一些配置项【vue3】

https://cli.vuejs.org/zh/config/#vue-config-js // vue.config.js 配置说明 // 这里只列一部分，具体配置惨考文档啊 module.exports = { // baseUrl type:{string} default:'/' // 将部署应用程序的基本URL // 将部署应用程序的基本URL。 // 默认情况下，Vue CLI假设您的应用程序将部署在域的根目录下。 // https://www.my-app.com/。如果应用程序部署在子路径上，则需要使用此选项指定子路径。例如，如果您的应用程序部署在https://www.foobar.com/my-app/，集baseUrl到'/my-app/'. baseUrl: process.env.NODE_ENV === 'production' ? '/online/' : '/', // lintOnSave：{ type:Boolean default:true } 问你是否使用eslint lintOnSave: true, // 如果您不需要生产时的源映射，那么将此设置为false可以加速生产构建 productionSourceMap: false, // devServer:{type:Object} 3个属性host,port,https //

vue build后。静态资源的404问题探究，解决

阅读更多关于 vue build后。静态资源的404问题探究，解决

vue-cli升级到3.0，build项目后，传到服务器，页面显示空白具体原因是静态资源的路径跟服务器的不匹配修改方法，打开文件：vue.config.js，加入下面内容 baseUrl: '/pet-mgr/' , 将dist文件夹上传到服务器的根目录后，将dist文件夹重命名为pet-mgr就可以了来源： oschina 链接： https://my.oschina.net/u/222749/blog/2252471

封装Vue组件并发布到npm上

阅读更多关于封装Vue组件并发布到npm上

一、构建一个vue项目 vue create hello-world 1.创建组件在src/components/JudyButton.vue 组件内容： <template> <div> <button :class="type == 'Default'?'btn default':type == 'primary'?'btn primary':type == 'danger'?'btn danger':'btn default'" @click="confirm" > <slot></slot> </button> </div> </template> <script> export default { name:'judy-button', props:{ type:{ type:String, default:"Default" } }, methods:{ confirm(){ this.$emit("confirm") } } } </script> <style scoped> .btn{ width: 100px; height: 40px; color:#fff; text-align: center; line-height:40px; border: none; cursor: pointer; } .default{ background-color

vue移动端适配

阅读更多关于 vue移动端适配

1，先看看网上关于移动端适配讲解再聊移动端页面适配，rem和vw适配方案！基础点：rem相对根节点<html>字体的大小。所以不用px; 根字体：<html>字体的大小px; px ：你就当成cm(厘米)这样的东西吧；基准：750设计稿；这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！目标一、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不是想到了vw，对，就是这个意思；——最大程度在各个尺寸屏幕上还原设计稿目标二、px转换成rem：一般UI给的设计稿宽度大小是750，所以，我们想直接写上面UI标记的尺寸；——最大程度减少工作为什么选择rem? 很久之前没有vw，怕vw的兼容问题，就用了rem；也就是：rem的兼容性>vw的兼容性；还有一种就是自己写百分比很不优雅一、理论基础！实现目标一用rem就可以了吧！因为rem就可以随根字体大小改变而改变，从而实现了自适应的功能。但是，但是，重点来，如果，根字体的大小默认是16px；那么，我们的1rem；就永远是16px，懂么？也就是如果设计稿是750（放大了一倍，iphone是375pt),我们想要个50%的大小: 50%*357px/16=11.718rem 如果我们写一个11.718rem的宽度

将vue项目打包后部署到github pages

阅读更多关于将vue项目打包后部署到github pages

我用的新版本的（@vue/cli）Vue CLI 3 。首先前往 github 官网 , 点击 New repository 创建新项目. 填入项目基本信息, 点击 Create Repository 确认.然后clone到本地，使用如下命令创建项目 vue create hello-world 创建好新项目之后，在跟目录新建 vue.config.js ，并添加以下内容（这是重点） module.exports = { publicPath: './', outputDir: 'docs' } 注：publicPath 加点是修改路径，预防js，css等加载不到的问题，outputDir 修改是为了能在github pages展示同时不影响vue cli创建的项目目录结构。然后运行打包命令 npm run build 将项目push到github。为项目（ repository）开启 github page 选项，在要展示的项目首页（路径：username/repositoryName）点击 Setting ，向下滚动找到 GitHub Pages 选项, 将 Source 改为 master branch /docs folder , 最后点击 Save 按钮。（选择 master branch /docs folder契合了前面的 outputDir 打包配置）

记录升级vue，出现的问题，升级node版本

阅读更多关于记录升级vue，出现的问题，升级node版本

记录升级vue，出现的问题，升级node版本关于旧版本 Vue CLI 的包名称由 vue-cli 改成了 @vue/cli 。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。来源： oschina 链接： https://my.oschina.net/u/3498797/blog/3156133

Vue实战之【企业开发常见问题】

阅读更多关于 Vue实战之【企业开发常见问题】

1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新问题描述：遇到动态路由如：/page/:id 从/page/1 切换到 /page/2 发现页面组件没有更新解决方式1：给<router-view :key="key">增加一个不同:key值，这样vue就会识别这是不同的了。 <router-view :key="key"></router-view> ... computed:{ key(){ return this.$route.path + Math.random(); } } 解决方案2: 在组件内使用v2.2新增的beforeRouteUpdate beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 `this` }, 1.2 vue组件里定时器销毁问题** 问题描述：在a页面写一个定时器，每秒钟打印一次，然后跳转到b页面，此时可以看到，定时器依然在执行。推荐的解决方式：通过

订阅 Vue CLI