vue
文章平均质量分 81
weixin_42232876
这个作者很懒,什么都没留下…
展开
-
vue中使用嵌套路由(history方式),刷新页面,出现白屏
vue中使用嵌套路由(history方式),刷新页面,出现白屏 路由配置: export default { routes: [{ path: "/", name:"Home",//使用别名意味着以后修改path时,不需要去页面中修改路径 component: () => import("@/views/Home"), }, { path: "/channel/:id", name: "ChannelNews",原创 2020-09-12 13:56:58 · 1254 阅读 · 1 评论 -
使用vue-cli中遇到的问题
使用vue-cli脚手架遇到的问题 版本:@vue/cli 4.54 运行npm run build之后,打开dist文件夹下的index.html文件,出现以下错误 解决方法 新建一个vue.config.js文件 module.exports = { publicPath: './' }原创 2020-09-08 20:28:19 · 100 阅读 · 0 评论 -
todo列表实例
vue官方文档上的小实例 v-on:submit.prevent=“addNewTodo”,指在该表单中的任何提交按钮都可以触发该事件 is=“todo-item” attribute。这种做法在使用 DOM 模板时是十分必要的,因为在 ul元素内只有 li元素会被看作有效内容。这样做实现的效果与 todo-item相同,但是可以避开一些潜在的浏览器解析错误。 vm.$emit( event, arg ) //触发当前实例上的事件 <!DOCTYPE html> <html lang=原创 2020-08-30 22:03:45 · 372 阅读 · 0 评论 -
vue指令动态参数issue
vue指令动态参数 <div id="app"> <!-- 动态参数 --> <a v-bind:[attributeName]='url'>...</a> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> const vm=new Vue({ el:'#app',原创 2020-08-29 21:56:08 · 439 阅读 · 2 评论 -
箭头函数
箭头函数 ES6中允许使用箭头=>定义函数 let f = v => v; //等同于 let f = function (v) { return v; } function foo(a, b) { return a + b + '10' } //等同于 let foo = (a, b) => a + b + '10' // 一个参数 let add = value => value; // 两个参数 let add = (value, value2) => valu原创 2020-07-02 16:35:52 · 111 阅读 · 0 评论 -
vue基础
vue介绍 什么是vue vue是一个前端开发框架,用于降低UI复杂度 vue的特点 渐进性 响应性 组件化 环境配置 node.js 官网 https://nodejs.org/zh-cn/ 检查是否安装成功 node --version 配置淘宝镜像 npm包的服务器在国外,下载速度会很慢,配置淘宝镜像(国内) 终端中输入 npm config set registry https://registry.npm.taobao.org 检查是否配置成功 npm config原创 2021-03-20 16:59:09 · 52 阅读 · 0 评论 -
vue项目上线相关配置(node.js)
通过node创建web服务器 // 安装express npm i express const express = require('express') const app = express() // 托管打包后的静态资源 app.use(express.static('./dist')) app.listen(80, () => { console.log('server running in http://127.0.0.1:80') }) 开启gzip配置 // 安装插件compr原创 2020-11-03 22:36:27 · 119 阅读 · 0 评论 -
vue项目优化(首页内容定制)
首页内容定制 不同的打包环境下,首页内容可能会有所不同。我们可以通过插件的方式进行定制。 vue.config.js module.exports = { // 修改webpack默认打包入口 chainWebpack: config => { // 生产模式(发布模式) config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add(原创 2020-11-03 22:08:01 · 217 阅读 · 0 评论 -
vue项目优化(通过externals加载外部CDN资源)
在发布模式下,使用externals配置项,可以使所配置的插件不会被打包进js文件中,同时我们需要在public/index.html文件的头部,添加这些未被打包的CDN资源引用 vue.config.js module.exports = { // 修改webpack默认打包入口 chainWebpack: config => { // 生产模式(发布模式) config.when(process.env.NODE_ENV === 'production', config =原创 2020-11-03 21:56:24 · 669 阅读 · 1 评论 -
vue插槽
vue插槽 推荐下面的一篇文章,条理很清晰。 https://juejin.im/post/6844903969643298829原创 2020-10-12 15:24:37 · 42 阅读 · 0 评论 -
vue项目优化(配置webpack,为开发模式与发布模式(生产模式)指定不同的打包入口)
为开发模式与发布模式(生产模式)指定不同的打包入口 默认情况下,Vue项目的开发模式与发布模式,共用同一个打包的入口文件(即src/main.js)。 为了将项目的开发过程与发布过程分离,我们可以为两种模式,各自指定打包的入口文件,即: 1.开发模式的入口文件为src/main-dev.js 2.发布模式的入口文件为src/main-prod.js 通过chainWebpack来自定义webpack的打包配置(链式编程) 通过vue-cli3.0工具生成的项目,默认隐藏了所有的webpack的配置项 通过配原创 2020-11-03 21:36:50 · 1033 阅读 · 0 评论 -
vue项目优化(移除console)
在执行build期间,移除所有的console 安装开发依赖 npm install babel-plugin-transform-remove-console --save-dev 配置babel.config.js // 这是项目发布阶段需要用到的babel插件 const prodPlugins = [] // 判断,在生产模式下,去除console if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-原创 2020-11-03 21:18:20 · 265 阅读 · 0 评论