如何进行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"],


目录
打赏
0
0
0
0
1
分享
相关文章
ES6中新增的rest剩余参数在函数内部的使用问题
ES6 中引入了 rest 参数(...变量名),用于获取函数内不确定的多余参数,注意只能放在所有参数的最后一个
TypeScript深度剖析:TypeScript 中枚举类型的理解?应用场景?
TypeScript深度剖析:TypeScript 中枚举类型的理解?应用场景?
157 0
C语言操作符详解
当我们学习C语言时会遇到许多操作符,在许多语句中都能使用,可以起到举足轻重的作用。不要小看这些操作码,下面让我详细讲解一下操作符。
97 0
MobileNetV1实战:使用MobileNetV1实现植物幼苗分类
本例提取了植物幼苗数据集中的部分数据做数据集,数据集共有12种类别,演示如何使用pytorch版本的MobileNetV1图像分类模型实现分类任务。 通过本文你和学到: 1、如何自定义MobileNetV1模型。 2、如何自定义数据集加载方式? 3、如何使用Cutout数据增强? 4、如何使用Mixup数据增强。 5、如何实现训练和验证。 6、预测的两种写法。
358 0
MobileNetV1实战:使用MobileNetV1实现植物幼苗分类
Java 参数传递到底是按 值传递 还是 引用传递 ?
首先明确,**Java中方法参数传递方式是按值传递**。对于基本类型(int a, long b),参数传递时传递的是值,例如int a = 5,传递的就是5。如果是引用类型,传递是指向具体对象内存地址的地址值...
Java 参数传递到底是按 值传递 还是 引用传递 ?
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问