前段时间重构了公司的H5主站，最近开始重构PC，发现很多踩过的坑都忘记了。好记性不如烂笔头，在这里记录一下。
创建NUXT：按照官网的命令行构建即可。静态本地渲染的配置要选对，创建的时候建议直接引入element，避免后续引入。
Git：git init，然后Gitlab建新项目，按照指示将本地的项目推送到Gitlab。
创建页面：在page路径下创建文件夹并添加.vue文件，nuxt会自动创建相应的路由。
自定义路由：一般来说，主页的路由文件直接暴露在page目录下。这样看着不是很舒服。自定义一个路由即可。在nuxt.config.js中添加类似以下即可。
router: {
extendRoutes(routes, resolve) {
routes.push({
path: '/',
name: 'HomePage_1',
component: resolve(__dirname, 'pages/homepage/index.vue')
}, {
path: '/home',
name: 'HomePage_2',
component: resolve(__dirname, 'pages/homepage/index.vue')
})
}
},根目录HTML：vue在public中创建index.html可以配置网页全局样式等。nuxt中，在项目根目录创建App.html，加入默认模板即可。模板可以通过.nuxt中获取如下，复制粘贴就好。
<!DOCTYPE html>
<html lang="en">
<head>
{{HEAD}}
</head>
<body>
{{APP}}
</body>
</html>消除默认样式：浏览器会自作聪明地给页面加上一堆margin，导致出现空白边框。在App.html的head中加入以下全局样式。
<style>body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{margin:0;}</style>组件：自定义的组件直接放在component目录下，需要时直接使用标签名字引入即可。
设置sass样式：这里有一个坑。不能直接安装sass-loader，自动获取的最高版本会造成不兼容，报错。我们需要安装指定的较低版本。
// 错误，会导致不兼容
npm install sass-loader -D
// 正确
npm install node-sass@4.14.1 -D
npm install sass-loader@8.0.2 -D引入自定义主题色：针对element UI，如果想引入自定义主题色，我们只需在项目中添加一个element-variables.scss文件，内容如下
// 你要定制的主题颜色
$--color-primary: #29E19E;
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";并在plugins的element-ui.js中添加以下代码进行引入。这里的目录是我项目中的目录，具体项目具体路径引入即可。
import '../assets/scss/element-variables.scss'这里说一下plugins这个目录，plugins是引入中间件以及插件的目录。如果想对引入的中间件/插件做一些处理，都需要在plugins这个目录中创建相应的文件进行设置。
封装请求：首先引入axios
npm i @nuxtjs/axios在nuxt.config.js的modules中引入
modules: [
'@nuxtjs/axios',
],
1289
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
