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 · 1246 阅读 · 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 · 98 阅读 · 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 · 364 阅读 · 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 · 434 阅读 · 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 · 108 阅读 · 0 评论 -
vue基础
vue介绍什么是vuevue是一个前端开发框架,用于降低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 · 47 阅读 · 0 评论 -
vue项目上线相关配置(node.js)
通过node创建web服务器// 安装expressnpm i expressconst 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 · 117 阅读 · 0 评论 -
vue项目优化(首页内容定制)
首页内容定制不同的打包环境下,首页内容可能会有所不同。我们可以通过插件的方式进行定制。vue.config.jsmodule.exports = { // 修改webpack默认打包入口 chainWebpack: config => { // 生产模式(发布模式) config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add(原创 2020-11-03 22:08:01 · 214 阅读 · 0 评论 -
vue项目优化(通过externals加载外部CDN资源)
在发布模式下,使用externals配置项,可以使所配置的插件不会被打包进js文件中,同时我们需要在public/index.html文件的头部,添加这些未被打包的CDN资源引用vue.config.jsmodule.exports = { // 修改webpack默认打包入口 chainWebpack: config => { // 生产模式(发布模式) config.when(process.env.NODE_ENV === 'production', config =原创 2020-11-03 21:56:24 · 663 阅读 · 1 评论 -
vue插槽
vue插槽推荐下面的一篇文章,条理很清晰。https://juejin.im/post/6844903969643298829原创 2020-10-12 15:24:37 · 36 阅读 · 0 评论 -
vue项目优化(配置webpack,为开发模式与发布模式(生产模式)指定不同的打包入口)
为开发模式与发布模式(生产模式)指定不同的打包入口默认情况下,Vue项目的开发模式与发布模式,共用同一个打包的入口文件(即src/main.js)。为了将项目的开发过程与发布过程分离,我们可以为两种模式,各自指定打包的入口文件,即:1.开发模式的入口文件为src/main-dev.js2.发布模式的入口文件为src/main-prod.js通过chainWebpack来自定义webpack的打包配置(链式编程)通过vue-cli3.0工具生成的项目,默认隐藏了所有的webpack的配置项通过配原创 2020-11-03 21:36:50 · 1027 阅读 · 0 评论 -
vue项目优化(移除console)
在执行build期间,移除所有的console安装开发依赖npm install babel-plugin-transform-remove-console --save-dev配置babel.config.js// 这是项目发布阶段需要用到的babel插件const prodPlugins = []// 判断,在生产模式下,去除consoleif (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-原创 2020-11-03 21:18:20 · 258 阅读 · 0 评论