nuxtjs相关环境搭建

番茄西红柿发布于2019-08-23 14:09 / 1505人阅读

摘要：建议版本关于全局安装有许多坑。以及一些其它的全局样式文件都应该在这里引入同时已经使用使用了模块，关于相关的配置，可以在中进行配置。其他的基本在实战中进行改装。这节主要是配置使用的修改配置

建议版本：node8.12.0 vue2.5.17 npm6.4.1 webpack4.19.1 nuxt2.0.0

关于全局安装webpack有许多坑。详情可慢慢琢磨（https://blog.csdn.net/Fabulou...，https://www.cnblogs.com/lansan0701/p/7019031.html webpack有关于sass-loader）

全局安装npx ：npm install -g npx
然后在使用nuxt-cli创建项目 npx create-nuxt-app profectname

创建完成项目运行npm run dev 报错 index.vue 36行删除36行空格就可以了

使用nuxt脚手架创建项目没有处理import问题，也就是模块只能使用require。识别不了

import引入

问题在于 npm run dev 使用的是cross-env NODE_ENV=development nodemon

server/index.js --watch server
使用了NODE_ENV node本身是不支持import export这种方法的，这里直接使用node启动程

序，没有经过babel处理。所以他是不会识别的

解决方法：使用babel启动。

nodemon 热启动，也就是改了文件自动刷新。
使用nodemon和babel一起启动，
给dev 后加上-exec babel-node 使用babel和他一起启动。 
也就是变成cross-env NODE_ENV=development nodemon server/index.js --

watch server -exec babel-node (注意不仅仅是开发环境，线上环境也应该加上保证使

用babel)

这样重新启动项目会发现还是报错。是因为虽然我们使用了babel node启动，但是我们并

没有给babel指定指令集。所以就要创建babel的配置文件。在项目文件内（如mt-app/）
创建一个配置文件 .babelrc 进入文件加上指令集。
{

"presets":["es2015"]

}

这里仍然需要给配置文件安装一下 npm install babel-preset-es2015
（注意这里一步！！如果以上步骤做完报错）babel-node不是内部外部命令。说明你没有

全局安装babel，需要全局安装babel。（安装教程：

https://www.jianshu.com/p/3e1...）

这样就会成功了，说明服务端程序支持es6方式去写了。

同时使用element-ui框架的话，应该在nuxt.config.js中引入饿了么的css文件，也就是

reset初始化css文件 "element-ui/lib/theme-chalk/reset.css" 就可以了。
以及一些其它的全局css样式文件都应该在这里引入

同时nuxt.config.js 已经使用modules使用了axios模块，关于axios相关的配置，可以在

axios中进行配置。（前提安装时候选择axios模块）

build的配置文件。

如果我们想加一个缓存，增快他的编译速度。可以在build中添加 cache:true 增加了编

译速度。

其他的基本在实战中进行改装。
这节主要是配置： 1.使用es6的import/export 2.修改build配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100179.html

QuillCMS - 基于Nodejs、Nuxtjs、MongoDB构建内容管理系统

摘要：是一个基于构建的内容管理系统，结构清晰，便于拓展，极其适合前端工程师进行二次开发。技术选型的核心也就是后台的内容管理，同时具有前台展示需求等功能。支持服务端渲染，上手也很简单，是基于的服务端渲染程序的不二选择。 QuillCMS是一个基于Nodejs、Nuxtjs、MongoDB构建的内容管理系统，结构清晰，便于拓展，极其适合前端工程师进行二次开发。二话不说，先看源码/演示站 Git...

LiangJ 2019-08-22 18:40 评论0 收藏0
服务端预渲染之Nuxt - （爬坑篇）

摘要：根据官方文档在文件下面创建两个文件，分别是和。在中可以直接使用，并且是默认启用命名空间的。在中触发热更新。使用中间件中间件没有给出具体的使用文档，而是放入了一个编辑器。对配置有兴趣的可以在官方文档找到渲染文档。 Nuxt是解决SEO的比较常用的解决方案，随着Nuxt也有很多坑，每当突破一个小技术点的时候，都有很大的成就感，在这段时间里着实让我痛并快乐着。在这里根据个人学习情况，所踩过的...

cucumber 2019-08-23 17:02 评论0 收藏0
Service worker (@nuxtjs/workbox) 采坑记

摘要：实际上是指的为简化开发而开源的第三方库。首先安装依赖然后再配置文件中启用就完成了使用采坑官网上线后发现，启用后不能播放视频了。把当成了失败请求，导致请求视频文件失败。 PWA（Progressive Web App）是前端的大趋势，它能极大的加快前端页面的加载速度，得到近乎原生 app 的展示效果（其实难说）。PWA 其实是多种前端技术的组合，其中最重要的一个技术就是 service ...

ISherry 2019-08-23 12:04 评论0 收藏0
服务端预渲染之Nuxt(路由篇)

摘要：前面既然说到了会把文件夹下面的所有文件编译成路由，那么子路由需要使用文件夹嵌套才行。客户端首次访问的页面会在服务端做输出，一旦渲染完成之后，则不会再在服务端输出，则会一直在客户端进行输出了。服务端预渲染之Nuxt - 使用现在大多数开发都是基于Vue或者React开发的，能够达到快速开发的效果，也有一些不足的地方,Nuxt能够在服务端做出渲染，然后让搜索引擎在爬取数据的时候能够读到...

yuanxin 2019-08-23 16:48 评论0 收藏0