安装nuxt.js
Nuxt.js正式推广了两种方法来初始化项目。一是使用Nuxt.js团队的脚手架工具create-nuxt-app,二是根据自己的需求自由配置
脚手架适合初学者,对nodejs后台框架有一定了解;根据自己的需求,需要知道如何配置webpack和nodejs后台框架。
比较这两种方法是本机和插件的区别。
使用脚手架进行安装
需要节点或纱线环境。建议使用vscode的控制台输入命令行命令进行操作
环境可用后,可以直接输入以下命令直接创建项目(npx默认安装在npm 5.2.0中,不需要使用最新的稳定nodejs环境)
npx create-nuxt-app项目名#或使用yarnyarn create nuxt-app项目名后,他会提示你做一些选择
1.项目名
您可以在这里设置项目名称,也可以稍后在package.js中设置name属性。一般输入上述命令时就是项目名称,不需要修改直接输入。
2.项目描述
下面是项目的描述,比如做什么,或者您可以稍后在package.js中设置description属性。
3.选择服务器端框架
看看你习惯了什么,快递Koa用的最多。
4.扩展插件
选择axios EsLint更漂亮
Axios在保存时发送HTTP请求EsLint检查自己的代码是否有代码规范和错误。保存时更美观地格式化/美化自己的代码。
5.选择用户界面框架
UI框架方便快速开发,提供了很多现成的样式。近几年听得最多的是元素UI
6.选择测试框架
测试框架用于检测程序是否达到了预期的目的,是否有错误。这里暂时不需要,所以选择无
7.选择渲染模式
有两种应用:spa和Universal。SPA中有很多路线,但只有一页。所有可见的页面都是由js即时生成的dom。第二个是服务器上生成的html,页面和路由一样多。
Nuxt用来解决SEO的问题,让所有的网站路径都可以完全包含进去
8.作者
您也可以稍后在package.js中设置作者属性
9.选择包管理工具
你可以在这里选择哪个,看看你习惯哪个
10.选择“完成”开始安装
11.安装完成
提示信息
项目目录
关于如何根据自己的需求自由配置,这里就不多说了。需要自由配置的一般不是新手。建议看看官方文件
添加其他常用功能
除了nuxt支架,我们还需要其他配置,例如编译ES6、预处理CSS和添加其他配置
安装巴别塔
纱线添加巴别塔-命令行界面巴别塔-预设-环境配置文件。babelrc
{“预设”:[“env”]}安装SCS
纱线添加节点-sass纱线添加sass加载器后,只需要在vue文件的样式标签中添加一个属性声明
Stylelang=' sass'/style #或style lang=' SCS '/style以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。