Nuxt.js|青训营笔记

修猫修勾
132 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第4天

青训营大项目笔记 通过团队沟通，我们选定了大项目开发方向为基于Nuxt.js防掘金项目,以下为我在大项目学习笔记

Nuxt.js框架

Vue项目与Nuxt.js项目区别

区别在于客户端渲染和服务端渲染

  • 客户端渲染的网站，是要进过JS动态生成HTML和内容，但是爬虫在爬取网站时，JS无法执行，导致怕丑无法收录网页的内容，不利于SEQ优化
  • 服务端渲染，网页上的内容在服务端已经渲染好了，浏览器是直接

Vue项目运行打开后，在网页页面查看源代码是看不到具体代码

Nuxt.js项目运行打开后，在网页页面可在body中查看具体代码 ACB404F0F809F3C0E6535F8C106C9A29.png

官网安装 - NuxtJS | Nuxt.js 中文网

1、Nuxt.js脚手架安装

npm install -g create-nuxt-app下载全局环境

npx create-nuxt-app NuxtDemo创建Nuxt.js项目

npm run dev 启动项目 35678C03ECDCA6CF3604A9A92F484F48.jpg

2、运行报错

error:03000086:digital envelope routines::initialization error'

解决：修改环境变量问题解决——命令行输入$env:NODE_OPTIONS="--openssl-legacy-provider"

再输入npm run dev即可运行成功 EE7ADB86801092D07995D4192D54FD92.png

3、Nuxt项目目录

8297FCB89F398DDA843CF08F4D7DEAA6.jpg

  • components的文件如Tutorial.vue为功能组件
  • layouts的文件为布局文件
  • middleware的文件为中间键
  • plugings的文件为插件文件
  • pages的文件如index.vue为页面组件，可包含多个小功能的可复用组件
  • static的文件为静态资源，如图片，注意static的文件不被webpack打包
  • assets的文件为未编译的静态资源，可被webpack打包
  • gitignore：git代码提交后忽略一些文件
  • editorconfig:编辑的代码规范

注：以上目录名称不可乱写，乱写会不生效

4、组件使用

在pages的文件即页面组件中使用components的文件即功能组件

在nuxt.config.js文件中components:true即组件可自动导入

92F1AF8BDCD56709DED8B68DFDF28DEF.jpg

154508D181176986E3E1BBF157E3B73C.jpg

注：当components:false时components无法被自动导入，此时需手动引入功能组件

106C8B477786C6922287596CFC754507.jpg

<template>
  <Tutorial/>
</template>
​
<script>
import Tutorial from '../components/Tutorial.vue';
export default {
  name: 'IndexPage',
  components:{
   Tutorial
  }
}
</script>

（VScode因第一次使用，发现修改了nuxt.config.js文件后运行发现仍然能显示功能组件，发现文件修改后未保存，ctrl+s保存代码后自动更新启动后为空白页面，即功能组件未被引入，正确）

avatar
文章
阅读
粉丝