介绍 nuxt.js(中文官方文档)是vue.js的一个通用型应用框架,有了之前搭建vue项目的过程之后,搭建一个nuxt项目就会十分简单. 搭建步骤 1.打开命令提示符,进入到相关文件夹下: 2.使用如下命令一步搭建项目 vue init nuxt-community/starter-template testPro --testPro为项目名称 3.需要进一步输入以下信息 Project name (testPro) test-pro --输入项目名称,回车 Project descript

vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开箱即用,还支持自定义正则表达式.而且支持 40 多种语言,对本地化.多语言支持非常友好. 国内饿了么团队开源项目 Element UI 就用到了 vee-validate. vee-validate官网:https://baianat.github.io/vee-validate/ 1. 安装 安装

前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间经常又需要传递数据,项目比较小的话传递数据还好,越大的项目,涉及的组件通信就越多.越频繁,此时管理起来就会非常累,而且容易出错,这就是 Vuex 的意义所在.它可以将数据置于单独的一层,并提供给外部操作内部数据的方法.粗俗一点,就这样理解吧.vuex1.0官网 Vuex下载 $ cnpn insta

前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我们结合vue-router来玩玩路由吧!在使用vue-router的同时也要熟悉官方api 准备 进入项目文件 打开Node.js command prompt  命令方式进入上章我们创建的VueProject文件夹 npm下载安装vue-router cnpm install vue-router

1.准备 全文重点在于搭建环境,其他相关知识点请百度. VS2017 升级到最新的版本 安装 net core 2.0 安装 npm (npm相关使用请百度或咨询前端小伙伴) 全局安装 webpack (webpack相关使用请百度或咨询前端小伙伴) vue 的使用 (推荐看一下vue创建的webpack项目模板) axios的使用,vue中用于调用后端接口的方法 2.创建AspNetCore MVC项目 3.清空项目 删除不必要的文件后,项目文件结果如下: 4.初始化项目 4.1 在项目web

通常我们搭建ssr应用需要自己选择多个组件集成到一起 webpack babel loaders router server-render 各种入口配置等 如果是基于vue+vuex+vue-router组件构建的ssr应用,可以使用nuxt.js nuxt简化了ssr应用的搭建与开发,并且提供了一整套解决方案,提供了大量的预设 nuxt.js高度集成了常用的组件 包括热更新,vue-meta,css-loader,url-loader,vue-template-loader,vue-route

感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给予帮助,再次感谢Nuxt.js的开发团队. 路由鉴权 第一个拦路虎就是登陆时候的鉴权问题,如何把token保存到本地.官方使用express-session解决这个问题,但是这样做后端也需要使用nodejs,而我们公司使用的PHP.转念一想或许cookie可以一试,于是我是这样做的: app.pos

前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪个版本的时候,希望你都熟读了vue+vuex+vue-router的官方文档.下面我们就开始吧. Vue搭建 这里我假设我们的电脑都安装了nodejs,那么我现在开始吧. 我们先新建一个文件(VueProject),通过命令行的方式进入这个文件夹,现在假设我们进入了VueProject文件夹,接下来

1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状态管理Vuex.CSS处理器等(可以根据自己需要进行选择) 这里选择yes(Y) 我这里选用sass 打开ESLint和常规的一些 静静等待安装完成就可以了! 2.运行项目并配置多页面 cd app yarn serve /npm run serve 一般生成的都是8080端口的,由于本地已经在跑一

$ npx create-nuxt-app my-first-nuxtjs npx: 401 安装成功,用时 43.891 秒 > Generating Nuxt.js project in /Users/popgis/projects/my-first-nuxtjs ? Project name my-first-nuxtjs ? Project description A Nuxt.js application for test. ? Use a custom server framewor

一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及npm环境变量. 检验是否安装成功,在cmd输入命令 node -v,回车 及 npm -v,回车,如出现下图所示版本信息,表示安装成功 二.安装 Vue-cli 打开cmd命令行工具,输入npm install -g vue-cli,回车 全局安装vue-cli (注:npm会有点慢,建议更改为国内淘

一.安装vue-cli + vue-router + vuex + axios 1.安装vue-cli 2.创建项目 3.安装vuex和axios 二.搭建项目目录结构,如下所示: 1.assets目录用于存放静态文件,如图片等等. 2.components目录用于存放一些封装的公用的组件. 3.config目录用于存放配置项信息. 4.page目录用于存放页面组件. 5.router目录用于存放路由信息. 6.service目录用于存放请求后台接口的操作.api.js用于封装统一请求接口. 7

1.express-project 搭建express框架环境 安装express generator生成器 通过生成器自动创建项目 配置分析 安装 cnpm i -g express-generator express --version // 查看版本 express server // 创建项目 正常是前后端分离,建立两个项目.此项目为了测试前后端未分离,将package.json的dependencies合并到根目录的package.json. cnpm install // 安装依赖

安装Vue&创建Vue工程 1.安装Vue CLI: npm install -g vue-cli 2.创建新的Vue项目,创建最后一步会提醒是否使用npm install 自动安装,如果选择N,在第2步后,手动执行:npm install vue init webpack my-project 或 vue create my-project或vue init webpack-simple my-project (目录简单) #若想安装快速,在最后一步提示是否使用npm install命令时,选

关于 本书致力于教会你如何用Node.js来开发应用,过程中会传授你所有所需的“高级”JavaScript知识.本书绝不是一本“Hello World”的教程. 状态 你正在阅读的已经是本书的最终版.因此,只有当进行错误更正以及针对新版本Node.js的改动进行对应的修正时,才会进行更新. 本书中的代码案例都在Node.js 0.6.11版本中测试过,可以正确工作. 读者对象 本书最适合与我有相似技术背景的读者: 至少对一门诸如Ruby.Python.PHP或者Java这样面向对象的语言有一定的

# 通过 npm 安装 npm i vant -S 安装完配置 babel.config.js module.exports = { presets: ['@vue/app'], plugins: [ 'lodash', [ 'import', { libraryName: 'vant', libraryDirectory: 'es', style: true }, 'vant' ] ] }; 运行后报错 先安装插件 # 安装 babel-plugin-import 插件 npm i babel

1.新建一个项目

const Tabbar = () => import('@/components/Tabbar'); export default [ { path: '/', name: 'home', components: { //default与tabbar 等是同级路由模块,可以按命名控制展示与否 default: () => import('@/views/home/tabbar-home'), tabbar: Tabbar } }, { path: '*', redirect: { name:

前言 哈喽大家周一好,今天的内容比较多,主要就是包括:把前端页面的展示页给搭出来,然后调通接口API,可以添加数据,这两天我也一直在开发,本来想一篇一篇的写,发现可能会比较简单,就索性把项目搭建的过程简化,一次写好了,在开发 Nuxt.js 框架的过程中,我发现相比之前还是有些变化的,如果你是读过我第一个前后端分离系列的小伙伴,可能看过我简单说过Nuxt框架的一些知识<Nuxt.js 是什么?>,我发现现在在项目搭建的过程中,已经优化了一些功能,今天就重头搭建一下. 如果你没有看过之前的文章,

问题:最近有些朋友问我写官网,用Vue框架实现好不好? 相信很多使用Vue的小伙伴们一样疑惑这个问题,其实从这个问题就可以知道你对Vue这个框架是否真的熟悉了.其实单单使用Vue这个框架来做官网的,其实是不友好的,非常不利于SEO,抓取.因为Vue是通过把你的代码编译的,生成是SPA,里面的html其实是空的,Nuxt.js属于SSR,也就是服务器渲染.Nuxt.js打包生成的每个路由都会对应相对的html文件.有利于网站抓取,SEO. Vue适合做对seo无关紧要的项目,别的项目不适合,但是N

一.为什么要用Nuxt.js 原因其实不用多说,就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题. 二.Nuxt.js和纯Vue项目的简单对比 1. build后目标产物不同 vue: dist nuxt: .nuxt 2. 网页渲染流程 vue: 客户端渲染,先下载js后,通过ajax来渲染页面: nuxt: 服务端渲染,可以做到服务端拼接好html后直接返回,首屏可以做到无需发起ajax请求: 3. 部署流程 vue: 只需部署dist目录到服务器,没有服务端,需要用ngi