如何进行nuxt的开发

简介: 前面已经介绍过了SPA和SSR的不同,这里就不过多赘述了,而今天的nuxt.js开发的页面就是SPA形式的,如掘金大大就是使用nuxt开发的

官网介绍说Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。


前面已经介绍过了SPASSR的不同,这里就不过多赘述了,而今天的nuxt.js开发的页面就是SPA形式的,如掘金大大就是使用nuxt开发的


nuxt开发的优点


  • 基于 Vue.js
  • 自动代码分层
  • 服务端渲染
  • 强大的路由功能,支持异步数据
  • 静态文件服务
  • ES6/ES7 语法支持
  • 打包和压缩 JS 和 CSS
  • HTML头部标签管理
  • 本地开发支持热加载
  • 集成ESLint
  • 支持各种样式预处理器: SASS、LESS、 Stylus等等


环境配置


首现要确保安装了node,并且版本一般是不能低于v12的,node安装后,就要安装vue-cli脚手架


npm install vue-cli -g


当然安装的速度取决于你的镜像,npm是从国外网站下载依赖包,网络不好的话会很慢,这时你可以使用淘宝的镜像cnpmyarn进行安装都是可以的


安装nuxt


可以自定义安装nuxt,自定义构建模板文件


yarn add nuxt 


安装好vue-cli后,就可以使用init命令来初始化Nuxt.js项目。


vue init nuxt/starter


这时候他会在github上下载模版,然后会询问你项目的名称叫什么,作者什么的,这些完全可以根据自己的爱好填写。


3.使用npm install安装依赖包


npm install


这个过程是要等一会的,如果你这个过程安装失败,也不要慌张,你可以直接诶删除项目中的node_modules文件夹后,重新npm install进行安装。


4.使用npm run dev 启动服务


npm run dev


5.在浏览器输入 localhost:3000,可以看到结果。


Hello World


也可使用create-nuxt-app创建项目


$ yarn create nuxt-app <项目名>


它会让你进行一些选择:


1.在集成的服务器端框架之间进行选择:



2.选择您喜欢的 UI 框架:



3.选择您喜欢的测试框架:


  • None (随意添加一个)
  • Jest
  • AVA


4.选择你想要的 Nuxt 模式 (Universal or SPA)


5.添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。


6.添加 EsLint 以在保存时代码规范和错误检查您的代码。


7添加 Prettier 以在保存时格式化/美化您的代码。


当运行完时,它将安装所有依赖项,因此下一步是启动项目:


$ cd <project-name>
$ npm run dev


应用现在运行在 http://localhost:3000 上运行。


注意:Nuxt.js 会监听 pages 目录中的文件更改,因此在添加新页面时无需重新启动应用程序


如何显示Devtools


我必须将以下内容添加到nuxt.config.js:


vue: {
  config: {
    productionTip: false,
    devtools: true
  }
}


如何更改启动端口


在package.json里面增加


"config":{
    "nuxt":{
  "host":"127.0.0.1",
        "port":"9900"
   }
}


加载css文件


nuxt.config.js文件里面的css里面如下设置


css: ["element-ui/lib/theme-chalk/index.css", "~assets/css/normal.css"],


相关文章
|
11月前
|
JavaScript API 图形学
ThreeJS入门-创建一个正方体
这篇文章介绍了如何使用Three.js创建一个基本的正方体模型,并提供了实现这一功能的详细步骤和代码示例。
241 0
ThreeJS入门-创建一个正方体
|
Web App开发 Linux Android开发
常见浏览器User-Agent大全
下面是工作中需要用到的常见浏览器User-Agent字符串的收集整理,不断更新中。 OperaMozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.
12325 2
|
算法 Linux Shell
Linux:创建进程 -- fork,到底是什么?
Linux:创建进程 -- fork,到底是什么?
|
Web App开发
Chrome的插件扩展程序安装目录是什么?在哪个文件夹?
正常情况下,Chrome插件扩展程序的默认安装目录如下: 1.windows xp中chrome插件默认安装目录位置: C:\Documents and Settings\用户名\Local Settings\Application Data\Google\Chrome\User Data\Default\Extensions 2.
50032 2
|
网络架构
ES6中新增的rest剩余参数在函数内部的使用问题
ES6 中引入了 rest 参数(...变量名),用于获取函数内不确定的多余参数,注意只能放在所有参数的最后一个
|
存储 缓存 前端开发
Android业务架构 · 基础篇 · Jetpack四件套
Android业务架构 · 基础篇 · Jetpack四件套
388 0
Android业务架构 · 基础篇 · Jetpack四件套
|
JavaScript 前端开发
TypeScript深度剖析:TypeScript 中枚举类型的理解?应用场景?
TypeScript深度剖析:TypeScript 中枚举类型的理解?应用场景?
167 0
|
存储 编译器 C语言
C语言操作符详解
当我们学习C语言时会遇到许多操作符,在许多语句中都能使用,可以起到举足轻重的作用。不要小看这些操作码,下面让我详细讲解一下操作符。
113 0
|
JavaScript 数据可视化 Java
Vue和SpringBoot打造中学生家校互联系统
Vue和SpringBoot打造中学生家校互联系统
200 0
|
JavaScript Go API
Vue(Vue2+Vue3)——71.编程式路由导航
Vue(Vue2+Vue3)——71.编程式路由导航

热门文章

最新文章