闲云旅游day01-项目准备

初始化项目

有点像之前的脚手架,只不过封装的东西更加多了

根据下面的步骤来初始化一个nuxtjs项目

安装

切换至存放项目的路径

然后使用官网提供的脚手架工具 create-nuxt-app，创建一个nuxtjs项目。

npx create-nuxt-app xianyun

注意：在NPM版本5.2.0默认安装了npx，在命令行窗口输入npm --version可查看当前版本号

以下是最终的选项, 然后自动开始安装

需要等待片刻安装依赖的下载，下载完成后可以看到下面的提示框，要求输入项目名称和其他一些问题

启动

当运行完时，项目将安装所有依赖项，因此下一步是启动项目:

//运行
  cd xianyun
  npm run dev

启动会会弹出提示打开

http://localhost:3000/

如果出现 404

可以用 127 替换尝试

http://127.0.0.1:3000/

注意：没有报错不用管这一步此时运行项目可能会遇到以下错误提示HTMLElement is not define nuxt.js，原因是在Nuxtjs的服务器环境加载Element-ui遇到兼容问题抛出的错误，（如不报错则表示bug已修复），解决办法如下：

下载指定版本的element-ui

 npm install --save [email protected]

项目初始化就完成了。

脚手架初始示例

如果要使用,

1. 先 fork 到自己的账号下面
2. 克隆自己账号下面的项目
3. 进入项目文件夹 运行 npm install
4. npm run dev

https://gitee.com/owahahah/xianyu.git

工作目录

项目演示

示例：

http://157.122.54.189:9093/ +请求地址

数据服务：

数据服务运行步骤

1. 解压缩

2. 目录内运行

   npm install --node-sqlite3_binary_host_mirror=https://npm.taobao.org/mirrors/
   

3. npm run start

4. 如果数据库运行失败

   我们的后台服务器已经将数据库内嵌, 通常会自动安装, 遇到过某些机器, 会缺失数据库安装, 有提示让你补上

   出现下图报错, 可以运行
   

在线数据库: (后面学到的机票之类, 建议直接用线上的)
http://157.122.54.189:9095/

项目文件结构

文件结构

官网文档： https://zh.nuxtjs.org/guide/directory-structure

- xianyun 项目根目录
	- assets 		资源目录
	- components 	组件目录
	- layouts 		布局组件目录
	- middleware 	中间件目录
	- pages			页面目录
	- plugins		插件目录
	- static		静态文件目录
	- Store			Vuex 状态树 文件
	- nuxt.config.js	Nuxt.js 应用的个性化配置
	- package.json	依赖关系和对外暴露的脚本接口

别名说明

别名	目录
~ 或 @	src目录
~~ 或 @@	根目录

默认情况下，src目录和根目录相同

注意：**在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

基本配置

修改/删除默认文件

Nuxtjs初始化项目时给我们提供了两个演示文件，对我们接下来的项目开发没任何作用，分别是pages/index.vue和components/logo.vue。

修改如下：

1.首先是pages/index.vue

<template>
    <div>
        首页
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2.删除components/logo.vue文件

现在访问首页http://localhost:3000/，就只能看到首页两个字了。

创建页面目录

在 nuxt 框架当中, 不需要配置路由

只要你在 pages 文件夹下面创建文件夹或者文件就能够自动生成路由

接下来创建项目结构目录，方便以后的项目模块扩展。

在pages目录下新建文件夹，文件夹分别对应接下来要开发的业务模块

- ... // 其他文件

- pages
	- index.vue 		// 已存在的首页文件
	- post				// 存放旅游攻略模块的文件夹
		- index.vue		// 旅游攻略模块首页文件
	- air				// 存放机票模块的文件夹
		- index.vue		// 机票模块首页文件
	- hotel				// 存放酒店模块的文件夹
		- index.vue		// 机票模块首页文件
	- user				// 存放用户模块的文件夹
		- login.vue 	// 用户登录注册页面
		
- ... // 其他文件

如果你已经新增了上面的文件，我们可以直接通过路由访问pages下的页面，查看页面是否新增成功。比如我们修改post/index.vue内容如下：

<template>
    <div>
        旅游攻略首页
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

在浏览器中访问地址http://localhost:3000/post，页面显示如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ivbVjeAN-1604683617127)(项目准备.assets/1558687169347.png)]

1. 顺便给air/index.vue, hotel/index.vue也新增上面的内容吧，不过需要修改下文字方便区分页面。

2. Nuxtjs的页面访问规则和浏览器的SPA机制不同，在Nuxtjs中不需要路由配置，pages下的页面可以直接通过路径访问，默认查找index.vue

创建组件目录

虽然现在还没开始开发页面，但是我们可以预测未来的页面中肯定存在很多可以独立封装的组件，所以我们现在可以给未来的组件新建存放目录.

在components文件夹中新建文件夹：

- ... 			// 其他文件

- components	// 存放公共组件的文件夹
	- post		// 存放旅游攻略模块组件的文件夹
	- air		// 存放机票模块组件的文件夹
	- hotel		// 存放酒店模块组件的文件夹
	- user		// 存放用户模块组件的文件夹
	
- ... 			// 其他文件

修改配置文件

页面过渡效果样式 (可选)

目前还没涉及到页面的跳转，但不妨碍我们给项目配置预先做好铺垫，这份配置只是为了页面切换时优化用户体验设计的，并不是必须的。

在assets/目录下创建这个文件assets/main.css，添加以下样式：

/* 页面切换时候过渡样式 */
.page-enter-active, .page-leave-active {
    
    
    transition: opacity .5s;
}

/* 打开时候过渡样式 */
.page-enter, .page-leave-active {
    
    
    opacity: 0;
}

/* 页面顶部页面加载进度条 */
.nuxt-progress{
    
    
    background:#409eff;
    height: 1px;
}

只是新建了样式文件还不能产生效果，需要在nuxt.config.js配置文件中加载该文件才能生效。

配置方式参考下一小节笔记

参考文档： 过渡动效

修改配置文件

以前 webpack 配置都在 webpack.config.js

vue-cli 在 vue.config.js

nuxt 它的配置全部都在 nuxt.config.js

配置文件nuxt.config.js对项目进行了全局配置，对每个页面都生效。

复制下面配置替换项目的nuxt.config.js文件，如果想手动修改的话可以查看中文注释行(#10 #18 #32 #56)

import pkg from './package'

export default {
    
    
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    
    
    title: "闲云旅游网", // 修改title
    meta: [
      {
    
     charset: 'utf-8' },
      {
    
     name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
    
     hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      {
    
     rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
      {
    
     rel: 'stylesheet', type: 'text/css', href: '//at.alicdn.com/t/font_1168872_ehvuah8v57g.css'} // 新增全局字体样式
    ]
  },

  /*
  ** Customize the progress-bar color
  */
  loading: {
    
     color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    'assets/main.css' // 新增自定义的页面过渡样式（文件来自3.4.1）
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui'
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // https://axios.nuxtjs.org/setup
    '@nuxtjs/axios'
  ],

  /*
  ** Axios module configuration
  */
  axios: {
    
    
    // See https://github.com/nuxt-community/axios-module#options
    // baseURL: "http://157.122.54.189:9095" // 新增备用地址
    baseURL: "http://127.0.0.1:1337" // 新增axios默认请求路径 		  
  },

  /*
  ** Build configuration
  */
  build: {
    
    
    transpile: [/^element-ui/],

    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
    
    
    }
  },
}

注意：修改nuxt.config.js记得要重启项目 (比较保险)

如果创建目录时漏掉了 axios 没有选择

可以自行安装 npm i @nuxtjs/axios

npm install @nuxtjs/axios

添加less

预编译样式我们选择less，相关配置nuxtjs已经帮我们配置好了，不需要改动webpack的配置文件，只需要安装依赖包即可

npm install --save less less-loader 

总结

1. 初始化项目命令：

   // 安装，注意选项选择
   npx create-nuxt-app xianyun
   
   // 启动
   $ cd xianyun
   $ npm run dev
   

2. 新建项目文件结构

3. (可选) 创建一个页面跳转动效的css

4. 修改默认配置文件nuxt.config.js ,注意修改配置文件要重启项目(最保险)

Nuxt和普通的Vue

1. Nuxt是同构程序，这里的同构指的是一套代码，可以在浏览器运行，也可以在服务器（Nodejs）运行，也就是说可以同时使用浏览器的API和Nodejs的API。

2. 普通的Vue页面只能使用浏览器的API，即使在Nodejs环境下开发也只是使用Webpack来编译打包。

3. Nuxt是前后端框架的集合，前端采用Vue，后端可选框架有Express、koa2, egg, api等，所以可以理解为Vue是一个页面模板的存在，类似于art-template , ejs

4. Nuxt支持单页和多页应用。

注意：虽然Nuxt确实很强大，但是目前市面上应用的却不是很多，因为nodejs作为服务器端语言目前还是相对较少的，更多的还是java，php等，所以在这个项目当中, 关于 ssr 服务端渲染的并不会扩展, 主要我们会把精力集中在的功能业务开发上，以及一些Vue未接触过的用法。