Nuxt2项目搭建（Nuxt2+element+less详细步骤

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

记录学习nuxt项目搭建的步骤和坑

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、安装nuxt

npx create-nuxt-app nuxt-demo
or
yarn create nuxt-app nuxt-demo

(nuxt-demo是项目名称)
回车后 我选了element axios eslint等

二、初始化项目后

1. 创建需要的文件目录

1 assets 我用来放改变默认样式的css文件，并在nuxt.config.js里做配置

css:['@/assets/reset.less']

2 middleware文件夹用来放中间层代码（在组件运行前先运行它）

例1：下面新建了login.js中间层，并引用在login.vue页面下，所以在路由跳转到login页时，先判断vuex是否有用户信息，有的话就重定向到首页。


例2：新建了init.js中间层，并引用在了nuxt.config.js路由配置下，每次路由跳转都会先判断，如果去的是留言板页面且用户没有登录，要跳转到登录页；

//nuxt.config.js
 router: {
    middleware: 'init' // 中间件，跳转路由的时候先执行它
  }

3 layouts文件夹

用来写ui布局文件，默认是default，error是报错的时候显示的页面；当某个页面不希望使用default的时候，可以自己创建例如empty、my-layout等布局

使用方式

//default.vue
<template>
	<div class="default">
		<div class="header"></div>
			//路由页面
			<nuxt/>
		<div class="footer"></div>
	</div>
</template>

//当不想使用默认的布局时，例如login你不希望登录页上有header和footer，只想展示纯粹的login内容
//login.vue
<script>
	export default {
		layout: 'empty',
	}
</script>

4 page文件夹

page文件夹下的页面会自动 帮你创建成路由页，如果你想要动态路由/二级路由，如下artical文件夹创建可访问到的路由有 /artical/one /artical/123 /artical/234 等

当你想要动态路由做限制，比如id一定要为数字才可以跳转进来，否则就是跳到error.vue错误页面，可在 _id.vue内做判断

//_id.vue
<!-- /artical/:id -->
<template>
  <div>
    我是动态路由
    <p>id:{{ id }}</p>
  </div>
</template>
<script>
export default {
  validate ({ params }) {
    // 返回布尔值，验证是就进来这个页面
    return /^\d+$/.test(params.id)
  },

  // 返回的对象当data使用
  asyncData ({ params }) {
    const id = params.id
    return {
      id
    }
  }
}
</script>
<style lang="less" scoped></style>

5 plugins文件夹

放一些插件，比如我们安装了axios，希望在axios请求里统一做接口拦截；安装了element，引入element使用；

//axios.js
export default function ({ $axios }) {
  $axios.interceptors.response.use((config) => {
    if (config.data.code === 200) {
      return config.data
    } else {
      return Promise.reject(config.data)
    }
  })
}

//element-ui.js
import Vue from 'vue'
import ElementUI from 'element-ui'
Vue.use(ElementUI)

//nuxt.config.js
plugins: [
    '@/plugins/element-ui',
    '@/plugins/axios',
],
css: [
    'element-ui/lib/theme-chalk/index.css',
],

2.配置less预处理器

npm i less less-loader 

//我安装的版本
"webpack": "^4.46.0"
"less": "^3.13.1",
"less-loader": "^7.3.0",

ps：我在安装这两个的时候报错：
（Module build failed (from ./node_modules/less-loader/dist/cjs.js): TypeError: this.getOptions is not a function）
是因为webpack的版本和less版本匹配不一致的造成的，可以上less官网看看你对应的webpack版本应该安装哪个less版本

//配置样式的全局变量
npm i @nuxtjs/style-resources

//nuxt.config.js
modules:['@nuxtjs/style-resources']
styleResources: {
   less: '@/assets/reset.less' // 配置全局变量
},

3.配置自适应flexiable和px2rem

npm i postcss-pxtorem -D
lib-flexible.js可自己在网上下载/npm包下载，我这里用的是以前项目cv过来到plugins文件夹下的

//nuxt.config.js
plugins: [
   {
     src: '@/plugins/lib-flexible', ssr: false
   }
],
 build: {
   postcss: {
     plugins: {
       'postcss-pxtorem': {
         rootValue: 16, //
         propList: ['*'], // 转换所有属性的 px 单位
         selectorBlackList: [], // 不转换的选择器（如正则表达式）
         minPixelValue: 2, // 小于 2px 不转换
         exclude: /node_modules/i // 排除 node_modules 中的样式
       }
     }
   }
 },

4.配置代理

npm i @nuxtjs/proxy

//nuxt.config.js
modules:[
  '@nuxtjs/proxy',
]
proxy: {
   '/api/': {
     target: 'http://127.0.0.1:8080/',
     pathRewrite: {
       '^/api/': ''
     }
   }
},
axios: {
   // baseURL: '/',
   baseURL: 'http://localhost:3000/api'
},

使用axios请求接口示例

//login.js
<script>
export default {
  methods: {
    login (formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const { userName, password } = this.ruleForm
          try {
            const val = await this.$axios.post('/login', { userName, password })
            this.$message.success(val.msg)
            // vuex存储登录信息
            this.$store.commit('setUser', val.name)
            this.$store.commit('setLogin', true)
            // 获取到想要跳转去的页面
            const url = this.$route.query.url || '/'
            this.$router.push(url)
          } catch (error) {
            this.$message.error(error.msg)
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

5 store.js文件

nuxtServerInit 可以做刷新后vuex的持久化处理，把存在浏览器上的信息赋值回来给vuex；
ps：nuxtServerInit 一定要在store>index.js下才起作用

export const actions = {
  nuxtServerInit  ({ commit }, { req }) {
    const cookie = req && req.headers.cookie
    const val = getCookie(cookie, 'session')
    // console.log(val, '====') // 打印在cmd上
    if (val) {
      const user = getCookie(cookie, 'username')
      commit('setUser', user)
      commit('setLogin', true)
    }
  }
}
export const state = () => ({
  user: null,
  isLogin: false
})
export const mutations = {
  setUser (state, user) {
    state.user = user
  },
  setLogin (state, flag) {
    state.isLogin = flag
  }
}

function getCookie (cookie, key) {
  if (!cookie) { return }
  const cookies = cookie.split(';')

  for (let i = 0; i < cookies.length; i++) {
    const c = cookies[i]
    const [k, v] = c.split('=')

    if (k.trim() === key) {
      return v
    }
  }
}

---

总结

使用起来跟vue差不多。

最后

如果你想自己写个小小的测试服务器，那么找个坑位初始化项目

npm init -y
npm i express
npm i nodemon -g

新建index.js文件夹 如下
nodemon .\index.js

// index.js

const express = require('express');
const server = express();

server.use(express.json());
server.post('/login', async (req, res) => {
	try {
		const { userName, password } = req.body;
		//一般这里是去请求数据库数据
		if (userName === 'root' && password === '123123') {
			res.cookie('session', '123456'), res.cookie('username', 'hzx');
			res.json({
				name: 'lix',
				msg: '登录成功',
				code: 200,
			});
		} else {
			res.json({
				msg: '账号密码错误',
				code: 500,
			});
		}
	} catch (error) {
		console.log(error);
		res.statusCode(500).send('服务器错误');
	}
});
server.listen(8080,_=>console.log('server is running at 8080'))