1、创建项目
yarn create nuxt-app <项目名>
2、修改项目的host 和 port
在package.json文件中新增如下代码：
"config": {
"nuxt": {
"host": "192.168.124.4", // 此处可以改成自己的ip
"port": "1818" // 端口可以随意更改
}
},
3、在nuxt中使用sass
yarn add node-sass sass-loader -D
yarn add node-sass@5.0.0 sass-loader@10.1.1 -D 指定版本安装
注意：可能node-sass sass-loader版本过高，导致报错。nuxt webpack版本好像是4.0，反正如果报错就降版本
"node-sass": "5.0.0",
"sass-loader": "10.1.1"
4、引入scss全局变量或函数
yarn add --save-dev @nuxtjs/style-resources
修改nuxt.config.js配置
export default {
modules: [
'@nuxtjs/style-resources',
],
styleResources: {
scss: './assets/variables.scss',
less: './assets/**/*.less',
// sass: ... 需要什么配置什么，这里是全局的 根据需要配置，没有可以不配置
}
}
5、使用第三方插件库vant
安装
yarn add vant -S
在plugins文件夹中新建文件vant.js
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
修改nuxt.config.js配置
plugins: [
'@/plugins/vant'
]
css: [
'vant/lib/index.css',
]
6、Rem 布局适配
1、安装postcss-pxtorem lib-flexible
yarn add postcss-pxtorem lib-flexible --save-dev
yarn add postcss-pxtorem -D
2、配置lib-flexible
在plugins文件夹中新建文件lib-flexible.js
写入代码：import 'lib-flexible'
修改nuxt.config.js配置
meta: [
{ charset: 'utf-8' },
// { name: 'viewport', content: 'width=device-width, initial-scale=1' }, 这个要注释，用lib-flexible自动生成的viewport
{ hid: 'description', name: 'description', content: '' }
]
plugins: [
{
src: '@/plugins/lib-flexible',
ssr: false //不设置会报错
}
]
3、配置postcss-pxtorem
修改nuxt.config.js配置
build: {
postcss: {
plugins: {
// postcss-pxtorem 插件的版本需要 >= 5.0.0
'postcss-pxtorem': {
rootValue({ file }) {
return file.indexOf('vant') !== -1 ? 37.5 : 75;
},
propList: ['*'],
},
}
}
}
注意：postcss-pxtorem高版本会报错：Error: PostCSS plugin postcss-pxtorem requires PostCSS 8
具体原因不知道
解决办法：老规矩，降版本
yarn add postcss-pxtorem@5.1.1 -D
7、配置初始化css
assets\css\common.css
/*
---------------------------------------
【样式初始化】
---------------------------------------
*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,form,input,table,tr,td,dl,dt,dd,img,div{margin:0;padding:0;border:0;}
body{font:13px/25px Arial;background:#FFF;}
ol,ul{list-style-type:none;}
img{vertical-align:middle; display:inline-block;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
strong {font-weight: normal;}
select,button,textarea,input[type=submit]{font-family: 'Microsoft YaHei';cursor:pointer;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #CCC;}
input[type=search]::-webkit-search-cancel-button{-webkit-appearance: none;}
table{border-collapse:collapse;}
a{text-decoration:none;color:#333;cursor: pointer;outline:none;-moz-outline-style:none;text-decoration: none;-webkit-tap-highlight-color: rgba(0,0,0,0);}
em,i{font-style: normal;}
img {max-width: 100%;}
:focus{outline:0;}
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{*height:1%;*clear: both;}
.none {display: none;}
.left {float: left;}
.right {float: right;}
.hidden {overflow: hidden;}
html,body,.app,.word {height: 100%;}
修改nuxt.config.js配置
css: [
'~assets/css/common.css',
]
8、启动项目选择隐藏
// 去掉每次启动提示Are you interested in participating? (Y/n)
"telemetry": false,
