A, NUXT Profile
Nuxt.js is based on a lightweight application framework Vue.js, and can be used to create server-side rendering (SSR) applications, can also act as a static site engine generates a static site applications, with elegant hierarchical code structure and thermal load and other characteristics .
Official website address: https: //zh.nuxtjs.org/
Two, NUXT environment to build
(1) provided
Be sure to install npx (npx since npm default shipping 5.2.0)
(2) cmd interface running
npx create-nuxt-app tensquare
if you are more than npm6.1 version (npm -v can view the version) can be entered
npm init nuxt-app tensquare.
Red box out be sure to choose Yarn or will be error, because the selection here the yarn, so also need to install the Yarn
npm install -g yarn
(3) opened with VS, modify package.json
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
(4) into the tensquare directory, run
cd tensquare
yarn install
the installation of dependencies
(5) running
yarn dev
In the browser open: localhost: 3000, see the following page can be friends:
Two, nuxt directory structure analysis
（1）资源目录 assets
用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
（2）组件目录 components
用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。
（3）布局目录 layouts
用于组织应用的布局组件。
（4）页面目录 pages
用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
（5）插件目录 plugins
用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
（6）nuxt.config.js 文件
nuxt.config.js 文件用于组织Nuxt.js 应用的个性化配置，以便覆盖默认配置。
三、NUXT快速入门
1.定义布局
一般网页的布局主要分为三部分，头尾以及中央的主体，一般情况下头部的导航信息以及尾部的版权信息是不变的，所以我们可以将头部和尾部单独提取出来：
修改layouts目录下default.vue
<template>
<div>
<header>头部</header>
<nuxt />
<footer>尾部</footer>
</div>
</template>
刷新一下页面就可以在页面上面看到“头部”的字样，页面下方则显示尾部，页面的中央主体部分 <nuxt />，是pages目录下的index.vue
2.页面路由
（1）在page目录创建文件夹
（2）recruit目录创建index.vue
<template>
<div>
招聘列表
</div>
</template>
（3）gathering目录创建index.vue
<template>
<div>
活动列表
</div>
</template>
NUXT routes are automatically generated according to the directory, no handwriting.
Modify default.vue, header added navigation links
<header>头部
<router-link to="/">首页</router-link>
<router-link to="/recruit">招聘</router-link>
<router-link to="/gathering">活动</router-link>
</header>
Click the navigation links, to test the effect of routing
3. Data Rendering
Installation axios
yarn add axios
modify gathering directory index.vue
<template>
<div>
活动列表
<div v-for="(item,index) in items" :key="index" >{{item.name}}</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
asyncData () {
console.log("111111")
return axios.get('http://192.168.192.130:7300/mock/5d120b475ed8ef4c615f2d60/gathering').then( res => {
return {items : res.data.data }
})
}
}
</script>
asyncData is a method for loading data asynchronously
See: https: //zh.nuxtjs.org/guide/async-data
4. Dynamic Routing
If we need to ID For inquiries, we need to use dynamic routing. NUXT dynamic routing is based on the initial underscore vue file, the file name parameter is the name behind the underscore
create pages / gathering / item / _id.vue
<template>
<div>
活动详情
{{item.id}}
<hr>
{{item.name}}
</div>
</template>
<script>
import axios from 'axios'
export default {
asyncData ({params}) {
console.log("111111")
return axios.get(`http://192.168.192.130:7300/mock/5d120b475ed8ef4c615f2d60/gathering/${params.id}`).then( res => {
return {item : res.data.data }
})
}
}
</script>
We enter in the address bar http: // localhost: 3000 / gathering / item / 1 you can see the results
in the active list page click on the link to enter the details page
<div>
活动列表
<div v-for="(item,index) in items" :key="index" >
<nuxt-link :to="'/gathering/item/'+item.id">{{item.name}}</nuxt-link>
</div>
</div>
Currently acting in nuxt-link and router-link, are routed jump.