---------------------------------------方式1--------------------------------------------------------------
安装 nuxt.js
Nuxt.js 官方提功了两种方法来进行项目的初始化，一种是使用Nuxt.js团队的脚手架工具 create-nuxt-app ，一种是根据自己的需求自由配置
使用脚手架适合新手，对 nodejs 后台框架有所了解；按照自己需求自由配置，需要对如何配置 webpack 以及 nodejs 后台框架有所了解。
两种方式比较下就是原生和插件的区别。
使用脚手架安装
需要有 nodejs 或者 yarn 环境，推荐使用 vscode 自带的控制台输入命令行命令进行操作
在有了环境之后直接输入以下命令就可以直接创建一个项目（npx 在npm 5.2.0默认安装，使用最新稳定nodejs环境不用考虑有没有）
npx create-nuxt-app <项目名>
#或者用yarn
yarn create nuxt-app <项目名>
之后他会提示你进行一些选择
1.项目名
在这里可以设置项目名，亦可以之后在 package.js 中设置 name 属性，一般是在输入上面命令时的项目名，不需要修改直接回车就好
[图片上传失败...(image-efa17b-1597678965023)]
2.项目描述
这里是关于项目的描述，比如是做什么的，也可以之后在 package.js 中设置 description 属性
[图片上传失败...(image-532805-1597678965023)]
3.选择服务器端框架
看自己习惯使用什么了，一般 Express Koa 居多
[图片上传失败...(image-5d9727-1597678965023)]
4.扩展插件
选择 axios EsLint Prettier
- axios 发送HTTP请求
- EsLint 在保存时代码规范和错误检查自己的代码。
- Prettier 在保存时格式化/美化自己的代码。
[图片上传失败...(image-fdec4c-1597678965023)]
5.选择 UI 框架
UI 框架方便快速开发，提供了很多现成的样式，近几年听到最多的就是 Element UI
[图片上传失败...(image-1bc64e-1597678965023)]
6.选择测试框架
测试框架是用来检测程序有没有到达预期的目的，有没有出错，这里暂时用不到，所以选择 none 就好
[图片上传失败...(image-ca4f27-1597678965023)]
7.选择渲染模式
这里分单页应用（spa）以及普遍的方式（Universal），单页应用有很多路由但是页面只有一个，所有能看到的页面都是 js 即时生成的 dom，第二种是在服务器生成 html ，有多少路由就有多少页面。
使用 nuxt 就是为了解决 SEO 的问题，使其实现所有网站路径完全被收录
[图片上传失败...(image-a0362a-1597678965023)]
8.作者
这个也可以之后在 package.js 中设置 author 属性
[图片上传失败...(image-8a5212-1597678965023)]
9.选择包管理工具
这里选择那个都可以，看自己习惯用哪个
[图片上传失败...(image-6801c3-1597678965023)]
10.选择完成开始安装
[图片上传失败...(image-802bb6-1597678965023)]
11.安装完成
提示信息
[图片上传失败...(image-7a0029-1597678965023)]
项目目录
[图片上传失败...(image-9b195f-1597678965023)]
关于如何根据自己的需求自由配置，这里不讲，有需要自由配置的一般都不是新手了，推荐看看官方文档
添加其他常用功能
除了 nuxt 脚手架自带的，我们还需要其他配置，ES6的编译 ，CSS的预处理，其他的用到了再添加
安装 babel
yarn add babel-cli babel-preset-env
配置文件
.babelrc
{
"presets": ["env"]
}
安装 scss
yarn add node-sass
yarn add sass-loader
之后只需要在 vue 文件的 style 标签加一条属性声明下就好
<style lang="sass">
</style>
# or
<style lang="scss">
</style>
-----------------------------------------------方式2---------------------------------------------------------
node环境，vue_cli自行安装，vue_cli的判断使用 vue -V 查看是否安装
利用 vue-cli安装Nuxt.js提供的starter模板
$ vue init nuxt-community/starter-template <project-name>
安装依赖包
npm install 此步不能少
启动项目
npm run dev
先在pages文件夹下面编写我们的index.vue
<template>
<div class="container">
<h2>新闻列表</h2>
<ul class="users">
<li v-for="user in users" :key="user.id">
<nuxt-link to="/users">{{ user.title }}</nuxt-link>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
transition: 'bounce',
async asyncData() {
const { data } = await axios.get('http://localhost:8081/getdata')
console.log(data)
return { users: data }
},
}
</script>
<style scoped>
.container {
text-align: center;
font-family: sans-serif;
}
.users {
list-style-type: none;
}
.users li a {
display: inline-block;
padding: 10px;
text-align: left;
color: #222;
text-decoration: none;
}
.users li a:hover {
color: orange;
}
</style>
这里有一个get请求接口，是自己用node搭建，数据源是python爬的。
新建一个users.vue
<template>
<div class="wrap">
<p>这里是详情页</p>
<nuxt-link to="/">返回首页</nuxt-link>
</div>
</template>
<script>
export default {
transition: 'bounce',
asyncData() {
return new Promise((resolve) => {
setTimeout(function () {
resolve({})
}, 0)
})
},
head: {
title: '详情页'
}
}
</script>
<style scoped>
.wrap{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 200px
}
</style>
在assets新建一个全局的mian.css
body {
background: #eee;
height: 100%;
width: 100%;
}
.container {
text-align: center;
font-size: 20px;
transition: all .5s cubic-bezier(.55, 0, .1, 1);
}
.page-enter-active,
.page-leave-active {
transition: opacity .5s
}
.page-enter,
.page-leave-active {
opacity: 0
}
.bounce-enter-active {
animation: bounce-in .8s;
}
.bounce-leave-active {
animation: bounce-out .5s;
}
@keyframes bounce-in {
0% {
transform: scale(0)
}
50% {
transform: scale(1.2)
}
100% {
transform: scale(1)
}
}
@keyframes bounce-out {
0% {
transform: scale(1)
}
50% {
transform: scale(1.2)
}
100% {
transform: scale(0)
}
}
我在全局css中加入了路由跳转的过渡效果，在效果图中大家应该看到效果了，页面中使用即可
transition: 'bounce',
全局样式需要在nuxt.config.js中添加
css: [
'~/assets/main.css'
],
这样，一个入门级的demo就出来了
网友评论