The vue-cli allows you to easily start up Vue projects from the command line while Nuxt.js enables a page-based routing system that follows your file structure. Combine these two projects and you'll have a Vue app created from scratch deployed in a matter of minutes.

Install:

npm i -g vue-cli

Setup:

vue init nuxt/starter basic-vue-proejct
cd vue-basic-project
yarn

Run:

npm run dev

Nuxt.js has already server-side rendering setup, which is pretty cool!

A basic two way binding:

<template>
<section class="container">
<h1 class="title">
{{message}}
</h1>
<input v-model="message">
<router-link class="button" to="/about">
About page
</router-link>
</section>
</template> <script>
export default {
data(){
return {
message: "Hello World!"
}
}
}
</script>

Github

[Vue] Build Vue.js Apps with the Vue-CLI and Nuxt.js的更多相关文章

  1. Vue(三十二)SSR服务端渲染Nuxt.js

    初始化Nuxt.js项目步骤 1.使用脚手架工具 create-nuxt-app 创建Nuxt项目 使用yarn或者npm $ yarn create nuxt-app <项目名> 注:根 ...

  2. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  3. 【前端vue进阶实战】:从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 (一)

    本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com .如果你觉得好,欢 ...

  4. Vue Cheat Sheet & Nuxt.js Cheat Sheet

    Vue Cheat Sheet & Nuxt.js Cheat Sheet Vue Cheat Sheet https://www.vuemastery.com/pdf/Vue-Essenti ...

  5. 前后端分离最佳实现,使用Nuxt.js快速搭建单页SSR应用

    通常我们搭建ssr应用需要自己选择多个组件集成到一起 webpack babel loaders router server-render 各种入口配置等 如果是基于vue+vuex+vue-rout ...

  6. Nuxt.js 踩坑笔记 - 缓存向

    零.前言 最近参与了一个立足 seo 的移动端项目,公司前端工程主栈 vue,所以理所当然的用上了 nuxt,UI 主要选择了 Vant.   一.公共列表页的缓存 公共列表页由于数据量较大,故需要滚 ...

  7. Build a Basic CRUD App with Vue.js and nodejs

    https://developer.okta.com/blog/2018/02/15/build-crud-app-vuejs-node#add-authentication-with-okta I’ ...

  8. Vue-cli+Vue.js2.0+Vuex2.0+vue-router+es6+webpack+node.js脚手架搭建和Vue开发实战

    Vue.js是一个构建数据驱动的web界面的渐进式框架.在写这边文章时Vue版本分为1.0++和2.0++,这个是基于Vue2.0的项目. Vue-cli是构建单页应用的脚手架,这个可是官方的. Vu ...

  9. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二八║ Nuxt 基础:面向源码研究Nuxt.js

    前言 哈喽大家周五好,又是一个开开心心的周五了,接下来就是三天小团圆啦,这里先祝大家节日快乐咯,希望都没有加班哈哈,今天公司发了月饼,嗯~时间来不及了,上周应该搞个活动抽中几个粉丝发月饼的,下次吧,这 ...

随机推荐

  1. 使用Cygwin在Windows上体验Linux的快感

    前言 记得大学的时候就以前使用过Cygwin,可惜当时没有发现她的美,我相信如今大多数朋友可能会更加倾向于使用Git或者干脆直接使用虚拟机以及原生Unix. 只是对于刚进入Linux的世界新人来说,使 ...

  2. [Angular & Unit Testing] TestBed.get vs Injector

    Both what "TestBed.get" & "injector" trying to do is get service for the tes ...

  3. win8用久了变得非常慢, 磁盘占用100%

    完美解决方式:  直接重装win7 完美解决这个问题 在网上查了非常久也没找到有效方法, 求教

  4. hdu 1233 还是畅通project (克鲁斯卡尔裸题)

    还是畅通project                                              Time Limit: 4000/2000 MS (Java/Others)    M ...

  5. 雅黑PHP探针 For PHP7

    雅黑PHP探针 For PHP7资料来源: https://kn007.net/topics/yahei-php-probe-for-php7/在v0.4.7版本的基础上,修正了废弃函数及错误语法.使 ...

  6. 1.Node.js

    转自:http://www.runoob.com/nodejs/nodejs-tutorial.html 简单的说 Node.js 就是运行在服务端的 JavaScript. Node.js 是一个基 ...

  7. F的ACM暑期集训计划

    暑假的知识计划(补充中...) 1.数论相关 (7days) 待完成 多项式同余方程/高次同余方程/欧拉函数/克莱姆法则/高斯消元/莫比乌斯反演/伪素数判定/baby-step-gaint-step ...

  8. eclipse- log 打印跟输出到文件

    1.在eclipse中打印log,经常使用的就是log.e(string,string) 代码中如下 @Override public boolean onTouchEvent(MotionEvent ...

  9. Python *的下载、安装和使用

    最近正在学习机器学习和深度学习,需要python,大家都知道,它是这些领域的入门语言,不多说,直接上干货!突然发现python比java好玩多了 下面就开始python的安装以及测试,python2. ...

  10. 记一些stl的用法(持续更新)

    有些stl不常用真的会忘qwq,不如在这里记下来,以后常来看看 C++中substr函数的用法 #include<string> #include<iostream> usin ...