nuxt.js之初步了解

Nuxt.js 通用 vue.js，主要采用SSR

SSR：服务器端 把vue组件渲染成html 然后返回给浏览器

SEO： vue的SPA(单页面应用)及其不利于搜索引擎搜索  而SSR可以使搜索引擎快速搜索

SPA：快速

 

需要搜索引擎爬虫抓取的网站很多，如新闻网站、博客网站、电影网站... ...

以前的php J2EE也属于SSR服务端渲染

1. 搭建项目结构

第一步要全局安装vue-cli :

npm install vue-cli -g

敲命令"vue -V"看有没有安装成功：

vue -V

第二步新建文件夹"NuxtDemo"(名字可以任意)，然后编译器打开，在对应文件夹的终端上敲命令进行项目初始化：

vue init nuxt/starter    //这样敲会报错
vue init nuxt/starter zhouNuxt     // zhouNuxt为项目名（可任意）

接下来会问你项目名称是"zhouNuxt"吗，选择"y"或者"n"；再接下来会问项目描述，不想写描述的直接回车；最后确认Author后就完成了，会生成以下项目目录，接下来执行命令“npm install”下载依赖包，“npm run dev”运行项目。

2. 项目目录

nuxt.js中项目结构中的每个文件下都会放一个 README.md来阐述这个文件里放置的是什么内容

.nuxt： 执行命令“npm run dev”时自动生成的（一般不需要管）

assets： 静态资源目录（一般放less、sass、javascript，但是图片图标一般不放在这里）

components： 自己写的vue的组件

layouts： 用作布局（xxxxxxxx还没写完这个部分... ...）

middleware： 放中间件

pages： 工作目录

plugins： 放置javascript插件（放置插件后面集成到nuxt中）

static：静态资源文件（比如图片、图标）

store：存放Vuex

.editorconfig：编辑规则（如vscode编译器的编辑规则）

.eslintrc.js：eslint的配置文件，相关规则都配置在这里（书写规范）

.gitignore：默认不上传的文件都在这里配置（这里面带“#”是表示注释的意思）

nuxt.config.js：nuxt的配置文件（这里面的head就是普通html文件中的head标签内容的配置；loading是加载的颜色；... ...）

3. nuxt常用配置项

1. 如果不想用默认的“http://localhost:3000/”来启动的话，我们可以在“package.json”文件中配置“config”:

1. 多页应用中需要有初始化的css时，可以在“nuxt.config.js”中配置，这样这个css里面的样式就会作用于全局：

注意：nuxt中路由会自动配置，当你新建一个vue组件页面的时候，相关路由自动配置。

1. nuxt中webpack部分配置几乎很少，但如果碰到需要把图片loader打包的要求时，可以在以下地方配置：

• 路由参数+动态路由  p5+p6
• 动画效果  p7
• 默认模板与默认布局 p8
• p9
• p10
• p11

重点注意：

在口罩网站中用单页面应用Vue搭建，在里面加了<v-headful>标签，应该是用了加seo的把？还有在路由里面加了*号路由，设置不存在的页面你应该显示的提示？然后还加了每个页面的一个小型的滚动条？

生产环境 / 开发环境 /“--save”