nuxt.js-vue服务端渲染框架学习笔记-创建项目

1. 确保安装了npx（npx在NPM版本5.2.0默认安装了,可以选择直接升级npm: npm install -g npm,也可以选择全局安装npx: npm install npx -g）:

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

2.选择你需要的服务端框架和前端UI框架

image.png

3.选择你想要的nuxt模式(Universal or SPA，即单页应用和多页应用)

4.选择是否添加axios module.

5.选择是否添加Eslint代码规范

6.选择是否添加Perttier代码美化/格式化插件

7.依赖安装完成之后使用下方命令运行项目：

npm run dev

到此，nuxt.js项目就可以正式运行起来了，出了上面的方法之外也可以使用Nuxt提供的模板快速进行安装（不用上面那些繁琐的配置）：

$ vue init nuxt-community/starter-template <project-name 项目名>

安装依赖包：

cd <project-name>
npm install

启动项目：

npm run dev

从头开始创建新项目

1.新建一个项目文件夹
2.在项目文件夹中新建package.json文件

{
  "name": "my-app",
  "scripts": {
    "dev": "nuxt"
  }
}

3.运行下方命令：

npm install --save nuxt

4.创建pages文件夹
5.在pages文件夹中创建index.vue文件

<template>
  <h1>Hello world!</h1>
</template>

6.运行项目:

npm run dev

生成静态文件

npm run generate

运行命令之后会生成dist文件夹，里面就是编译好的静态文件。

目录结构：

|—— .nuxt // 项目编译之后的文件夹
|——asssets // 用于存放未编译的静态资源，如：SASS、LESS、或JavaScript
|——components //用于存放vue公共组件，这些组件不会像页面组件那样有asyncData特性。
|——layouts // 页面布局目录
|——middleware // 用于存放中间件
|——pages // 用于存放页面目录
|——plugins //用于存放JavaScript插件，如element-ui.js等
|——static // 用于存放静态文件，即不需要编译即可使用的文件，如图片等
|——Store //vuex文件夹
|——nuxt.config.js //Nuxt.js配置文件
|——packge.json //项目依赖文件

别名：

~或@ ： src目录
~~或@@: 根目录
默认情况下，src目录和根目录相同