Nuxt.js快速上手--安装

为了快速入门,Nuxt.js团队创建了脚手架工具 create-nuxt-app

确保安装了npx(npx在NPM版本5.2.0默认安装了):

$ npx create-nuxt-app <项目名>

或者用yarn :

$ yarn create nuxt-app <项目名>

 

输入完这两个指令后,接下来就是Nuxt提供的一些可供选择的东西。

第一:确认你的项目名

第二:选择你的编程语言,这里有两个选项JavaScript和TypeScript,这里看大家的习惯,习惯用哪个选择哪个

 第三:包管理器,分别是Npm和Yarn,根据个人爱好进行选择

 第四:UI框架,Nuxt集成了许多UI框架,根据项目需求选择合适的框架即可

第五:模板引擎,这里选择HTML

想了解PUG引擎可以点击这里入门指南 – Pug 模板引擎中文文档 | Pug 中文网 (pugjs.cn) 

第六:选择添加Nuxt模块。添加 axios module 以轻松地将HTTP请求发送到应用程序中 

         添加PWA,可以运用现代的 Web API 以及传统的渐进式增强策略来创建跨平台 Web 应用程序。

         添加Content-Git-based headless CMS,可以让你的项目内容优先

 第七:样式工具。

  1. 添加 EsLint 以在保存时代码规范和错误检查代码。
  2. 添加 Prettier 以在保存时格式化/美化代码。
  3. 添加 Stylelint 可以帮助你规避 CSS 代码中的错误并保持一致的编码风格
  4. 添加Lint staged files 可以在代码提交时进行lint检查
  5. 添加Commit Lint可以规范你的提交代码信息

第八:测试框架。选择喜欢的测试框架

 第九:部署信息。可以选择服务器或静态站点。

第十:开发工具。 

 第十一:持续集成。

第十二:版本控制工具 

选择完以上的选项,将进行项目的依赖安装,完成安装后会出现一下两行代码,按照顺序执行就可以顺利打开nuxt了,至此安装结束!

$ cd <project-name> 
$ npm run dev 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

要在Nuxt.js中使用vue-seamless-scroll,首先需要在plugins目录下创建一个vue-seamless-scroll.js文件,并在文件中导入Vue和SeamlessScroll组件,然后使用Vue.use(SeamlessScroll)进行注册。 接下来,在nuxt.config.js文件中的plugins配置项中添加如下内容: ```javascript plugins: [ '@/plugins/element-ui', '@/plugins/axios', { src: '@/plugins/vue-seamless-scroll', ssr: false }, ] ``` 这样就可以将vue-seamless-scroll插件引入到Nuxt.js项目中了。 然后,在需要使用滚动组件的文件中,使用`<vue-seamless-scroll>`标签,并传入相应的数据和类名等参数。例如: ```html <vue-seamless-scroll :data="runningData" :class-option="scrollOption" class="scroll-container"> <div class="flex-row" v-for="item in runningData" :key="item.id"> <span class="row-1 row-nomal">{{ item.mbShowName }}</span> <span class="row-2 row-nomal">{{ item.mbShowVal }}</span> <span class="row-3 row-nomal">{{ item.updateTime | dateFilter }}</span> </div> </vue-seamless-scroll> ``` 这样就可以在Nuxt.js中使用vue-seamless-scroll组件了。 如果你在公司的基于Nuxt.js的项目中使用滚动组件后刷新页面出现"window is not defined"的错误,可能是因为滚动组件依赖于浏览器环境,而在服务器端渲染时无法访问到window对象。解决这个问题可以将ssr选项设置为false,如前面的配置所示。这样就可以避免在服务器端渲染时出现该错误。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [在 Nuxt中使用滚动组件 vue-seamless-scroll](https://blog.csdn.net/weixin_44769310/article/details/116144924)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Zwq8023520

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值