初始化NuxtJS项目

跟着官方文档的安装就可以

一、使用create-nuxt-app

这种方式和安装vue-cli一样，弄完这个脚手架之后，目录结构就自动出来了

1. 命令行npm init nuxt-app <projext-name>，我这里用npx安装
2. 询问我各种问题

✨  Generating Nuxt.js project in nuxt-app-install
? Project name: nuxt-app-install
? Programming language: TypeScript
? Package manager: Npm
? UI framework: None
? Nuxt.js modules: Axios
? Linting tools: ESLint, Prettier, StyleLint, Commitlint
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git

3. 然后就进入到了漫长的install当中，创建完成cd nuxt-app-install可以看到目录结构

4. 执行项目npm run dev就可以启动项目了

5. 完美

二、自己创建目录

第二种是可以通过自己创建目录，更深入的了解目录结构，也很简单。

1. 创建文件夹，初始化npm init -y
2. 安装nuxt，npm i nuxt --save-dev
3. 修改package.json的script，"dev":"nuxt"
4. 创建pages文件夹和两个文件index.vue和about.vue
5. 写一样的代码结构

<template>
  <div>
  <!--Aout.vue---<h1>About page</h1>-->
    <h1>Hello Nuxt.js</h1>
  </div>
</template>

<script>
export default {
// Aout.vue--- name: 'AboutPage'
  name: 'IndexPage'
}
</script>

<style></style>

6. 命令行执行npm run dev，然后访问http://localhost:3000/
7. 完美

注意

路由规则，根据pages里面的文件，自动提取出来路由的配置，index.vue指的就是网站首页。