前言
最近公司须要做一个新的官网，筹备从0到1搭建一遍，外面可能还会波及到对一些基础知识的集体了解，本着做记录的目标，心愿能帮忙本人也能帮忙到大家，当初开始吧～
介绍
Nuxt.js是一个基于Vue.js的通用利用框架。
装置
办法一：应用官网脚手架
第一步：装置我的项目
$ npx create-nuxt-app <我的项目名>它会让你抉择一些内容
- 须要集成的服务器（koa,Express…），应用Nuxt默认服务器就抉择None
- 喜爱的UI框架（Antd,ElementUI…），默认为None
- 喜爱的测试框架，默认无
- 抉择想要的Nuxt模式（Universal/SPA），简略了解，对SEO要求比拟高的话抉择Universal；如果没有SEO需要，前后端拆散的我的项目能够抉择SPA
- 增加axios到我的项目中吗
- 增加eslit来检查和标准代码吗
- 增加prettier来格式化代码吗
第二步：进入我的项目所在文件夹，运行我的项目
$ cd <我的项目名>
$ npm run dev办法二：从头开始新建我的项目
只须要一个目录和一个文件即可新建一个nuxt我的项目
第一步：创立我的项目文件夹
$ mkdir <我的项目名>
$ cd <我的项目名>第二步：新建package.json文件
package.json文件用来设定运行我的项目的脚本以及记录后续装置的npm包
{
"name": "my-app",
"scripts": {
"dev": "nuxt"
}
}第三步：装置nuxt
进入刚刚创立的我的项目文件中，装置nuxt
$ npm install --save nuxt第四步：创立pages目录
$ mkdir pages创立第一个页面，pages/index.vue
<template>
<h1>Hello world!</h1>
</template>而后启动我的项目
$ npm run dev补充知识点：Universal和SPA模式的差异
目录构造
资源目录（assets）
用来组织未编译的动态资源，如LESS、SASS、JS
对于不须要通过Webpack解决的动态资源文件，能够放在static目录中，更多内容
组件目录（components）
用于寄存我的项目中的公共组件，这些组件不像页面组件中那样有asyncData办法的个性
布局目录（layouts）
用于寄存我的项目中的布局组件，该目录在无额定配置的状况下，不能重命名，理解更多
中间件目录（middleware）
用于寄存我的项目中的中间件（容许您定义一个自定义函数容许在一个页面或一组页面渲染之前）
// 自定义中间件 middleware/stats.js
import axios from 'axios'
export default function ({ route }) {
return axios.post('http://my-stats-api.com', {
url: route.fullPath
})
}在全局应用
每个路由切换的时候都会调用一个中间件stats
// nuxt.config.js
module.exports = {
router: {
middleware: 'stats'
}
}在单个页面/布局组件中应用
在路由切换到以后页面时调用
// pages/index.vue 或者 layouts/default.vue
export default {
middleware: 'stats'
}页面目录（pages）
用于组织利用的路由及视图，Nuxt会依据文件名称生成对应的路由，该目录在无额定配置的状况下，不能重命名
插件目录（plugins）
用于组织那些须要在实例化之前运行的js插件或第三方库，比方axios、element-ui等，应用前需在nuxt.config.js中进行配置
须要留神的是，在任何Vue组件的生命周期内，只有beforeCreate和create这两个办法会在 客户端和服务端被调用。其余生命周期函数仅在客户端被调用。
应用第三方模块
<template>
<h1>{{ title }}</h1>
</template>
<script> import axios from 'axios'
export default {
async asyncData({ params }) {
let { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
} </script>应用Vue插件
// 在plugins文件夹下新建vue-notifications.js
import Vue from 'vue'
import VueNotifications from 'vue-notifications'
Vue.use(VueNotifications)// 在nuxt.config.js中配置
module.exports = {
plugins: ['~/plugins/vue-notifications']
}全局注入
如果心愿在整个利用应用某个函数或属性，能够将它们注入到Vue实例（客户端），context（服务端）或者Store（Vuex）
应用的时候，须要在办法前加上$，示意自定义的函数；如果须要限度插件只在客户端运行，在配置的时候加一个
ssr: false就行
注入到客户端（Vue实例）
// 在plugins文件夹下新建vue-inject.js
import Vue from 'vue'
Vue.prototype.$myInjectedFunction = string =>
console.log('This is an example', string) // 在nuxt.config.js中配置
export default {
plugins: ['~/plugins/vue-inject.js']
}// 在组件中应用
export default {
mounted() {
this.$myInjectedFunction('test')
}
}注入到服务端（context）
// plugins/ctx-inject.js
export default ({ app }, inject) => {
// Set the function directly on the context.app object
app.myInjectedFunction = string =>
console.log('Okay, another function', string)
}// 在nuxt.config.js中配置
export default {
plugins: ['~/plugins/ctx-inject.js']
}// 从context(例如在asyncData，fetch)中拿到注册的函数
export default {
asyncData(context) {
context.app.myInjectedFunction('ctx!')
}
}同时注入
如果想在客户端，服务端以及Vuex中同时注入，能够应用inject办法，如下
// plugins/combined-inject.js
export default ({ app }, inject) => {
inject('myInjectedFunction', string => console.log('That was easy!', string))
}// nuxt.config.js
export default {
plugins: ['~/plugins/combined-inject.js']
}// 在一般组件中应用
export default {
mounted() {
this.$myInjectedFunction('works in mounted')
},
asyncData(context) {
context.app.$myInjectedFunction('works with context')
}
}// 在store中的js文件中应用
export const state = () => ({
someValue: ''
})
export const mutations = {
changeSomeValue(state, newValue) {
this.$myInjectedFunction('accessible in mutations')
state.someValue = newValue
}
}
export const actions = {
setSomeValueToWhatever({ commit }) {
this.$myInjectedFunction('accessible in actions')
const newValue = 'whatever'
commit('changeSomeValue', newValue)
}
}动态文件目录（static）
在该目录下寄存的动态文件，不会被webpack编译解决；服务器启动的时候，这些文件会映射到利用的根门路下
<!-- 援用 static 目录下的图片 -->
<img src="/my-image.png" />
<!-- 援用 assets 目录下通过 webpack 构建解决后的图片 -->
<img src="~/assets/my-image-2.png" />Store目录（store）
用于组织Vuex的状态树，更多内容
nuxt.config.js文件
用于组织个性化配置，来笼罩默认配置
发表回复