![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
青崖林夕
脚踏实地,仰望星空!
展开
-
el-form 多重表单验证
el-form 多重表单验证原创 2023-01-16 11:26:17 · 477 阅读 · 0 评论 -
vue 时间戳转日期
filters: { formatDate: function (date) { var d = new Date(date); var year = d.getFullYear(); var getMonth = d.getMonth() + 1; var month = getMonth < 10 ? '0' + getMonth : '' + getMonth; var day = d.getDate() .原创 2021-10-13 16:43:51 · 195 阅读 · 0 评论 -
【11】Vuex 状态树
Vuex 状态树对于每个大项目来说,使用状态树 (store) 管理状态 (state) 十分有必要。这就是为什么 Nuxt.js 内核实现了Vuex。在Vue School 上观看关于Nuxt.js 和 Vuex的免费课程使用状态树Nuxt.js 会尝试找到应用根目录下的store目录,如果该目录存在,它将做以下的事情:引用vuex模块 将vuex模块 ...原创 2019-11-19 14:27:09 · 368 阅读 · 0 评论 -
【10】Nuxt.js 模块
模块模块是Nuxt.js扩展,可以扩展其核心功能并添加无限的集成。介绍在使用Nuxt开发应用程序时,您很快就会发现框架的核心功能还不够。 Nuxt可以使用配置选项和插件进行扩展,但是在多个项目中维护这些自定义是繁琐、重复和耗时的。 另一方面,开箱即用支持每个项目的需求将使Nuxt非常复杂且难以使用。这就是Nuxt提供更高阶模块系统的原因,可以轻松扩展核心。 模块只是在引导Nux...原创 2019-11-15 17:44:53 · 883 阅读 · 0 评论 -
【9】Nuxt.js 资源文件
插件Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。需要注意的是,在任何 Vue 组件的生命周期内, 只有beforeCreate和created这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用。使用第三方模块我们可以在应用中使用第三方模块,一个典型的例子是在客户端和服务端使用axio...原创 2019-11-15 17:44:36 · 199 阅读 · 0 评论 -
【8】Nuxt.js 资源文件
资源文件默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件,可以放置在static目录中。Webpack 构建默认情况下,vue-loader自动使用css-loader和Vue模板编译器来编译处理vue文件中的样式和模...原创 2019-11-15 17:44:29 · 457 阅读 · 0 评论 -
【7】Nuxt.js 异步数据
Nuxt.js 扩展了 Vue.js,增加了一个叫asyncData的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData 方法asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候,第一个参数被设定为当前页面的上下文对象,你可以利用asyncData方法来获取数据,Nuxt.js ...原创 2019-11-15 17:44:21 · 643 阅读 · 0 评论 -
【6】Nuxt.js 视图
视图本章节的内容阐述了如何在 Nuxt.js 应用中为指定的路由配置数据和视图,包括应用模板、页面、布局和HTML头部等内容。模板你可以定制化 Nuxt.js 默认的应用模板。定制化默认的 html 模板,只需要在应用根目录下创建一个app.html的文件。默认模板为:<!DOCTYPE html><html {{ HTML_ATTRS...原创 2019-11-15 17:44:12 · 364 阅读 · 0 评论 -
【5】Nuxt.js 路由
路由Nuxt.js 依据pages目录结构自动生成vue-router模块的路由配置。要在页面之间使用路由,我们建议使用<nuxt-link>标签。例如:<template> <nuxt-link to="/">首页</nuxt-link></template>基础路由假设pages的目录...原创 2019-11-15 17:44:05 · 621 阅读 · 0 评论 -
【4】Nuxt.js 配置
配置Nuxt.js 默认的配置涵盖了大部分使用情形,可通过 nuxt.config.js 来覆盖默认的配置。buildNuxt.js 允许你在自动生成的vendor.bundle.js文件中添加一些模块,以减少应用 bundle 的体积。如果你的应用依赖第三方模块,这个配置项是十分实用的。关于 build 配置项的详细文档css该配置项用于定义应用的全局(所有页面均...原创 2019-11-15 17:43:58 · 293 阅读 · 0 评论 -
【3】项目目录结构
目录结构Nuxt.js 的默认应用目录架构提供了良好的代码分层结构,适用于开发或大或小的应用。 当然,你也可以根据自己的偏好组织应用代码。观看有关Vue School上Nuxt.js目录结构的免费课程目录资源目录资源目录assets用于组织未编译的静态资源如LESS、SASS或JavaScript。关于 assets 目录的更多信息组件目录组...原创 2019-11-14 10:12:07 · 142 阅读 · 0 评论 -
【2】安装
安装Nuxt.js 十分简单易用。一个简单的项目只需将nuxt添加为依赖组件即可。运行 create-nuxt-app为了快速入门,Nuxt.js团队创建了脚手架工具create-nuxt-app。确保安装了npx(npx在NPM版本5.2.0默认安装了):$ npx create-nuxt-app <项目名>或者用yarn :$ yarn c...原创 2019-11-14 10:12:01 · 204 阅读 · 0 评论 -
【1】介绍
关于 Nuxt.js2016 年 10 月 25 日,zeit.co背后的团队对外发布了Next.js,一个 React 的服务端渲染应用框架。几小时后,与 Next.js 异曲同工,一个基于Vue.js的服务端渲染应用框架应运而生,我们称之为:Nuxt.js。Nuxt.js 是什么?Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构...原创 2019-11-14 10:11:54 · 156 阅读 · 0 评论 -
Vue Cli3 项目配置
一、新建项目使用 vue-cli3 构建一个初始的Vue项目:Cli3 官方文档以下配置是我在项目中常用的,大家可自己斟酌是否需要使用!1、环境变量主要用于区分 开发、测试、正式环境的(1) 在根目录新建三个文件:.env.dev .env.test .env.prod(2) .env.dev写入NODE_ENV = 'development'VUE_APP_CUR...原创 2019-11-14 10:11:43 · 1068 阅读 · 0 评论 -
Vue Cli3 项目打包优化
一、新建项目使用 vue-cli3 构建一个初始的Vue项目:Cli3 官方文档因为使用了cli3,很多目录结构不见了,而相关配置是放在vue.config.js里面的,因此在根目录,新建一个vue.config.jsmodule.exports = {}二、正式优化1、将 productionSourceMap 设为 false(1) 在vue.config.js...原创 2019-11-14 10:11:28 · 1012 阅读 · 0 评论 -
vue-cli 3.x 搭建项目
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/一、安装 @vue/cli更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vue/cli如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x),首先需要使用以下命令卸载掉// 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装npm ...原创 2019-10-18 09:41:09 · 140 阅读 · 0 评论 -
Linux下Vue开发环境搭建(用npm安装node.js)
第一步:安装node.js [root@yang bin]# mkdir /usr/local/node #创建node目录 [root@yang bin]# cd /usr/local/node [root@yang bin]# wget https://nodejs.org/dist/v8.11.2/node-v8.11.2-linux-x64...原创 2019-11-07 09:31:14 · 699 阅读 · 0 评论 -
大前端服务器渲染 发布和部署 Vue + Nuxt(SSR) + Nginx
不知道大家在接触React或者Vue的时候,有没有思考过,这个框架到底是在哪里渲染的?其实现在流行的Ng、React和Vue等前端技术,都是属于浏览器渲染,最初设计的理念是为了减轻服务器压力,但是这个也是有弊端的,最主要的,比如首页加载过慢(因为第一次加载需要加载JS等资源,然后浏览器会根据JS绘画渲染页面,这个过程需要一定的时间)和不利于SEO的优化(百度等国内的网络蜘蛛不会爬异步加载的网站...原创 2019-08-13 14:48:05 · 570 阅读 · 0 评论 -
Nuxt.js服务端渲染入门
随着Vue使用率的持续上长,越来越多的页面都应用了浏览器渲染的方式,极大提升了前端的开发的质量和效率,但是也带来了首屏渲染慢、SEO不友好及其他一些问题。 基于Vue的SSR构架Nuxt.js很好的解决了这个问题,页面直出,前后端同构,不仅解决了首屏直出渲染、SEO等问题,在开发质量和效率也没有任何损失。一、Nuxt.js简介Nuxt.js是一个针对Vue的SSR框架,采用模块化的架构,简...原创 2019-08-13 14:54:42 · 3161 阅读 · 0 评论 -
Nuxt项目的部署
项目介绍项目中整合 vue + nuxt + axios + vuex + vue-router (nuxt 自带 vuex 和 vue-router),一个基于 Nuxt 的服务器端渲染 DemoPC端GitHub地址移动端GitHub地址一、PC端项目部署关于项目部署折腾了我好多时间,网上许多百度来的文档不适合我的项目,所以自己摸索着终于部署起来了,开心O(∩_∩)...原创 2019-08-13 16:15:18 · 2834 阅读 · 0 评论 -
nginx+pm2+vue+webpack发布项目
用pm2 来管理vue的部署,用nginx来做服务器反向代理。pm2是一个内置负载均衡的node进程管理器;nginx做反向代理的作用是隐藏vue服务的真实ip地址。通用的项目目录结构搭建pm2+vue因为pm2是基于服务来管理的,所以我们需要一个在webpack构建好的静态文件夹上(一般是dist/)搭建一个node服务,这里我们用express来搭建node服务。...原创 2019-08-13 17:13:56 · 1250 阅读 · 0 评论 -
NuxtJS服务端部署过程
第一步:安装node参考:nodejs安装过程第二步:打包项目文件参考:nuxt服务端渲染第三步:修改配置文件第四步:开启PM2进程守护,如果不开启那么关闭连接服务器之后npm start进程就关闭了,就无法访问五、运行结果如下:...原创 2019-08-13 18:18:30 · 1463 阅读 · 0 评论 -
nuxt.js部署vue应用到服务端过程
由于seo的需要,最近将项目移植道nuxt.js下采用ssr渲染移植完成后,一路顺畅,但是到了要部署到服务器端上时候,还是个头疼的问题,但最终还是顺利完成。现在记录一下部署中的过程。注:部署时候过程中,参考了下:https://segmentfault.com/a/11...一:搭建nginx+node+npm+pm2环境我们的nginx版本是 1.12node版本是v8.11...原创 2019-08-13 18:22:46 · 562 阅读 · 0 评论 -
基于edusoho平台部署Nuxt项目-搭建nginx+node+npm+pm2环境
一、搭建nginx+node+npm+pm2环境安装nginx,安装步骤省略。 安装node,安装步骤省略。 安装npm,安装步骤省略。 安装pm2,安装步骤省略。二、配置nginx代理监听3000端口在edusoho的nginx配置中,加上代理配置:location ~ ^/$ { proxy_pass http://localhost:3000;...原创 2019-08-13 18:53:56 · 379 阅读 · 0 评论 -
Vue服务端渲染和客户端渲染
一、前言 主要涉及: 1、什么是服务端渲染 2、什么是客户端渲染 3、两者的区别,以及什么场合使用二、主要内...原创 2019-08-09 18:23:36 · 2166 阅读 · 0 评论 -
Vue服务端渲染
一、前言 1、服务端渲染图解 2、简介服务端渲染 ...原创 2019-08-09 18:26:20 · 6528 阅读 · 0 评论 -
Nuxt创建项目
## Nuxt.js project## Build Setup# 全局环境:# 安装vue-clinpm install vue-cli -g# 切换到项目根目录下:# vue 初始化vue init nuxt/starter# install dependencies$ npm install # Or yarn install# serv...原创 2019-08-12 20:10:14 · 694 阅读 · 0 评论 -
Nuxt的开发环境Nginx配置
map $sent_http_content_type $expires { "text/html" epoch; "text/html; charset=utf-8" epoch; default off;}server { listen 80; server_name nuxtdemo.test.com;...原创 2019-08-12 20:36:19 · 1669 阅读 · 0 评论 -
nuxt.js axios使用poxyTable代理,解决跨域问题
1 安装(@gauseen/nuxt-proxy) cnpm install @gauseen/nuxt-proxy --save2 配置nuxt.config.jsmodules: [ // 请求代理配置,解决跨域 '@gauseen/nuxt-proxy',],proxyTable: { '/user':{ target: 'h...原创 2019-08-12 21:33:07 · 798 阅读 · 0 评论 -
assets与static的区别
assets与static的区别相同点:资源在html中使用,都是可以的。不同点:使用assets下面的资源,在js中使用的话,路径要经过webpack中file-loader编译,路径不能直接写。assets中的文件会经过webpack打包,重新编译,推荐该方式。而static中的文件,不会经过编译。项目在经过打包后,会生成dist文件夹,static中的文件只是复制一遍而已。简单来说...转载 2019-08-13 10:10:52 · 386 阅读 · 0 评论 -
Nuxt.js 基础入门教程
Vue 开发一个单页面应用,相信很多前端工程师都已经学会了,但是单页面应用有一个致命的缺点,就是 SEO 极不友好。除非,vue 能在服务端渲染(ssr)并直接返回已经渲染好的页面,而并非只是一个单纯的<div id="app"></div>。Nuxt.js就是一个极简的 vue 版的 ssr 框架。基于它,我们可以快速开发一个基于 vue 的 ssr 单页面应用。...原创 2019-08-13 12:58:28 · 722 阅读 · 0 评论