作为一名后端程序员,本来前端基础就比较薄弱,刚一开始了解node还是从nuxt开始的,难免有些不知所措,但也没有办法,项目催的急,不得不借助框架。在此记录下刚接触nuxt框架所踩过的坑,后续会慢慢补上对于node的基础学习。
1、nuxt官方脚手架存在的问题:
首先回顾一下官方脚手架的创建过程:
a、全局安装npx(npx 会帮你执行依赖包里的二进制文件,不过据说npm version >=5.2已经内置了npx,咱也不知道,反正我是手动安装了一遍。。。):
npm install -g npx
b、创建官方脚手架:
npx create-nuxt-app 你项目的名字
c、官方脚手架默认不支持ES6,需要手动添加支持:
在你的项目文件夹下:
npm install babel-cli babel-preset-es2015
然后修改package.json中scripts中的dev和start,在最后添加一句:--exec babel-node
"scripts": {
"dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
"build": "nuxt build",
"start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
"generate": "nuxt generate"
},
最后,切记在项目根目录下创建一个文件:.babelrc,内容如下:
{
"presets": ["es2015"]
}
【node(vue+nuxt) 踩坑日记(一)(关于nuxt的缺陷)】d、nuxt框架默认不支持scss,需手动安装:
npm i sass-loader node-sass
二、nuxt项目如何打包发布:
最简单的办法:在项目根目录下,命令行:
npm run generate
会生成一个dist文件夹,直接丢到nginx服务器上就可以了。
还有一个复杂的方法,就是用npm run build,我还没研究明白这种方法怎么部署,后面再说
推荐阅读
- 携程实习篇|Node.js之process进程
- node中package.json和package-lock.json文件的作用
- sequlize统一格式化时间
- egg 如何接收xml数据
- Node.js在WebStorm中调试
- node npm 设置全局仓库路径
- node require 导入模块解析 加载规则和加载机制
- node|node.js学习笔记-模块module
- window node配置安装的全局模块所在的路径cache的路径
- node|node.js express性能优化