Nuxt2入门（2）- 安装及目录结构

vivi_潇潇
1,020 阅读2分钟

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情

安装

关于nuxt.js的安装，可以直接进入nuxt.js官网安装文档，本文也会详细记录。

由于上文所知，nuxt.js是基于vue的服务端渲染框架，那么我们也就需要以下操作：

  1. 安装node
  2. 安装vue-cli脚手架工具
  3. 安装create-nuxt-app
npm install -g create-nuxt-app

4.创建项目

  • 创建目录
  • 进入该目录，执行以下命令，注意新建一个文件夹不能有中文和空格不然会出错
npx create-nuxt-app <项目名>

5.在安装过程，安装程序会问你一些问题，例如项目名，项目说明，项目作者，在集成的服务端框架之间做选择，选择自己喜欢的UI框架，选择喜欢的测试框架，选择你想要的Nuxt模式（Universal或SPA），是否添加axios,Eslint,Prettier等。

6.当运行完，则可以开启项目

cd <项目名>
npm run dev

补充一句，如果是需要打包项目，则可以执行以下命令

cd <项目名>
npm run build
npm run start

目录结构

关于nuxt.js的目录结构，可以直接进入nuxt.js官网目录结构讲解文档，本文也会详细记录。

如下，是nuxt的项目目录

image.png

  • .nuxt目录:是nuxt.js框架自动生成的，都是一些临时的编辑文件，里面的文件不需要去管他。
  • assets 资源目录，用于组织还没有编辑的静态资源
  • components 组件目录，用于组织xue项目中一些组件
  • layout 布局目录，用于组织项目中布局，,一般不会重命名该目录
  • middleware 中间件目录，用于存放项目应用的中间件，比如访问接口对于数据过滤的处理。
  • pages 页面目录，主要开发的目录,一般不会重命名该目录
  • plugins 插件目录，用于组织实例化运行的一些插件
  • static 存放静态文件，不会被nuxt构建处理，服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下
  • store 用于组织vue状态数文件
  • nuxt.config.js文件 用于组织nuxt.js的个性化配置，以便覆盖默认配置
  • package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。
avatar
文章
阅读
粉丝