前段时间重构了公司的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',
],