nuxt vue node mysql_[vue] vue服务端渲染nuxt.js

初始化

使用脚手架工具 create-nuxt-app 快速创建

npx create-nuxt-app

npx create-nuxt-app

执行一些选择

在集成的服务器端框架之间进行选择:

选择您喜欢的 UI 框架:

选择您喜欢的测试框架:

选择你想要的 Nuxt 模式 (Universal or SPA)

添加 axios module 以轻松地将 HTTP 请求发送到您的应用程序中。

添加 EsLint 以在保存时代码规范和错误检查您的代码。

添加 Prettier 以在保存时格式化/美化您的代码。

Nuxt.js 特点

基于 Vue.js

自动代码分层

服务端渲染

强大的路由功能，支持异步数据

静态文件服务

ES6/ES7 语法支持

打包和压缩 JS 和 CSS

HTML 头部标签管理

本地开发支持热加载

集成 ESLint

支持各种样式预处理器： SASS、LESS、 Stylus 等等

基本 nuxt 配置

修改 pages/index.vue

Hello world

在 localhost:3000 可以看到更新效果

Nuxt 目录结构

|-- .nuxt // Nuxt自动生成，临时的用于编辑的文件，build

|-- assets // 用于组织未编译的静态资源入LESS、SASS 或 JavaScript

|-- components // 用于自己编写的Vue组件，比如滚动组件，日历组件，分页组件

|-- layouts // 布局目录，用于组织应用的布局组件，不可更改。

|-- middleware // 用于存放中间件

|-- pages // 用于存放写的页面，我们主要的工作区域

|-- plugins // 用于存放JavaScript插件的地方

|-- static // 用于存放静态资源文件，比如图片

|-- store // 用于组织应用的Vuex 状态管理。

|-- .editorconfig // 开发工具格式配置

|-- .eslintrc.js // ESLint的配置文件，用于检查代码格式

|-- .gitignore // 配置git不上传的文件

|-- nuxt.config.json // 用于组织Nuxt.js应用的个性化配置，已覆盖默认配置

|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作

|-- package-lock.json // npm自动生成，用于帮助package的统一性设置的，yarn也有相同的操作

|-- package.json // npm包管理配置文件

别名

目录

~ 或 @

srcDir

~~ 或 @@

rootDir

在您