目录
1.初始化项目
- nuxtjs项目跟vue cli脚手架类似,封装的东西会更加多一些
- Nuxt.js 预设了利用Vue.js 开发服务端渲染的应用所需要的各种配置
安装
- 切换到存放项目的路径,
- 打开cmd,
- 使用官网提供的脚手架工具 create-nuxt-app,创建一个nuxt.js项目
npx create-nuxt-app 项目名
注意:在NPM版本5.2.0默认安装了npx,在命令行窗口输入npm--version可查看当前版本号
按照以下的步骤,根据你自己对项目的需要进行选择
以下是我的最终选项,然后自动开始安装
需要等待安装依赖的下载,下载完成后可以看到下面的提示框,要求输入项目名称和其他一些问题
启动
当运行完时,项目将安装所有的依赖项,因此下一步是启动项目:
cd xianyun
npm run dev
可自愿选择 Y/n
- 启动会弹出提示打开 http://localhost:3000/
- 如果出现404,可以使用 http://127.0.0.1:3000/ 替换
此时页面出现:
注意:此时项目可能会遇到以下错误提示: HTMLElement is not define nuxt.js,原因是在 Nuxt.js 的服务器环境加载 Element-ui 遇到兼容问题抛出的错误,(如不报错表示bug已修复,不用管这一步),解决办法如下:
下载指定版本的 element-ui
npm install --save element-ui@2.4.11
到这里项目的初始化就已经完成了
2.项目演示
数据服务运行步骤
- 在服务器文件目录内运行
npm install --node-sqlite3_binary_host_mirror=https://npm.taobao.org/mirrors/
- 启动服务器
npm run start
- 如果数据库运行失败
后台服务器已经将数据库内嵌,通常会自动安装,遇到过某些机器,会缺失数据库安装,有提示让你补上
出现上图的报错,可以运行
npm install sqlite3 --save --node-sqlite3_binary_host_mirror=https://npm.taobao.org/mirrors/
3.项目文件结构
文件结构
官网文档: 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 方式
4. 基本配置
4.1 修改/删除默认文件
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/
,就只能看到首页
两个字了。
4.2 创建页面目录
在nuxt框架当中,不需要配置路由,只要你在pages文件夹下创建文件夹或者文件就能够自动生成路由
接下来可以创建项目结构目录,方便以后的项目模块扩展
在pages
目录下新建文件夹,文件夹分别对应接下来要开发的业务模块
- ... // 其他文件
- pages
- index.vue // 已存在的首页文件
- post // 存放旅游攻略模块的文件夹
- index.vue // 旅游攻略模块首页文件
- air // 存放机票模块的文件夹
- index.vue // 机票模块首页文件
- hotel // 存放酒店模块的文件夹
- index.vue // 酒店模块首页文件
- user // 存放用户模块的文件夹
- login.vue // 用户登录注册页面
- ... // 其他文件
接下来就可以直接通过路由访问pages下的页面,查看页面是否新增成功。
例如:http://localhost:3000/post/index.vue ,便可看到旅游攻略模块首页
Nuxtjs的页面访问规则和浏览器的SPA机制不同,在Nuxtjs中不需要路由配置,pages下的页面可以直接通过路径访问,默认查找index.vue
4.3 创建组件目录
可以给未来的组件新建存放目录
在components 文件夹中新建文件夹:
- ... // 其他文件
- components // 存放公共组件的文件夹
- post // 存放旅游攻略模块组件的文件夹
- air // 存放机票模块组件的文件夹
- hotel // 存放酒店模块组件的文件夹
- user // 存放用户模块组件的文件夹
- ... // 其他文件
5.修改配置
5.1 举例:页面过渡效果样式(可选)
目前还没涉及到页面的跳转,但不妨碍给项目配置预先做好铺垫,这份配置只是为了页面切换时优化用户体验设计的,并不是必须的。
在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 配置文件中加载该文件才能生效
5.2 修改nuxt.config.js 配置文件
- webpack 配置都在 webpack.config.js
- vue-cli 配置在 vue.config.js
- nuxt 的配置全部都在 nuxt.config.js
配置文件nuxt.config.js
对项目进行了全局配置,对每个页面都生效。
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记得要重启项目(比较保险)
5.3添加less
预编译样式我们选择less
,相关配置nuxtjs
已经帮我们配置好了,不需要改动webpack
的配置文件,只需要安装依赖包即可
npm install --save less less-loader
到这 一个nuxt.js已经搭建完毕,接下来就可以开始进行你的业务功能了。