• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • vite + vue3 + ts + SSR 使用 Nuxt 框架

    NuxtJs,是一个基于 Vue.js 的通用应用框架。支持单页应用程序(SPA)、服务端渲染(SSR)、静态化(预渲染)。

    Nuxt 3,支持 vue 3。Nuxt 2,支持 vue 2。


    安装 Nuxt3

    npx nuxi init project-name
    
    cd project-name
    
    npm install
    npm run dev
    


    安装 Nuxt2

    npm init nuxt-app project-name
    

    使用键盘方向键(上下箭头键),来选择单选项,然后回车。使用空格键,选中多选项,然后回车。

    # 输入项目名称
    ? Project name: (nuxtjs)
    
    # 选择编程语言。选中 TypeScript,然后回车
    ? Programming language: (Use arrow keys)
      JavaScript
    > TypeScript
    
    # 选择打包方式。选中 NPM,然后回车
    ? Package manager:
      Yarn
    > Npm
    
    # 选择 UI 框架。选中 Element,然后回车
    ? UI framework: (Use arrow keys)
     None
      Ant Design Vue
      BalmUI
      Bootstrap Vue
      Buefy
      Chakra UI
    >  Element
      Oruga
      Primevue
      Tachyons
      Tailwind CSS
      Windi CSS
      Vant
      View UI
      Vuetify.js
    
    # 选择模板引擎。选中 Pug,然后回车
    ? Template engine: (Use arrow keys)
     HTML
    >  Pug
    
    # 选中第三方模块。使用方向键调整选项,使用空格键选中,选中 Axios、PWA,然后回车
    ? Nuxt.js modules:
     ◉ Axios - Promise based HTTP client
    >◉ Progressive Web App (PWA)
     ◯ Content - Git-based headless CMS
    
    # 选择格式化工具。使用方向键调整选项,使用空格键选中,选中 ESLint、Prettier,然后回车
    ? Linting tools: (Press <space> to select, <a> to toggle all, <i< to invert selection)
    ? Linting tools:
     ◉ ESLint
    >◉ Prettier
     ◯ Lint staged files
     ◯ StyleLint
     ◯ Commitlint
    
    # 选择测试框架。使用方向键调整选项,选中 Jest,然后回车
    ? Testing framework:
      None
    > Jest
      AVA
      WebdriverIO
      Nightwatch
    
    # 渲染技术。使用方向键调整选项,选中  Universal (SSR / SSG),然后回车
    > Universal (SSR / SSG)
      Single Page App
    
    # 部署方式。Nodejs中部署(也就是SSR部署)、或者是静态文件部署。
    ? Deployment target: (Use arrow keys)
    > Server (Node.js hosting)
      Static (Static/Jamstack hosting)
    
    # 选择开发工具。都不选择,直接回车
    ? Development tools: (Press <space> to select, <a> to toggle all, <i< to invert selection)
    >◯ jsconfig.json (Recommended for VS Code if you're not using typescript)
     ◯ Semantic Pull Requests
     ◯ Dependabot (For auto-updating dependencies, GitHub only)
    
    # 集成的工具,直接回车
    ? Continuous integration: (Use arrow keys)
    > None
      GitHub Actions (GitHub only)
      Travis CI
      CircleCI
    
    # 版本管理工具,选择 None 回车
    ? Version control system:
      Git
    > None
    
    cd project-name
    npm run dev